@vanduo-oss/framework 1.4.6 → 1.5.1

package/dist/vanduo.cjs.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.4.6 | Built: 2026-06-13T10:32:26.875Z | git:82019ff | development */
+/*! Vanduo v1.5.1 | Built: 2026-06-20T15:00:18.257Z | git:baf8178 | development */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -201,7 +201,7 @@ module.exports = __toCommonJS(index_exports);
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.4.6" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.5.1" : "0.0.0-dev";
   const hasOwn = Object.prototype.hasOwnProperty;
   const Vanduo2 = {
     version: VANDUO_VERSION,
@@ -7788,7 +7788,7 @@ module.exports = __toCommonJS(index_exports);
         setActive(card);
       };
       const onKeydown = function(e) {
-        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End") {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "ArrowUp" && e.key !== "ArrowDown" && e.key !== "Home" && e.key !== "End") {
           return;
         }
         const cards = getCards().filter(function(c) {
@@ -7803,10 +7803,14 @@ module.exports = __toCommonJS(index_exports);
           });
         }
         if (idx < 0) idx = 0;
-        if (e.key === "ArrowLeft") {
+        const isVertical = window.getComputedStyle(container).flexDirection === "column";
+        if (!isVertical && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+          return;
+        }
+        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
           e.preventDefault();
           setActive(cards[Math.max(0, idx - 1)]);
-        } else if (e.key === "ArrowRight") {
+        } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
           e.preventDefault();
           setActive(cards[Math.min(cards.length - 1, idx + 1)]);
         } else if (e.key === "Home") {
@@ -10441,6 +10445,7 @@ module.exports = __toCommonJS(index_exports);
     _cleanup: [],
     _boundTriggers: /* @__PURE__ */ new WeakMap(),
     _triggerElement: null,
+    _currentTarget: null,
     init: function(root) {
       const triggers = window.Vanduo.queryAll(root, "[data-vd-spotlight]");
       triggers.forEach((trigger) => {
@@ -10509,8 +10514,29 @@ module.exports = __toCommonJS(index_exports);
       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;
@@ -10583,19 +10609,15 @@ module.exports = __toCommonJS(index_exports);
       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 }
@@ -10636,6 +10658,7 @@ module.exports = __toCommonJS(index_exports);
       this._elements = {};
       this._steps = [];
       this._currentStep = 0;
+      this._currentTarget = null;
       if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === "function") {
         this._triggerElement.focus();
       }