From f3ef42b3f3004f959bd065a4caceb279d5415c56 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Mon, 3 Nov 2025 22:00:00 -0600
Subject: [PATCH 01/13] feat: enhance VTour component with default tooltip
 placement and multi-instance support - Fix major rendering/positioning/etc
 bugs - Added `defaultPlacement` prop to `VTourProps` for tooltip positioning.
 - Updated component to use scoped IDs and highlight classes based on the
 `name` prop. - Improved CSS visibility handling for backdrop and tooltip
 elements. - Refactored tests to accommodate Teleport rendering and scoped
 IDs. - Renamed component CSS output to avoid conflicts with SCSS.

---
 package.json                  |   3 +-
 src/Types.d.ts                |   3 +
 src/components/VTour.vue      | 380 ++++++++++++++++++-----------
 src/style/style.scss          |  54 +++--
 src/vuejs-tour.ts             |   5 +-
 test/components/VTour.spec.ts | 445 ++++++++++++++++++++++++++++++++--
 vite.config.ts                |   9 +-
 7 files changed, 711 insertions(+), 188 deletions(-)

diff --git a/package.json b/package.json
index 41fae8f..c025d97 100644
--- a/package.json
+++ b/package.json
@@ -64,8 +64,7 @@
     "test:watch": "vitest --watch",
     "lint": "vue-tsc --noEmit && npm run type-check",
     "clean": "rm -rf dist node_modules/.vite",
-    "format": "prettier --write \"**/*.{js,ts,vue}\" --ignore-path .gitignore",
-    "prepare": "npm run build-only"
+    "format": "prettier --write \"**/*.{js,ts,vue}\" --ignore-path .gitignore"
   },
   "dependencies": {
     "jump.js": "^1.0.2",
diff --git a/src/Types.d.ts b/src/Types.d.ts
index afdc4cb..ab76557 100644
--- a/src/Types.d.ts
+++ b/src/Types.d.ts
@@ -86,6 +86,9 @@ export interface VTourProps {
 
   /** Debounce timeout for resize events in milliseconds */
   readonly resizeTimeout?: number;
+
+  /** Default tooltip placement when step doesn't specify one */
+  readonly defaultPlacement?: NanoPopPosition;
 }
 
 /**
diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index 68144c6..fbf5f18 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { createPopper, type NanoPop } from 'nanopop';
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import jump from 'jump.js';
 import type {
   VTourProps,
@@ -11,12 +11,13 @@ import type {
 
 // Props with defaults
 const props = withDefaults(defineProps<VTourProps>(), {
-  name: 'default',
+  name: '',
   backdrop: false,
   autoStart: false,
   startDelay: 0,
   highlight: false,
   margin: 8,
+  defaultPlacement: 'right',
   saveToLocalStorage: 'never',
   hideSkip: false,
   hideArrow: false,
@@ -28,10 +29,8 @@ const props = withDefaults(defineProps<VTourProps>(), {
 const emit = defineEmits<VTourEmits>();
 
 // Reactive state with cleaner naming
-const saveKey = computed(() => `vjt-${props.name}`);
+const saveKey = computed(() => (props.name ? `vjt-${props.name}` : 'vjt-tour'));
 const vTour = ref<NanoPop>();
-const tooltip = ref<HTMLElement>();
-const backdrop = ref<HTMLElement>();
 
 const currentStepIndex = ref(0);
 const lastStepIndex = ref(0);
@@ -60,6 +59,27 @@ const getNextLabel = computed(() => {
 
 const getClipPath = ref('');
 
+// Reactive visibility controls for modal behavior
+const tourVisible = ref(false);
+const backdropVisible = ref(false);
+const currentPlacement = ref('right');
+const isTransitioning = ref(false); // Hide tooltip during step transitions
+
+// Unique IDs and classes for this tour instance (based on name prop)
+// Empty name = backward compatible IDs (vjt-tooltip, vjt-backdrop)
+// Non-empty name = scoped IDs (vjt-myname-tooltip, vjt-myname-backdrop)
+const tourId = computed(() => (props.name ? `vjt-${props.name}` : 'vjt'));
+const tooltipId = computed(() => `${tourId.value}-tooltip`);
+const backdropId = computed(() => `${tourId.value}-backdrop`);
+const arrowId = computed(() => `${tourId.value}-arrow`);
+const highlightClass = computed(() =>
+  props.name ? `vjt-highlight-${props.name}` : 'vjt-highlight'
+);
+
+// Cache DOM element references (populated after Teleport renders)
+const _Tooltip = ref<HTMLElement>();
+const _Backdrop = ref<HTMLElement>();
+
 const startTour = async (): Promise<void> => {
   if (localStorage.getItem(saveKey.value) === 'true') return;
 
@@ -79,6 +99,7 @@ const startTour = async (): Promise<void> => {
     await beforeStep(currentStepIndex.value);
 
     const currentStepData = getCurrentStep.value;
+
     if (!currentStepData) {
       console.warn('No step data available');
       return;
@@ -88,14 +109,41 @@ const startTour = async (): Promise<void> => {
       currentStepData.target
     ) as HTMLElement;
 
-    if (!targetElement || !tooltip.value) {
+    if (!targetElement) {
       console.warn(`Tour target element not found: ${currentStepData.target}`);
       return;
     }
 
+    // Wait for Teleport to render DOM elements, then cache references
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    if (!_Tooltip.value) {
+      _Tooltip.value = document.querySelector(
+        `#${tooltipId.value}`
+      ) as HTMLElement;
+    }
+
+    if (!_Backdrop.value) {
+      _Backdrop.value = document.querySelector(
+        `#${backdropId.value}`
+      ) as HTMLElement;
+    }
+
+    if (!_Tooltip.value) {
+      console.warn('Tooltip element not found in DOM');
+      return;
+    }
+
+    // Show tour content (but keep hidden via isTransitioning) so nanopop can calculate dimensions
+    tourVisible.value = true;
+    isTransitioning.value = true;
+
+    // Wait for Vue to render the content in the DOM with proper dimensions
+    await nextTick();
+
     if (!vTour.value) {
-      vTour.value = createPopper(targetElement, tooltip.value, {
-        position: currentStepData.placement || 'right',
+      vTour.value = createPopper(targetElement, _Tooltip.value, {
+        position: currentStepData.placement || props.defaultPlacement,
         margin:
           props.margin ||
           (props.highlight || currentStepData.highlight ? 14 : 8),
@@ -103,18 +151,31 @@ const startTour = async (): Promise<void> => {
     }
 
     await updatePosition();
+
+    // Show tooltip after positioning is complete
+    isTransitioning.value = false;
+
     emit('onTourStart');
   }, props.startDelay);
 };
 
 const stopTour = (): void => {
-  backdrop.value?.setAttribute('data-hidden', '');
+  // Hide tour and backdrop immediately
+  // Both must be set to prevent CSS visibility conflicts with fixed-position elements
+  tourVisible.value = false;
+  backdropVisible.value = false;
+  isTransitioning.value = false;
+
+  // Remove highlights for this tour instance only
   document
-    .querySelectorAll('.vjt-highlight')
-    .forEach((element) => element.classList.remove('vjt-highlight'));
-  tooltip.value?.setAttribute('data-hidden', '');
-};
+    .querySelectorAll(`.${highlightClass.value}`)
+    .forEach((element) => element.classList.remove(highlightClass.value));
 
+  // Destroy nanopop instance so it can be recreated on next tour start
+  if (vTour.value) {
+    vTour.value = undefined;
+  }
+};
 const resetTour = (shouldRestart = false): void => {
   stopTour();
   currentStepIndex.value = 0;
@@ -126,6 +187,10 @@ const resetTour = (shouldRestart = false): void => {
 
 const nextStep = async (): Promise<void> => {
   await beforeStep(nextStepIndex.value);
+
+  // Hide tooltip during transition to prevent content flash
+  isTransitioning.value = true;
+
   lastStepIndex.value = currentStepIndex.value;
   currentStepIndex.value++;
 
@@ -136,10 +201,17 @@ const nextStep = async (): Promise<void> => {
 
   nextStepIndex.value = currentStepIndex.value + 1;
   await updatePosition();
+
+  // Show tooltip after positioning is complete
+  isTransitioning.value = false;
 };
 
 const lastStep = async (): Promise<void> => {
   await beforeStep(lastStepIndex.value);
+
+  // Hide tooltip during transition to prevent content flash
+  isTransitioning.value = true;
+
   currentStepIndex.value = lastStepIndex.value;
   lastStepIndex.value = Math.max(lastStepIndex.value - 1, 0);
 
@@ -150,6 +222,9 @@ const lastStep = async (): Promise<void> => {
 
   nextStepIndex.value = currentStepIndex.value + 1;
   await updatePosition();
+
+  // Show tooltip after positioning is complete
+  isTransitioning.value = false;
 };
 
 const endTour = (): void => {
@@ -167,12 +242,18 @@ const goToStep = async (stepIndex: number): Promise<void> => {
   }
 
   await beforeStep(stepIndex);
+
+  // Hide tooltip during transition to prevent content flash
+  isTransitioning.value = true;
+
   currentStepIndex.value = stepIndex;
   lastStepIndex.value = Math.max(stepIndex - 1, 0);
   nextStepIndex.value = stepIndex + 1;
   await updatePosition();
-};
 
+  // Show tooltip after positioning is complete
+  isTransitioning.value = false;
+};
 const beforeStep = async (step: number): Promise<void> => {
   const stepData = props.steps[step];
   if (stepData?.onBefore) {
@@ -180,44 +261,71 @@ const beforeStep = async (step: number): Promise<void> => {
   }
 };
 
-const updatePosition = async (): Promise<void> => {
+// Helper function to set the placement attribute for CSS styling
+// Sets data-arrow attribute based on tooltip placement so CSS can style the arrow accordingly
+const setPlacementAttribute = (placement: string | null | undefined): void => {
+  if (!placement || !_Tooltip.value) return;
+
+  _Tooltip.value.setAttribute('data-arrow', placement);
+  currentPlacement.value = placement;
+};
+
+// Core positioning logic - updates tooltip, highlight, and backdrop without scrolling or events
+const updateTooltipPosition = (): void => {
   const currentStepData = getCurrentStep.value;
-  if (!currentStepData) {
-    console.warn('No current step data available');
-    return;
-  }
+  if (!currentStepData || !vTour.value) return;
 
   const targetElement = document.querySelector(
     currentStepData.target
   ) as HTMLElement;
 
-  if (!targetElement || !tooltip.value || !vTour.value) {
-    console.warn('Cannot update position: missing required elements');
-    return;
-  }
+  if (!targetElement) return;
 
+  // Update highlight and backdrop for current position
   updateHighlight();
   updateBackdrop();
-  tooltip.value.setAttribute('data-hidden', '');
 
+  // Update popper position and set placement attribute
+  // Nanopop automatically handles viewport edge detection and will flip placement if needed
+  // Nanopop v2.x returns the actual placement but doesn't automatically set the data-arrow attribute
+  const actualPlacement = vTour.value.update({
+    reference: targetElement,
+    position: currentStepData.placement || props.defaultPlacement,
+  });
+
+  setPlacementAttribute(actualPlacement || props.defaultPlacement);
+};
+
+// Full position update with optional scrolling, callbacks, and events
+const updatePosition = async (): Promise<void> => {
+  const currentStepData = getCurrentStep.value;
+  if (!currentStepData) return;
+
+  const targetElement = document.querySelector(
+    currentStepData.target
+  ) as HTMLElement;
+
+  if (!targetElement || !_Tooltip.value || !vTour.value) {
+    return;
+  }
+
+  // Scroll to target first if needed
   if (!props.noScroll && !currentStepData.noScroll) {
     await new Promise<void>((resolve) => {
       jump(targetElement, {
         duration: 500,
         offset: -100,
-        callback: resolve,
+        callback: () => {
+          setTimeout(() => {
+            resolve();
+          }, 50);
+        },
       });
     });
   }
 
-  tooltip.value.removeAttribute('data-hidden');
-  const arrowPosition =
-    vTour.value.update({
-      reference: targetElement,
-      position: currentStepData.placement || 'right',
-    }) || 'right';
-
-  tooltip.value.setAttribute('data-arrow', arrowPosition);
+  // Update tooltip position (includes highlight, backdrop, and nanopop positioning)
+  updateTooltipPosition();
 
   if (props.saveToLocalStorage === 'step') {
     localStorage.setItem(saveKey.value, currentStepIndex.value.toString());
@@ -231,16 +339,15 @@ const updatePosition = async (): Promise<void> => {
 };
 
 const updateHighlight = (): void => {
-  // Remove existing highlights
+  // Remove existing highlights for this tour instance only
   document
-    .querySelectorAll('.vjt-highlight')
-    .forEach((element) => element.classList.remove('vjt-highlight'));
+    .querySelectorAll(`.${highlightClass.value}`)
+    .forEach((element) => element.classList.remove(highlightClass.value));
 
   const currentStepData = getCurrentStep.value;
   if (!props.highlight && !currentStepData?.highlight) return;
 
   if (!currentStepData) {
-    console.warn('No current step data for highlight');
     return;
   }
 
@@ -249,29 +356,27 @@ const updateHighlight = (): void => {
   ) as HTMLElement;
 
   if (!targetElement) {
-    console.warn(`Highlight target not found: ${currentStepData.target}`);
     return;
   }
 
-  targetElement.classList.add('vjt-highlight');
-  getClipPath.value = getClipPathValues('.vjt-highlight');
+  targetElement.classList.add(highlightClass.value);
+  getClipPath.value = getClipPathValues(`.${highlightClass.value}`);
 };
 
 const updateBackdrop = (): void => {
   const currentStepData = getCurrentStep.value;
-  const shouldShowBackdrop = props.backdrop || currentStepData?.backdrop;
+  // Show backdrop if global backdrop is enabled OR step has backdrop
+  const shouldShowBackdrop = props.backdrop || !!currentStepData?.backdrop;
 
-  if (shouldShowBackdrop) {
-    backdrop.value?.removeAttribute('data-hidden');
-  } else {
-    backdrop.value?.setAttribute('data-hidden', '');
-  }
+  backdropVisible.value = shouldShowBackdrop;
 };
 
-// Add missing redrawLayers function from old version
+// Redraw layers for resize/scroll events - updates position without scrolling or events
 const redrawLayers = (): void => {
   if (localStorage.getItem(saveKey.value) === 'true') return;
-  updatePosition();
+  if (!tourVisible.value) return; // Only redraw if tour is active
+
+  updateTooltipPosition();
 };
 
 // Resize handling with debounce
@@ -308,24 +413,40 @@ function getClipPathValues(targetSelector: string): string {
   )`;
 }
 
-// Initialize clip path
-getClipPath.value = getClipPathValues('.vjt-highlight');
+// Initialize clip path (will be updated when highlight is applied)
+getClipPath.value = '';
+
+// Scroll handling to update position during scroll
+const onScroll = (): void => {
+  if (localStorage.getItem(saveKey.value) === 'true') return;
+  if (!tourVisible.value) return; // Only update if tour is active
+
+  redrawLayers();
+};
 
 // Lifecycle hooks
 onMounted(() => {
-  tooltip.value = document.querySelector('#vjt-tooltip') as HTMLElement;
-  backdrop.value = document.querySelector('#vjt-backdrop') as HTMLElement;
+  // Vue refs will be set automatically for Teleported elements
+  // No need to manually query DOM for refs
 
   if (props.autoStart) {
     startTour();
   }
 
   window.addEventListener('resize', onResizeEnd);
+  window.addEventListener('scroll', onScroll, true); // Use capture phase to catch all scrolls
 });
 
 onUnmounted(() => {
+  // Clean up event listeners
   window.removeEventListener('resize', onResizeEnd);
+  window.removeEventListener('scroll', onScroll, true);
   clearTimeout(resizeTimer);
+
+  // Ensure tour is stopped and cleaned up when component unmounts
+  if (tourVisible.value) {
+    stopTour();
+  }
 });
 
 // Expose public API
@@ -344,102 +465,65 @@ defineExpose<VTourExposedMethods>({
 </script>
 
 <template>
-  <div
-    id="vjt-backdrop"
-    ref="backdrop"
-    data-hidden
-    :style="{ 'clip-path': getClipPath }"
-  />
-  <div
-    id="vjt-tooltip"
-    ref="tooltip"
-    role="tooltip"
-    data-arrow="right"
-    data-hidden
-  >
-    <slot
-      name="content"
-      :current-step-index="currentStepIndex"
-      :current-step-data="getCurrentStep"
-    >
-      <div v-html="_CurrentStep.getCurrentStep?.content" />
-    </slot>
-
-    <slot
-      name="actions"
-      :lastStep="lastStep"
-      :nextStep="nextStep"
-      :endTour="endTour"
-      :getNextLabel="getNextLabel"
-      :props="props"
-      :_CurrentStep="_CurrentStep"
+  <Teleport to="body">
+    <div
+      class="vjt-modal-overlay"
+      :class="{ 'vjt-tour-active': tourVisible }"
+      :data-hidden="!tourVisible"
     >
-      <div class="vjt-actions">
-        <button
-          v-if="lastStepIndex < currentStepIndex"
-          type="button"
-          class="vjt-btn vjt-btn-back"
-          @click.prevent="lastStep"
-        >
-          {{ props.buttonLabels?.back || 'Back' }}
-        </button>
-
-        <button
-          v-if="!props.hideSkip"
-          type="button"
-          class="vjt-btn vjt-btn-skip"
-          @click.prevent="endTour"
-        >
-          {{ props.buttonLabels?.skip || 'Skip' }}
-        </button>
-
-        <button
-          type="button"
-          class="vjt-btn vjt-btn-next"
-          @click.prevent="nextStep"
-        >
-          {{ getNextLabel }}
-        </button>
+      <div
+        :id="backdropId"
+        :data-hidden="!backdropVisible"
+        :style="{ 'clip-path': getClipPath }"
+      />
+      <div
+        :id="tooltipId"
+        role="tooltip"
+        :data-hidden="!tourVisible || isTransitioning"
+      >
+        <div v-if="tourVisible" :key="`step-${currentStepIndex}`">
+          <div :id="arrowId" v-if="!hideArrow"></div>
+          <slot
+            name="content"
+            :current-step-index="currentStepIndex"
+            :current-step-data="getCurrentStep"
+          >
+            <div v-html="_CurrentStep.getCurrentStep?.content" />
+          </slot>
+
+          <slot
+            name="actions"
+            :lastStep="lastStep"
+            :nextStep="nextStep"
+            :endTour="endTour"
+            :getNextLabel="getNextLabel"
+            :props="props"
+            :_CurrentStep="_CurrentStep"
+          >
+            <div class="vjt-actions">
+              <button
+                v-if="lastStepIndex < currentStepIndex"
+                type="button"
+                @click.prevent="lastStep"
+              >
+                {{ props.buttonLabels?.back || 'Back' }}
+              </button>
+
+              <button
+                v-if="!props.hideSkip"
+                type="button"
+                @click.prevent="endTour"
+              >
+                {{ props.buttonLabels?.skip || 'Skip' }}
+              </button>
+
+              <button type="button" @click.prevent="nextStep">
+                {{ getNextLabel }}
+              </button>
+            </div>
+          </slot>
+        </div>
       </div>
-    </slot>
-
-    <div v-if="!props.hideArrow" id="vjt-arrow" class="vjt-arrow" />
-  </div>
+    </div>
+  </Teleport>
 </template>
-
-<style scoped>
-.vjt-actions {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-
-.vjt-btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background: white;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.vjt-btn:hover {
-  background: #f5f5f5;
-}
-
-.vjt-btn-next {
-  background: #007bff;
-  color: white;
-  border-color: #007bff;
-}
-
-.vjt-btn-next:hover {
-  background: #0056b3;
-}
-
-.vjt-arrow {
-  width: 0;
-  height: 0;
-  position: absolute;
-}
-</style>
diff --git a/src/style/style.scss b/src/style/style.scss
index 589fbfd..c18def1 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -1,11 +1,27 @@
 @use "sass:math";
-@import "variables";
+@use "variables" as *;
 
-[data-hidden] {
-  display: none;
+[data-hidden="true"] {
+  visibility: hidden;
+  pointer-events: none;
 }
 
-#vjt-backdrop{
+[data-hidden="false"] {
+  visibility: visible;
+}
+
+.vjt-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+// Support multiple tour instances with dynamic IDs
+[id$="-backdrop"]{
   position: fixed;
   top: 0;
   left: 0;
@@ -13,9 +29,13 @@
   height: 100%;
   background-color: $vjt__backdrop_background;
   z-index: $vjt__backdrop_z_index;
+  
+  &:not([data-hidden="true"]) {
+    pointer-events: auto;
+  }
 }
 
-#vjt-tooltip {
+[id$="-tooltip"] {
   background-color: $vjt__tooltip_background;
   color: $vjt__tooltip_color;
   padding: 0.5rem;
@@ -24,38 +44,39 @@
   z-index: $vjt__tooltip_z_index;
   max-width: $vjt__tooltip_max_width;
   position: absolute;
+  pointer-events: auto;
 }
 
 
-#vjt-tooltip[data-arrow^='t'] {
-  #vjt-arrow {
+[id$="-tooltip"][data-arrow^='t'] {
+  [id$="-arrow"] {
     bottom: math.div(-$vjt__tooltip_arrow_size, 2);
     right: 50%;
   }
 }
 
-#vjt-tooltip[data-arrow^='b'] {
-  #vjt-arrow {
+[id$="-tooltip"][data-arrow^='b'] {
+  [id$="-arrow"] {
     top: math.div(-$vjt__tooltip_arrow_size, 2);
     right: 50%;
   }
 }
 
-#vjt-tooltip[data-arrow^='l'] {
-  #vjt-arrow {
+[id$="-tooltip"][data-arrow^='l'] {
+  [id$="-arrow"] {
     right: math.div(-$vjt__tooltip_arrow_size, 2);
     top: 50%;
   }
 }
 
-#vjt-tooltip[data-arrow^='r'] {
-  #vjt-arrow {
+[id$="-tooltip"][data-arrow^='r'] {
+  [id$="-arrow"] {
     left: math.div(-$vjt__tooltip_arrow_size, 2);
     top: 50%;
   }
 }
 
-#vjt-arrow {
+[id$="-arrow"] {
   width: $vjt__tooltip_arrow_size;
   height: $vjt__tooltip_arrow_size;
   position: absolute;
@@ -71,7 +92,8 @@
   }
 }
 
-.vjt-highlight {
+// Support multiple tour instances with dynamic highlight classes
+[class*="vjt-highlight-"] {
   outline: $vjt__highlight_outline;
   outline-offset: $vjt__highlight_offset;
   border-radius: $vjt__highlight_outline_radius;
@@ -102,4 +124,4 @@
       color: $vjt__action_button_color_hover;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/vuejs-tour.ts b/src/vuejs-tour.ts
index 533fff6..7759409 100644
--- a/src/vuejs-tour.ts
+++ b/src/vuejs-tour.ts
@@ -10,4 +10,7 @@ export type {
   VTourExposedMethods,
   ButtonLabels,
   SaveToLocalStorage,
-} from './Types';
+} from './Types.d';
+
+// Re-export NanoPopPosition from nanopop for user convenience
+export type { NanoPopPosition } from 'nanopop';
diff --git a/test/components/VTour.spec.ts b/test/components/VTour.spec.ts
index 6459ede..468b246 100644
--- a/test/components/VTour.spec.ts
+++ b/test/components/VTour.spec.ts
@@ -77,7 +77,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
   });
 
   describe('Basic Component Properties', () => {
-    it('should render with default props', () => {
+    it('should render with default props', async () => {
       wrapper = mount(VTour, {
         props: {
           steps: mockSteps,
@@ -85,8 +85,13 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       expect(wrapper.exists()).toBe(true);
-      expect(wrapper.find('#vjt-backdrop').exists()).toBe(true);
-      expect(wrapper.find('#vjt-tooltip').exists()).toBe(true);
+
+      //Wait for Teleport to render
+      await nextTick();
+
+      // Elements are rendered via Teleport to body, not in wrapper
+      expect(document.querySelector('#vjt-backdrop')).toBeTruthy();
+      expect(document.querySelector('#vjt-tooltip')).toBeTruthy();
     });
 
     it('should accept custom button labels', async () => {
@@ -110,12 +115,12 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       await new Promise((resolve) => setTimeout(resolve, 150));
       await nextTick();
 
-      // Check if custom labels appear
-      const tooltipContent = wrapper.find('#vjt-tooltip').text();
-      expect(tooltipContent).toContain('Cancel');
+      // Check if custom labels appear in Teleported element
+      const tooltipElement = document.querySelector('#vjt-tooltip');
+      expect(tooltipElement?.textContent).toContain('Cancel');
     });
 
-    it('should handle backdrop prop', () => {
+    it('should handle backdrop prop', async () => {
       wrapper = mount(VTour, {
         props: {
           steps: mockSteps,
@@ -125,7 +130,9 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
       // Check if backdrop prop is correctly set and element exists
       expect(wrapper.props('backdrop')).toBe(true);
-      expect(wrapper.find('#vjt-backdrop').exists()).toBe(true);
+
+      await nextTick();
+      expect(document.querySelector('#vjt-backdrop')).toBeTruthy();
     });
 
     it('should handle empty steps array gracefully', () => {
@@ -255,9 +262,9 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       wrapper.vm.stopTour();
       await nextTick();
 
-      // Check if backdrop is hidden
-      const backdrop = wrapper.find('#vjt-backdrop');
-      expect(backdrop.attributes('data-hidden')).toBeDefined();
+      // Check if backdrop is hidden via Teleported element
+      const backdrop = document.querySelector('#vjt-backdrop');
+      expect(backdrop?.getAttribute('data-hidden')).toBeTruthy();
     });
 
     it('should reset tour state correctly', () => {
@@ -377,7 +384,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       wrapper.vm.updateHighlight();
       await nextTick();
 
-      // Now it should be highlighted (this tests the actual component method)
+      // Now it should be highlighted
       expect(targetElement?.classList.contains('vjt-highlight')).toBe(true);
     });
 
@@ -436,8 +443,9 @@ describe('VTour Component - Comprehensive Test Suite', () => {
         attachTo: document.getElementById('app')!,
       });
 
-      const backdrop = wrapper.find('#vjt-backdrop');
-      expect(backdrop.exists()).toBe(true);
+      await nextTick();
+      const backdrop = document.querySelector('#vjt-backdrop');
+      expect(backdrop).toBeTruthy();
 
       // Trigger backdrop update
       wrapper.vm.currentStepIndex = 0;
@@ -446,8 +454,8 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       wrapper.vm.updateBackdrop();
       await nextTick();
 
-      // Backdrop should be visible (not have data-hidden attribute)
-      expect(backdrop.attributes('data-hidden')).toBeUndefined();
+      // Backdrop should be visible (data-hidden should be "false")
+      expect(backdrop?.getAttribute('data-hidden')).not.toBe('true');
     });
 
     it('should show backdrop for individual step when step.backdrop is true', async () => {
@@ -473,8 +481,8 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       wrapper.vm.updateBackdrop();
       await nextTick();
 
-      const backdrop = wrapper.find('#vjt-backdrop');
-      expect(backdrop.attributes('data-hidden')).toBeUndefined();
+      const backdrop = document.querySelector('#vjt-backdrop');
+      expect(backdrop?.getAttribute('data-hidden')).not.toBe('true');
     });
 
     it('should hide backdrop when both global and step backdrop are false', async () => {
@@ -500,8 +508,8 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       wrapper.vm.updateBackdrop();
       await nextTick();
 
-      const backdrop = wrapper.find('#vjt-backdrop');
-      expect(backdrop.attributes('data-hidden')).toBeDefined();
+      const backdrop = document.querySelector('#vjt-backdrop');
+      expect(backdrop?.getAttribute('data-hidden')).toBe('true');
     });
   });
 
@@ -739,4 +747,401 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       }
     });
   });
+
+  describe('Multi-Instance Support', () => {
+    it('should use default IDs when name prop is empty', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+        },
+      });
+
+      await nextTick();
+
+      // Backward compatible IDs (no name in ID)
+      expect(document.querySelector('#vjt-tooltip')).toBeTruthy();
+      expect(document.querySelector('#vjt-backdrop')).toBeTruthy();
+    });
+
+    it('should use scoped IDs when name prop is provided', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+          name: 'my-tour',
+        },
+      });
+
+      await nextTick();
+
+      // Scoped IDs with name
+      expect(document.querySelector('#vjt-my-tour-tooltip')).toBeTruthy();
+      expect(document.querySelector('#vjt-my-tour-backdrop')).toBeTruthy();
+    });
+
+    it('should use scoped highlight class when name prop is provided', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+          name: 'custom-tour',
+          highlight: true,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      const targetElement = document.querySelector('#step1');
+
+      wrapper.vm.updateHighlight();
+      await nextTick();
+
+      // Should use scoped highlight class
+      expect(
+        targetElement?.classList.contains('vjt-highlight-custom-tour')
+      ).toBe(true);
+      expect(targetElement?.classList.contains('vjt-highlight')).toBe(false);
+    });
+  });
+
+  describe('New Features - Transitioning and Positioning', () => {
+    it('should set isTransitioning during step changes', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      const initialStep = wrapper.vm.currentStepIndex;
+
+      // Navigate to next step
+      await wrapper.vm.nextStep();
+      await waitForAsync();
+
+      // Should have moved to next step successfully
+      expect(wrapper.vm.currentStepIndex).toBe(initialStep + 1);
+    });
+
+    it('should recreate content when navigating between steps', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Verify first step content
+      expect(wrapper.vm.currentStepIndex).toBe(0);
+
+      // Navigate to next step
+      await wrapper.vm.nextStep();
+      await waitForAsync();
+
+      // Verify navigation worked (content was recreated with new key)
+      expect(wrapper.vm.currentStepIndex).toBe(1);
+    });
+
+    it('should wait for nextTick before positioning on start', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      // Start tour - this internally waits for nextTick before positioning
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Tour should have started successfully
+      expect(wrapper.vm.currentStepIndex).toBe(0);
+      // Tooltip should be rendered in DOM
+      expect(document.querySelector('#vjt-tooltip')).toBeTruthy();
+    });
+
+    it('should reset nanopop instance when stopping tour', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Tour should be started
+      const tooltip = document.querySelector('#vjt-tooltip');
+      expect(tooltip).toBeTruthy();
+
+      wrapper.vm.stopTour();
+      await nextTick();
+
+      // Verify tour stopped (tourVisible = false)
+      expect(wrapper.vm.tourVisible).toBe(false);
+      expect(wrapper.vm.backdropVisible).toBe(false);
+    });
+  });
+
+  describe('Integration Tests - Real Positioning & Rendering', () => {
+    it('should render tooltip in DOM for real target element', async () => {
+      // Create a real target element with actual position
+      const targetDiv = document.createElement('div');
+      targetDiv.id = 'real-target';
+      targetDiv.style.position = 'absolute';
+      targetDiv.style.top = '100px';
+      targetDiv.style.left = '200px';
+      targetDiv.style.width = '50px';
+      targetDiv.style.height = '50px';
+      document.body.appendChild(targetDiv);
+
+      wrapper = mount(VTour, {
+        props: {
+          steps: [
+            {
+              target: '#real-target',
+              content: 'Test content',
+              placement: 'right',
+            },
+          ],
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Tour should be started and tooltip should exist in DOM
+      const tooltip = document.querySelector('#vjt-tooltip') as HTMLElement;
+      expect(tooltip).toBeTruthy();
+
+      // Tooltip element should be Teleported to body
+      expect(
+        tooltip.parentElement?.classList.contains('vjt-modal-overlay')
+      ).toBe(true);
+
+      // Clean up
+      document.body.removeChild(targetDiv);
+    });
+
+    it('should apply and remove highlight class when tour starts and stops', async () => {
+      const targetDiv = document.createElement('div');
+      targetDiv.id = 'highlight-target';
+      targetDiv.className = 'my-element';
+      document.body.appendChild(targetDiv);
+
+      wrapper = mount(VTour, {
+        props: {
+          steps: [
+            {
+              target: '#highlight-target',
+              content: 'Test content',
+            },
+          ],
+          highlight: true,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      // Before starting, no highlight
+      expect(targetDiv.classList.contains('vjt-highlight')).toBe(false);
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // After stopping, highlight should be removed
+      wrapper.vm.stopTour();
+      await nextTick();
+      expect(targetDiv.classList.contains('vjt-highlight')).toBe(false);
+
+      document.body.removeChild(targetDiv);
+    });
+
+    it('should show backdrop element when backdrop is enabled', async () => {
+      const targetDiv = document.createElement('div');
+      targetDiv.id = 'backdrop-target';
+      targetDiv.style.position = 'absolute';
+      targetDiv.style.top = '100px';
+      targetDiv.style.left = '100px';
+      targetDiv.style.width = '100px';
+      targetDiv.style.height = '100px';
+      document.body.appendChild(targetDiv);
+
+      wrapper = mount(VTour, {
+        props: {
+          steps: [
+            {
+              target: '#backdrop-target',
+              content: 'Test content',
+              backdrop: true,
+            },
+          ],
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Backdrop element should exist in DOM
+      const backdrop = document.querySelector('#vjt-backdrop') as HTMLElement;
+      expect(backdrop).toBeTruthy();
+
+      // Backdrop should be rendered in modal overlay
+      expect(
+        backdrop.parentElement?.classList.contains('vjt-modal-overlay')
+      ).toBe(true);
+
+      document.body.removeChild(targetDiv);
+    });
+
+    it('should teleport to body and not be in component wrapper', async () => {
+      wrapper = mount(VTour, {
+        props: {
+          steps: mockSteps,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Tooltip should NOT be in wrapper
+      expect(wrapper.find('#vjt-tooltip').exists()).toBe(false);
+
+      // Tooltip SHOULD be in document body
+      const tooltip = document.querySelector('#vjt-tooltip');
+      expect(tooltip).toBeTruthy();
+      expect(
+        tooltip?.parentElement?.classList.contains('vjt-modal-overlay')
+      ).toBe(true);
+    });
+
+    it('should navigate between multiple steps successfully', async () => {
+      const target1 = document.createElement('div');
+      target1.id = 'target-1';
+      document.body.appendChild(target1);
+
+      const target2 = document.createElement('div');
+      target2.id = 'target-2';
+      document.body.appendChild(target2);
+
+      wrapper = mount(VTour, {
+        props: {
+          steps: [
+            {
+              target: '#target-1',
+              content: 'Step 1',
+              placement: 'top',
+            },
+            {
+              target: '#target-2',
+              content: 'Step 2',
+              placement: 'bottom',
+            },
+          ],
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Should be on first step
+      expect(wrapper.vm.currentStepIndex).toBe(0);
+
+      // Navigate to second step
+      await wrapper.vm.nextStep();
+      await waitForAsync();
+
+      // Should be on second step
+      expect(wrapper.vm.currentStepIndex).toBe(1);
+
+      document.body.removeChild(target1);
+      document.body.removeChild(target2);
+    });
+
+    it('should maintain tour state after scroll and resize events', async () => {
+      const targetDiv = document.createElement('div');
+      targetDiv.id = 'scroll-target';
+      targetDiv.style.position = 'absolute';
+      targetDiv.style.top = '500px';
+      document.body.appendChild(targetDiv);
+
+      wrapper = mount(VTour, {
+        props: {
+          steps: [
+            {
+              target: '#scroll-target',
+              content: 'Test content',
+            },
+          ],
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      const tooltip = document.querySelector('#vjt-tooltip') as HTMLElement;
+      expect(tooltip).toBeTruthy();
+
+      // Trigger scroll event
+      window.dispatchEvent(new Event('scroll'));
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Tooltip should still exist in DOM
+      const tooltipAfterScroll = document.querySelector('#vjt-tooltip');
+      expect(tooltipAfterScroll).toBeTruthy();
+
+      // Trigger resize event
+      window.dispatchEvent(new Event('resize'));
+      await new Promise((resolve) => setTimeout(resolve, 300)); // Wait for debounce
+
+      // Tooltip should still exist in DOM after resize
+      const tooltipAfterResize = document.querySelector('#vjt-tooltip');
+      expect(tooltipAfterResize).toBeTruthy();
+
+      document.body.removeChild(targetDiv);
+    });
+
+    it('should cleanup highlight when component unmounts', async () => {
+      const targetDiv = document.createElement('div');
+      targetDiv.id = 'cleanup-target';
+      document.body.appendChild(targetDiv);
+
+      wrapper = mount(VTour, {
+        props: {
+          steps: [
+            {
+              target: '#cleanup-target',
+              content: 'Test content',
+            },
+          ],
+          highlight: true,
+        },
+        attachTo: document.getElementById('app')!,
+      });
+
+      await wrapper.vm.startTour();
+      await waitForAsync();
+
+      // Verify tour is active
+      const tooltip = document.querySelector('#vjt-tooltip');
+      expect(tooltip).toBeTruthy();
+
+      // Unmount component
+      wrapper.unmount();
+      await nextTick();
+
+      // Verify cleanup: highlight should be removed
+      expect(targetDiv.classList.contains('vjt-highlight')).toBe(false);
+
+      document.body.removeChild(targetDiv);
+    });
+  });
 });
diff --git a/vite.config.ts b/vite.config.ts
index f6ec99c..bdef89a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,6 +24,13 @@ export default defineConfig({
           nanopop: 'nanopop',
           'jump.js': 'jump',
         },
+        // Rename component CSS to avoid conflict with SCSS output
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith('.css')) {
+            return 'component-styles.css';
+          }
+          return '[name].[ext]';
+        },
       },
     },
     minify: 'esbuild',
@@ -38,7 +45,7 @@ export default defineConfig({
     }) as Plugin,
   ],
   server: {
-    open: true,
+    open: false, // Don't auto-open browser
     port: 3000,
   },
   preview: {

From af1f30adb8f993ed9cb2cb9cfa7479b1daa60e59 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Mon, 3 Nov 2025 22:14:23 -0600
Subject: [PATCH 02/13] Fix conflicts

---
 package-lock.json | 122 ++++++++++++++++------------------------------
 package.json      |   2 +-
 src/vuejs-tour.ts |   2 +-
 3 files changed, 44 insertions(+), 82 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8664294..87d0e73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -206,6 +206,7 @@
       "integrity": "sha512-nlr/MMgoLNUHcfWC5Ns2ENrzKx9x51orPc6wJ8Ignv1DsrUmKm0LUih+Tj3J+kxYofzqQIQRU495d4xn3ozMbg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@algolia/client-common": "5.40.0",
         "@algolia/requester-browser-xhr": "5.40.0",
@@ -521,6 +522,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -567,6 +569,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1070,7 +1073,6 @@
       "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
       },
@@ -1090,7 +1092,6 @@
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -1104,7 +1105,6 @@
       "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -1115,7 +1115,6 @@
       "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/object-schema": "^2.1.6",
         "debug": "^4.3.1",
@@ -1131,7 +1130,6 @@
       "integrity": "sha512-WUFvV4WoIwW8Bv0KeKCIIEgdSiFOsulyN0xrMu+7z43q/hkOLXjvb5u7UC9jDxvRzcrbEmuZBX5yJZz1741jog==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.16.0"
       },
@@ -1145,7 +1143,6 @@
       "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.15"
       },
@@ -1159,7 +1156,6 @@
       "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -1184,7 +1180,6 @@
       "integrity": "sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -1198,7 +1193,6 @@
       "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -1209,7 +1203,6 @@
       "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.16.0",
         "levn": "^0.4.1"
@@ -1224,7 +1217,6 @@
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18.0"
       }
@@ -1235,7 +1227,6 @@
       "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.4.0"
@@ -1250,7 +1241,6 @@
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -1265,7 +1255,6 @@
       "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -2257,6 +2246,7 @@
       "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "json-schema-traverse": "^1.0.0",
@@ -2667,8 +2657,7 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/jump.js": {
       "version": "1.0.6",
@@ -2718,6 +2707,7 @@
       "integrity": "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.14.0"
       }
@@ -2907,6 +2897,7 @@
       "integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/utils": "3.2.4",
         "fflate": "^0.8.2",
@@ -3013,6 +3004,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
       "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.4",
         "@vue/compiler-core": "3.5.22",
@@ -3356,6 +3348,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3369,7 +3362,6 @@
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -3390,7 +3382,6 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3450,6 +3441,7 @@
       "integrity": "sha512-a9aIL2E3Z7uYUPMCmjMFFd5MWhn+ccTubEvnMy7rOTZCB62dXBJtz0R5BZ/TPuX3R9ocBsgWuAbGWQ+Ph4Fmlg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@algolia/abtesting": "1.6.0",
         "@algolia/client-abtesting": "5.40.0",
@@ -3508,8 +3500,7 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true,
-      "license": "Python-2.0",
-      "peer": true
+      "license": "Python-2.0"
     },
     "node_modules/aria-query": {
       "version": "5.3.0",
@@ -3616,7 +3607,6 @@
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3702,7 +3692,6 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3853,8 +3842,7 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/confbox": {
       "version": "0.2.2",
@@ -4051,8 +4039,7 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/define-data-property": {
       "version": "1.1.4",
@@ -4338,7 +4325,6 @@
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -4414,6 +4400,7 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -4461,7 +4448,6 @@
       "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -4479,7 +4465,6 @@
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -4493,7 +4478,6 @@
       "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
@@ -4512,7 +4496,6 @@
       "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -4526,7 +4509,6 @@
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -4540,7 +4522,6 @@
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -4561,7 +4542,6 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4602,16 +4582,14 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-uri": {
       "version": "3.1.0",
@@ -4643,7 +4621,6 @@
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flat-cache": "^4.0.0"
       },
@@ -4671,7 +4648,6 @@
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -4689,7 +4665,6 @@
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.4"
@@ -4711,6 +4686,7 @@
       "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tabbable": "^6.2.0"
       }
@@ -4864,7 +4840,6 @@
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -4904,7 +4879,6 @@
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -4933,9 +4907,9 @@
       "license": "ISC"
     },
     "node_modules/happy-dom": {
-      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.0.0.tgz",
-      "integrity": "sha512-GkWnwIFxVGCf2raNrxImLo397RdGhLapj5cT3R2PT7FwL62Ze1DROhzmYW7+J3p9105DYMVenEejEbnq5wA37w==",
+      "version": "20.0.10",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.0.10.tgz",
+      "integrity": "sha512-6umCCHcjQrhP5oXhrHQQvLB0bwb1UzHAHdsXy+FjtKoYjUhmNZsQL8NivwM1vDvNEChJabVrUYxUnp/ZdYmy2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5175,7 +5149,6 @@
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -5193,7 +5166,6 @@
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -5221,7 +5193,6 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -5715,7 +5686,6 @@
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -5778,24 +5748,21 @@
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/jsonfile": {
       "version": "6.2.0",
@@ -5822,7 +5789,6 @@
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -5840,7 +5806,6 @@
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -5873,7 +5838,6 @@
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -5896,8 +5860,7 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/loupe": {
       "version": "3.2.1",
@@ -6134,7 +6097,6 @@
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -6251,8 +6213,7 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
@@ -6357,7 +6318,6 @@
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -6376,7 +6336,6 @@
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -6393,7 +6352,6 @@
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -6417,7 +6375,6 @@
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -6451,7 +6408,6 @@
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -6582,6 +6538,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -6608,7 +6565,6 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -6619,6 +6575,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -6835,7 +6792,6 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -6853,6 +6809,7 @@
       "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -6927,6 +6884,7 @@
       "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -7569,6 +7527,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7693,7 +7652,6 @@
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -7707,6 +7665,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7853,11 +7812,12 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
-      "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
+      "version": "7.1.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
+      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -8001,6 +7961,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8495,11 +8456,12 @@
       }
     },
     "node_modules/vitepress/node_modules/vite": {
-      "version": "5.4.20",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.20.tgz",
-      "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -8560,6 +8522,7 @@
       "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/chai": "^5.2.2",
         "@vitest/expect": "3.2.4",
@@ -8652,6 +8615,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
       "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.22",
         "@vue/compiler-sfc": "3.5.22",
@@ -8896,7 +8860,6 @@
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9038,7 +9001,6 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
diff --git a/package.json b/package.json
index 79c9a72..332d18a 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "dev": "vite",
     "preview": "vite preview",
     "build": "npm run build-only && npm run build::sass && npm pack",
-    "build-only": "vite build && mv dist/vuejs-tour.css dist/style.css",
+    "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "build::sass": "sass src/style/style.scss dist/style.css",
     "docs:dev": "vitepress dev docs",
diff --git a/src/vuejs-tour.ts b/src/vuejs-tour.ts
index 7759409..30994ce 100644
--- a/src/vuejs-tour.ts
+++ b/src/vuejs-tour.ts
@@ -10,7 +10,7 @@ export type {
   VTourExposedMethods,
   ButtonLabels,
   SaveToLocalStorage,
-} from './Types.d';
+} from './Types';
 
 // Re-export NanoPopPosition from nanopop for user convenience
 export type { NanoPopPosition } from 'nanopop';

From a5d1eb16791ec5dabd700b71cff6d3a7443385ed Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Mon, 3 Nov 2025 22:17:29 -0600
Subject: [PATCH 03/13] Cleanup timeouts

---
 src/components/VTour.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index 4894d2e..ce52ac6 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -95,7 +95,7 @@ const startTour = async (): Promise<void> => {
     currentStepIndex.value = 0;
   }
 
-  setTimeout(async () => {
+  startDelayTimer = setTimeout(async () => {
     await beforeStep(currentStepIndex.value);
 
     const currentStepData = getCurrentStep.value;
@@ -115,7 +115,9 @@ const startTour = async (): Promise<void> => {
     }
 
     // Wait for Teleport to render DOM elements, then cache references
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise((resolve) => {
+      teleportDelayTimer = setTimeout(resolve, 100);
+    });
 
     if (!_Tooltip.value) {
       _Tooltip.value = document.querySelector(
@@ -160,6 +162,10 @@ const startTour = async (): Promise<void> => {
 };
 
 const stopTour = (): void => {
+  // Clear any pending timeouts
+  clearTimeout(startDelayTimer);
+  clearTimeout(teleportDelayTimer);
+
   // Hide tour and backdrop immediately
   // Both must be set to prevent CSS visibility conflicts with fixed-position elements
   tourVisible.value = false;
@@ -381,6 +387,8 @@ const redrawLayers = (): void => {
 
 // Resize handling with debounce
 let resizeTimer: ReturnType<typeof setTimeout> | undefined;
+let startDelayTimer: ReturnType<typeof setTimeout> | undefined;
+let teleportDelayTimer: ReturnType<typeof setTimeout> | undefined;
 
 const onResizeEnd = (): void => {
   if (localStorage.getItem(saveKey.value) === 'true') return;
@@ -444,7 +452,11 @@ onUnmounted(() => {
   // Clean up event listeners
   window.removeEventListener('resize', onResizeEnd);
   window.removeEventListener('scroll', onScroll, true);
+
+  // Clear all timers
   clearTimeout(resizeTimer);
+  clearTimeout(startDelayTimer);
+  clearTimeout(teleportDelayTimer);
 
   // Ensure tour is stopped and cleaned up when component unmounts
   if (tourVisible.value) {

From 2cbbe10c611057d831e0e5cd22fa03f9a5569599 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Mon, 3 Nov 2025 22:24:49 -0600
Subject: [PATCH 04/13] Remove unecessary timeout

---
 src/components/VTour.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index ce52ac6..a1b7f35 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -321,11 +321,7 @@ const updatePosition = async (): Promise<void> => {
       jump(targetElement, {
         duration: 500,
         offset: -100,
-        callback: () => {
-          setTimeout(() => {
-            resolve();
-          }, 50);
-        },
+        callback: () => resolve(),
       });
     });
   }

From 27a9ab493d9a25c45307714fd8a02d48afc7b014 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Mon, 3 Nov 2025 22:27:47 -0600
Subject: [PATCH 05/13] Readability changes

---
 src/components/VTour.vue | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index a1b7f35..0d027cb 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -80,8 +80,18 @@ const highlightClass = computed(() =>
 const _Tooltip = ref<HTMLElement>();
 const _Backdrop = ref<HTMLElement>();
 
+// Constants for timing and positioning
+const TELEPORT_RENDER_DELAY = 100; // ms to wait for Vue Teleport to render DOM elements
+const SCROLL_DURATION = 500; // ms for smooth scroll animation
+const SCROLL_OFFSET = -100; // px offset from top when scrolling to element
+
+// Helper to check if tour was completed and saved to localStorage
+const isTourCompleted = (): boolean => {
+  return localStorage.getItem(saveKey.value) === 'true';
+};
+
 const startTour = async (): Promise<void> => {
-  if (localStorage.getItem(saveKey.value) === 'true') return;
+  if (isTourCompleted()) return;
 
   if (props.saveToLocalStorage === 'step') {
     const savedStep = localStorage.getItem(saveKey.value);
@@ -116,7 +126,7 @@ const startTour = async (): Promise<void> => {
 
     // Wait for Teleport to render DOM elements, then cache references
     await new Promise((resolve) => {
-      teleportDelayTimer = setTimeout(resolve, 100);
+      teleportDelayTimer = setTimeout(resolve, TELEPORT_RENDER_DELAY);
     });
 
     if (!_Tooltip.value) {
@@ -144,11 +154,13 @@ const startTour = async (): Promise<void> => {
     await nextTick();
 
     if (!vTour.value) {
+      // Calculate margin: use prop margin, or increase to 14px if highlighting is enabled
+      const shouldHighlight = props.highlight || currentStepData.highlight;
+      const calculatedMargin = props.margin || (shouldHighlight ? 14 : 8);
+
       vTour.value = createPopper(targetElement, _Tooltip.value, {
         position: currentStepData.placement || props.defaultPlacement,
-        margin:
-          props.margin ||
-          (props.highlight || currentStepData.highlight ? 14 : 8),
+        margin: calculatedMargin,
       });
     }
 
@@ -319,8 +331,8 @@ const updatePosition = async (): Promise<void> => {
   if (!props.noScroll && !currentStepData.noScroll) {
     await new Promise<void>((resolve) => {
       jump(targetElement, {
-        duration: 500,
-        offset: -100,
+        duration: SCROLL_DURATION,
+        offset: SCROLL_OFFSET,
         callback: () => resolve(),
       });
     });
@@ -347,9 +359,9 @@ const updateHighlight = (): void => {
     .forEach((element) => element.classList.remove(highlightClass.value));
 
   const currentStepData = getCurrentStep.value;
-  if (!props.highlight && !currentStepData?.highlight) return;
 
-  if (!currentStepData) {
+  // Check if highlighting is disabled or no step data
+  if (!currentStepData || (!props.highlight && !currentStepData.highlight)) {
     return;
   }
 
@@ -375,7 +387,7 @@ const updateBackdrop = (): void => {
 
 // Redraw layers for resize/scroll events - updates position without scrolling or events
 const redrawLayers = (): void => {
-  if (localStorage.getItem(saveKey.value) === 'true') return;
+  if (isTourCompleted()) return;
   if (!tourVisible.value) return; // Only redraw if tour is active
 
   updateTooltipPosition();
@@ -387,7 +399,7 @@ let startDelayTimer: ReturnType<typeof setTimeout> | undefined;
 let teleportDelayTimer: ReturnType<typeof setTimeout> | undefined;
 
 const onResizeEnd = (): void => {
-  if (localStorage.getItem(saveKey.value) === 'true') return;
+  if (isTourCompleted()) return;
 
   clearTimeout(resizeTimer);
   redrawLayers();
@@ -425,7 +437,7 @@ getClipPath.value = '';
 
 // Scroll handling to update position during scroll
 const onScroll = (): void => {
-  if (localStorage.getItem(saveKey.value) === 'true') return;
+  if (isTourCompleted()) return;
   if (!tourVisible.value) return; // Only update if tour is active
 
   redrawLayers();

From 0b2dd11a72f4ffe5b25f864747035681167737ef Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Tue, 4 Nov 2025 08:51:12 -0600
Subject: [PATCH 06/13] Add jump options interface and implement customizable
 scroll behavior in VTour component

---
 docs/guide/jump-options.md                | 169 +++++++++++++++++++++
 src/Types.ts                              |  32 ++++
 src/components/VTour.vue                  |  23 ++-
 src/vuejs-tour.ts                         |   1 +
 test/components/VTour.jumpOptions.spec.ts | 177 ++++++++++++++++++++++
 5 files changed, 396 insertions(+), 6 deletions(-)
 create mode 100644 docs/guide/jump-options.md
 create mode 100644 test/components/VTour.jumpOptions.spec.ts

diff --git a/docs/guide/jump-options.md b/docs/guide/jump-options.md
new file mode 100644
index 0000000..fd43e66
--- /dev/null
+++ b/docs/guide/jump-options.md
@@ -0,0 +1,169 @@
+# Jump Options
+
+VueJS Tour now supports customizable scroll animation options via the [jump.js](https://github.com/callmecavs/jump.js) library.
+
+## Available Options
+
+```typescript
+interface JumpOptions {
+  /** Duration of scroll animation in milliseconds (default: 500) */
+  duration?: number;
+
+  /** Vertical offset in pixels from target element (default: -100) */
+  offset?: number;
+
+  /** Callback function to execute after scroll completes */
+  callback?: () => void;
+
+  /** Easing function name or custom function (default: 'easeInOutQuad') */
+  easing?: (t: number, b: number, c: number, d: number) => number | string;
+
+  /** Whether to focus the element for accessibility (default: false) */
+  a11y?: boolean;
+}
+```
+
+## Global Configuration
+
+Set default jump options for all steps in the tour:
+
+```vue
+<template>
+  <VTour
+    :steps="steps"
+    :jump-options="{
+      duration: 1000,
+      offset: -50,
+      easing: 'easeInOutQuad',
+      a11y: true,
+    }"
+  />
+</template>
+```
+
+## Per-Step Configuration
+
+Override global options for specific steps:
+
+```typescript
+const steps = [
+  {
+    target: '#step1',
+    content: 'This step uses global jump options',
+  },
+  {
+    target: '#step2',
+    content: 'This step uses custom scroll duration',
+    jumpOptions: {
+      duration: 300, // Faster scroll
+      offset: -200, // More space at top
+    },
+  },
+];
+```
+
+## Custom Easing
+
+Provide a custom easing function:
+
+```vue
+<script setup lang="ts">
+import { VTour } from '@globalhive/vuejs-tour';
+
+const customEasing = (t: number, b: number, c: number, d: number) => {
+  // Linear easing
+  return (c * t) / d + b;
+};
+
+const jumpOptions = {
+  duration: 800,
+  easing: customEasing,
+};
+</script>
+
+<template>
+  <VTour :steps="steps" :jump-options="jumpOptions" />
+</template>
+```
+
+## Disabling Scroll
+
+You can disable scrolling globally or per-step using the existing `noScroll` prop:
+
+```vue
+<!-- Disable scrolling for entire tour -->
+<VTour :steps="steps" :no-scroll="true" />
+```
+
+```typescript
+// Disable scrolling for specific step
+const steps = [
+  {
+    target: '#step1',
+    content: 'This step will not scroll',
+    noScroll: true,
+  },
+];
+```
+
+## Priority
+
+When multiple jump option sources are provided, they are merged with the following priority:
+
+1. **Step-specific options** (highest priority)
+2. **Global prop options**
+3. **Default values** (lowest priority)
+
+Example:
+
+```typescript
+// Global defaults
+const globalJumpOptions = {
+  duration: 1000,
+  offset: -100,
+  a11y: true,
+};
+
+// Step overrides
+const steps = [
+  {
+    target: '#step1',
+    content: 'Step 1',
+    jumpOptions: {
+      duration: 300, // Only override duration
+      // offset: still -100 from global
+      // a11y: still true from global
+    },
+  },
+];
+```
+
+## Available Easing Functions
+
+jump.js supports the following built-in easing function names:
+
+- `'easeInQuad'`
+- `'easeOutQuad'`
+- `'easeInOutQuad'` (default)
+- `'easeInCubic'`
+- `'easeOutCubic'`
+- `'easeInOutCubic'`
+- `'easeInQuart'`
+- `'easeOutQuart'`
+- `'easeInOutQuart'`
+- `'easeInQuint'`
+- `'easeOutQuint'`
+- `'easeInOutQuint'`
+
+Or provide your own custom easing function following the signature:
+
+```typescript
+(t: number, b: number, c: number, d: number) => number;
+```
+
+Where:
+
+- `t` = current time
+- `b` = beginning value
+- `c` = change in value
+- `d` = duration
diff --git a/src/Types.ts b/src/Types.ts
index ab76557..f579ab9 100644
--- a/src/Types.ts
+++ b/src/Types.ts
@@ -1,5 +1,31 @@
 import type { NanoPopPosition } from 'nanopop';
 
+/**
+ * Scroll animation options for jump.js
+ * @see https://github.com/callmecavs/jump.js
+ */
+export interface JumpOptions {
+  /** Duration of scroll animation in milliseconds (default: 500) */
+  readonly duration?: number;
+
+  /** Vertical offset in pixels from target element (default: -100) */
+  readonly offset?: number;
+
+  /** Callback function to execute after scroll completes */
+  readonly callback?: () => void;
+
+  /** Easing function name (default: 'easeInOutQuad') */
+  readonly easing?: (
+    t: number,
+    b: number,
+    c: number,
+    d: number
+  ) => number | string;
+
+  /** Whether to focus the element for accessibility (default: false) */
+  readonly a11y?: boolean;
+}
+
 /**
  * Configuration for a single step in a tour
  */
@@ -27,6 +53,9 @@ export interface ITourStep {
 
   /** Whether to disable auto-scrolling for this step */
   readonly noScroll?: boolean;
+
+  /** Custom scroll animation options for this step (overrides global jumpOptions) */
+  readonly jumpOptions?: Partial<JumpOptions>;
 }
 
 /**
@@ -89,6 +118,9 @@ export interface VTourProps {
 
   /** Default tooltip placement when step doesn't specify one */
   readonly defaultPlacement?: NanoPopPosition;
+
+  /** Default scroll animation options (can be overridden per step) */
+  readonly jumpOptions?: Partial<JumpOptions>;
 }
 
 /**
diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index 0d027cb..4da4c28 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -82,8 +82,14 @@ const _Backdrop = ref<HTMLElement>();
 
 // Constants for timing and positioning
 const TELEPORT_RENDER_DELAY = 100; // ms to wait for Vue Teleport to render DOM elements
-const SCROLL_DURATION = 500; // ms for smooth scroll animation
-const SCROLL_OFFSET = -100; // px offset from top when scrolling to element
+
+// Default jump.js scroll options (can be overridden via props)
+const DEFAULT_JUMP_OPTIONS = {
+  duration: 500,
+  offset: -100,
+  easing: 'easeInOutQuad' as const,
+  a11y: false,
+};
 
 // Helper to check if tour was completed and saved to localStorage
 const isTourCompleted = (): boolean => {
@@ -330,11 +336,16 @@ const updatePosition = async (): Promise<void> => {
   // Scroll to target first if needed
   if (!props.noScroll && !currentStepData.noScroll) {
     await new Promise<void>((resolve) => {
-      jump(targetElement, {
-        duration: SCROLL_DURATION,
-        offset: SCROLL_OFFSET,
+      // Merge default options with global and step-specific options
+      // Priority: step options > global options > defaults
+      const scrollOptions = {
+        ...DEFAULT_JUMP_OPTIONS,
+        ...props.jumpOptions,
+        ...currentStepData.jumpOptions,
         callback: () => resolve(),
-      });
+      } as any; // jump.js has incomplete type definitions
+
+      jump(targetElement, scrollOptions);
     });
   }
 
diff --git a/src/vuejs-tour.ts b/src/vuejs-tour.ts
index 30994ce..bf846f5 100644
--- a/src/vuejs-tour.ts
+++ b/src/vuejs-tour.ts
@@ -10,6 +10,7 @@ export type {
   VTourExposedMethods,
   ButtonLabels,
   SaveToLocalStorage,
+  JumpOptions,
 } from './Types';
 
 // Re-export NanoPopPosition from nanopop for user convenience
diff --git a/test/components/VTour.jumpOptions.spec.ts b/test/components/VTour.jumpOptions.spec.ts
new file mode 100644
index 0000000..8cdeda0
--- /dev/null
+++ b/test/components/VTour.jumpOptions.spec.ts
@@ -0,0 +1,177 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VTour from '../../src/components/VTour.vue';
+import type { ITourStep } from '../../src/Types';
+import jump from 'jump.js';
+
+// Mock jump.js
+vi.mock('jump.js', () => ({
+  default: vi.fn((target, options) => {
+    // Immediately call the callback
+    if (options?.callback) {
+      options.callback();
+    }
+  }),
+}));
+
+describe('VTour Component - Jump Options', () => {
+  const steps: ITourStep[] = [
+    {
+      target: '#step1',
+      content: 'Step 1',
+    },
+    {
+      target: '#step2',
+      content: 'Step 2',
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    document.body.innerHTML = `
+      <div id="step1">Target 1</div>
+      <div id="step2">Target 2</div>
+    `;
+  });
+
+  it('should use default jump options when none provided', async () => {
+    const wrapper = mount(VTour, {
+      props: { steps },
+      attachTo: document.body,
+    });
+
+    const component = wrapper.vm as any;
+    await component.startTour();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    expect(jump).toHaveBeenCalled();
+    const callArgs = (jump as any).mock.calls[0][1];
+
+    // Should use default values
+    expect(callArgs.duration).toBe(500);
+    expect(callArgs.offset).toBe(-100);
+    expect(callArgs.easing).toBe('easeInOutQuad');
+    expect(callArgs.a11y).toBe(false);
+
+    wrapper.unmount();
+  });
+
+  it('should use global jump options from props', async () => {
+    const wrapper = mount(VTour, {
+      props: {
+        steps,
+        jumpOptions: {
+          duration: 1000,
+          offset: -200,
+          a11y: true,
+        },
+      },
+      attachTo: document.body,
+    });
+
+    const component = wrapper.vm as any;
+    await component.startTour();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    expect(jump).toHaveBeenCalled();
+    const callArgs = (jump as any).mock.calls[0][1];
+
+    // Should use global custom values
+    expect(callArgs.duration).toBe(1000);
+    expect(callArgs.offset).toBe(-200);
+    expect(callArgs.a11y).toBe(true);
+    expect(callArgs.easing).toBe('easeInOutQuad'); // Default still applies
+
+    wrapper.unmount();
+  });
+
+  it('should use step-specific jump options that override global options', async () => {
+    const stepsWithOptions: ITourStep[] = [
+      {
+        target: '#step1',
+        content: 'Step 1',
+        jumpOptions: {
+          duration: 300,
+          offset: -50,
+        },
+      },
+    ];
+
+    const wrapper = mount(VTour, {
+      props: {
+        steps: stepsWithOptions,
+        jumpOptions: {
+          duration: 1000,
+          offset: -200,
+          a11y: true,
+        },
+      },
+      attachTo: document.body,
+    });
+
+    const component = wrapper.vm as any;
+    await component.startTour();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    expect(jump).toHaveBeenCalled();
+    const callArgs = (jump as any).mock.calls[0][1];
+
+    // Step options should override global options
+    expect(callArgs.duration).toBe(300);
+    expect(callArgs.offset).toBe(-50);
+    expect(callArgs.a11y).toBe(true); // From global
+    expect(callArgs.easing).toBe('easeInOutQuad'); // From default
+
+    wrapper.unmount();
+  });
+
+  it('should not scroll when noScroll is enabled', async () => {
+    const wrapper = mount(VTour, {
+      props: {
+        steps,
+        noScroll: true,
+        jumpOptions: {
+          duration: 1000,
+        },
+      },
+      attachTo: document.body,
+    });
+
+    const component = wrapper.vm as any;
+    await component.startTour();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    // jump.js should not be called when noScroll is true
+    expect(jump).not.toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('should support custom easing function', async () => {
+    const customEasing = (t: number, b: number, c: number, d: number) => {
+      return (c * t) / d + b;
+    };
+
+    const wrapper = mount(VTour, {
+      props: {
+        steps,
+        jumpOptions: {
+          easing: customEasing,
+        },
+      },
+      attachTo: document.body,
+    });
+
+    const component = wrapper.vm as any;
+    await component.startTour();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    expect(jump).toHaveBeenCalled();
+    const callArgs = (jump as any).mock.calls[0][1];
+
+    // Should use custom easing function
+    expect(callArgs.easing).toBe(customEasing);
+
+    wrapper.unmount();
+  });
+});

From 28a7fd16667f3433199894e79817ccf922ea743a Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Tue, 4 Nov 2025 11:36:51 -0600
Subject: [PATCH 07/13] feat: Add comprehensive accessibility tests for VTour
 component

- Introduced a new test suite for the VTour component focusing on accessibility features.
- Verified ARIA attributes, live regions, button labels, and keyboard navigation.
- Implemented helper functions for mounting the VTour component with default props.
- Updated existing jump options tests to respect accessibility configurations.
- Refactored existing tests to utilize new helper functions for improved readability and maintainability.
- Added a transition stub to ensure immediate hook execution during tests.
- Enhanced timer management in tests to ensure accurate timing and transitions.
---
 docs/guide/accessibility.md                 | 297 +++++++++
 src/Types.ts                                |  15 +
 src/components/VTour.vue                    | 118 +++-
 src/style/style.scss                        |  13 +
 test/components/VTour.accessibility.spec.ts | 632 ++++++++++++++++++++
 test/components/VTour.jumpOptions.spec.ts   | 117 ++--
 test/components/VTour.spec.ts               | 205 +++----
 test/helpers/mountVTour.ts                  |  21 +
 test/helpers/timers.ts                      | 106 ++++
 test/setup/transition.ts                    |  42 ++
 vitest.config.ts                            |   2 +-
 11 files changed, 1388 insertions(+), 180 deletions(-)
 create mode 100644 docs/guide/accessibility.md
 create mode 100644 test/components/VTour.accessibility.spec.ts
 create mode 100644 test/helpers/mountVTour.ts
 create mode 100644 test/helpers/timers.ts
 create mode 100644 test/setup/transition.ts

diff --git a/docs/guide/accessibility.md b/docs/guide/accessibility.md
new file mode 100644
index 0000000..1fa8236
--- /dev/null
+++ b/docs/guide/accessibility.md
@@ -0,0 +1,297 @@
+# Accessibility Guide for VueJS Tour
+
+## Current State
+
+VueJS Tour now includes comprehensive WCAG 2.1 AA accessibility features, including keyboard navigation, ARIA attributes, focus management, and screen reader support.
+
+**⚠️ Note:** Accessibility features are **disabled by default** (as of v2.4.3) pending further testing and validation. Enable them by setting `enableA11y: true` on the component.
+
+## Implemented Accessibility Features
+
+### 1. **ARIA Attributes** ✅
+
+Implemented:
+
+- ✅ `aria-label` on tooltip (configurable via `ariaLabel` prop or per-step `ariaLabel`)
+- ✅ `aria-describedby` for step content
+- ✅ `aria-live="polite"` region for step announcements
+- ✅ `aria-modal="true"` when `enableA11y` is enabled
+- ✅ `role="dialog"` for proper semantic structure
+- ✅ Enhanced `aria-label` attributes on all buttons
+
+### 2. **Keyboard Navigation** ✅
+
+Implemented:
+
+- ✅ `Escape` key to close tour
+- ✅ `ArrowRight` or `Enter` to go to next step
+- ✅ `ArrowLeft` to go to previous step
+- ✅ Keyboard navigation can be disabled via `keyboardNav: false`
+- ⚠️ Focus trap not yet implemented (planned for future release)
+
+### 3. **Focus Management** ✅
+
+Implemented:
+
+- ✅ Tooltip receives focus when opened (when `enableA11y` is true)
+- ✅ Previous focus restored when tour ends
+- ✅ `tabindex="0"` on tooltip for keyboard accessibility
+
+### 4. **Screen Reader Support** ✅
+
+Implemented:
+
+- ✅ Step progress announced ("Step 2 of 5")
+- ✅ Descriptive button labels with step context
+- ✅ Content changes announced via aria-live region
+- ✅ Screen reader only content via `.vjt-sr-only` CSS class
+
+### 5. **Semantic Structure** ✅
+
+Implemented:
+
+- ✅ `role="dialog"` on tooltip (changed from `role="tooltip"` for better modal semantics)
+- ✅ Step counter announced to screen readers
+- ✅ Proper ARIA attributes on all interactive elements
+
+## Usage
+
+### Enabling Accessibility Features
+
+Accessibility features are disabled by default. To enable them:
+
+```vue
+<VTour
+  :steps="steps"
+  :enableA11y="true"
+  :keyboardNav="true"
+  ariaLabel="Product tour"
+/>
+```
+
+### Available Props
+
+```typescript
+interface VTourProps {
+  // ... other props
+
+  /** Enable accessibility features (default: false) */
+  readonly enableA11y?: boolean;
+
+  /** Enable keyboard navigation (default: true, only active when enableA11y is true) */
+  readonly keyboardNav?: boolean;
+
+  /** Custom aria-label for the tour (default: "Guided tour") */
+  readonly ariaLabel?: string;
+}
+
+interface ITourStep {
+  // ... other props
+
+  /** Descriptive label for screen readers */
+  readonly ariaLabel?: string;
+}
+```
+
+### Example: Per-Step Accessibility Labels
+
+```vue
+<script setup>
+const steps = [
+  {
+    target: '#welcome',
+    content: 'Welcome to our app!',
+    ariaLabel: 'Welcome step: Introduction to the application',
+  },
+  {
+    target: '#profile',
+    content: 'View your profile here',
+    ariaLabel: 'Profile step: Learn about your user profile',
+  },
+];
+</script>
+
+<template>
+  <VTour :steps="steps" :enableA11y="true" />
+</template>
+```
+
+## Implementation Details
+
+### Features Already Implemented ✅
+
+1. **ARIA Live Region** - Announces step changes to screen readers
+
+   ```vue
+   <div
+     v-if="enableA11y"
+     role="status"
+     aria-live="polite"
+     aria-atomic="true"
+     class="vjt-sr-only"
+   >
+     Step {{ currentStepIndex + 1 }} of {{ props.steps.length }}
+   </div>
+   ```
+
+2. **Enhanced Tooltip Semantics** - Proper dialog role and ARIA attributes
+
+   ```vue
+   <div
+     :id="tooltipId"
+     role="dialog"
+     :aria-modal="enableA11y ? 'true' : undefined"
+     :aria-label="getCurrentStep?.ariaLabel || ariaLabel"
+     :aria-describedby="`${tooltipId}-content`"
+     :tabindex="enableA11y ? '0' : undefined"
+   />
+   ```
+
+3. **Keyboard Navigation** - Arrow keys, Enter, and Escape support
+
+   ```typescript
+   const onKeydown = (event: KeyboardEvent): void => {
+     if (!tourVisible.value || !props.enableA11y || !props.keyboardNav) return;
+
+     switch (event.key) {
+       case 'Escape':
+         endTour();
+         event.preventDefault();
+         break;
+       case 'ArrowRight':
+       case 'Enter':
+         nextStep();
+         event.preventDefault();
+         break;
+       case 'ArrowLeft':
+         if (currentStepIndex.value > 0) {
+           lastStep();
+           event.preventDefault();
+         }
+         break;
+     }
+   };
+   ```
+
+4. **Focus Management** - Stores and restores focus
+
+   ```typescript
+   let previousFocus: HTMLElement | null = null;
+
+   const startTour = async () => {
+     if (props.enableA11y && typeof document !== 'undefined') {
+       previousFocus = document.activeElement as HTMLElement;
+     }
+     // ... tour starts
+     if (props.enableA11y) {
+       await nextTick();
+       _Tooltip.value?.focus();
+     }
+   };
+
+   const stopTour = () => {
+     if (props.enableA11y && previousFocus) {
+       previousFocus.focus();
+       previousFocus = null;
+     }
+   };
+   ```
+
+5. **Enhanced Button Labels** - Descriptive aria-labels for all actions
+
+   ```vue
+   <button
+     type="button"
+     @click.prevent="nextStep"
+     :aria-label="
+       enableA11y
+         ? isLastStep
+           ? 'Finish tour'
+           : `Go to next step, step ${nextStepIndex + 1} of ${props.steps.length}`
+         : undefined
+     "
+   >
+     {{ getNextLabel }}
+   </button>
+   ```
+
+### Future Enhancements ⚠️
+
+These features are planned for future releases:
+
+1. **Focus Trap** - Trap focus within modal when backdrop is active
+2. **Customizable Keyboard Shortcuts** - Allow users to configure key bindings
+3. **Visual Progress Indicators** - Show step progress visually
+4. **Skip to Content** - Quick navigation option
+
+## Backward Compatibility
+
+All accessibility features:
+
+- ⚠️ Default to **disabled** (`enableA11y: false`) as of v2.4.3 pending further testing
+- Are opt-in via `enableA11y: true` prop
+- Do not break existing implementations when disabled
+- Add ~3KB to bundle size (minimal impact)
+
+## Testing Requirements
+
+1. **Keyboard-only navigation**
+   - Can navigate all steps without mouse
+   - Can dismiss tour with Escape
+   - Focus visible at all times
+
+2. **Screen reader testing**
+   - NVDA (Windows)
+   - JAWS (Windows)
+   - VoiceOver (macOS/iOS)
+   - TalkBack (Android)
+
+3. **Automated testing**
+   - axe-core integration
+   - ARIA validity checks
+   - Keyboard interaction tests
+
+## Resources
+
+- [WAI-ARIA Authoring Practices Guide - Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [focus-trap library](https://github.com/focus-trap/focus-trap)
+- [Vue A11y Best Practices](https://vue-a11y.com/)
+
+## Testing Status
+
+**Implemented (v2.4.3):** ✅
+
+- ✅ Keyboard navigation tests (28 test cases)
+- ✅ ARIA attributes validation
+- ✅ Focus management tests
+- ✅ Screen reader announcement tests
+
+**Pending:**
+
+1. **Manual testing with screen readers**
+   - NVDA (Windows)
+   - JAWS (Windows)
+   - VoiceOver (macOS/iOS)
+   - TalkBack (Android)
+
+2. **Real-world validation**
+   - User testing with keyboard-only users
+   - Screen reader user feedback
+   - Production environment testing
+
+3. **Automated accessibility testing**
+   - axe-core integration
+   - Lighthouse accessibility audits
+   - pa11y or similar tools
+
+## Status
+
+✅ **Phase 1 (Critical) features implemented** - All essential WCAG AA compliance features are in place and tested. Features are disabled by default pending further validation.
+
+**Next steps:**
+
+1. Community testing and feedback
+2. Screen reader validation
+3. Enable by default once vetted
+4. Implement Phase 2 features (focus trap, custom shortcuts)
diff --git a/src/Types.ts b/src/Types.ts
index f579ab9..e2f1242 100644
--- a/src/Types.ts
+++ b/src/Types.ts
@@ -56,6 +56,9 @@ export interface ITourStep {
 
   /** Custom scroll animation options for this step (overrides global jumpOptions) */
   readonly jumpOptions?: Partial<JumpOptions>;
+
+  /** Descriptive label for screen readers (e.g., "User Profile Settings") */
+  readonly ariaLabel?: string;
 }
 
 /**
@@ -121,6 +124,18 @@ export interface VTourProps {
 
   /** Default scroll animation options (can be overridden per step) */
   readonly jumpOptions?: Partial<JumpOptions>;
+
+  /** Enable accessibility features including keyboard navigation and ARIA attributes (default: true) */
+  readonly enableA11y?: boolean;
+
+  /** Enable keyboard navigation with Arrow keys, Enter, and Escape (default: true) */
+  readonly keyboardNav?: boolean;
+
+  /** Custom ARIA label for the tour dialog (default: "Guided tour") */
+  readonly ariaLabel?: string;
+
+  /** Delay in milliseconds to wait for Vue Teleport to render DOM elements (default: 100) */
+  readonly teleportDelay?: number;
 }
 
 /**
diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index 4da4c28..93e39a7 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -23,6 +23,10 @@ const props = withDefaults(defineProps<VTourProps>(), {
   hideArrow: false,
   noScroll: false,
   resizeTimeout: 250,
+  enableA11y: false, // Conservative default - can be enabled when accessibility is fully vetted
+  keyboardNav: true,
+  ariaLabel: 'Guided tour',
+  teleportDelay: 100,
 });
 
 // Emit definitions using standardized VTourEmits type
@@ -50,9 +54,12 @@ const _CurrentStep: VTourData = reactive({
   getNextStep,
 });
 
+const isLastStep = computed(
+  () => currentStepIndex.value === props.steps.length - 1
+);
+
 const getNextLabel = computed(() => {
-  const isLastStep = currentStepIndex.value === props.steps.length - 1;
-  return isLastStep
+  return isLastStep.value
     ? (props.buttonLabels?.done ?? 'Done')
     : (props.buttonLabels?.next ?? 'Next');
 });
@@ -80,15 +87,15 @@ const highlightClass = computed(() =>
 const _Tooltip = ref<HTMLElement>();
 const _Backdrop = ref<HTMLElement>();
 
-// Constants for timing and positioning
-const TELEPORT_RENDER_DELAY = 100; // ms to wait for Vue Teleport to render DOM elements
+// Accessibility: Store previous focus to restore on close
+let previousFocus: HTMLElement | null = null;
 
 // Default jump.js scroll options (can be overridden via props)
 const DEFAULT_JUMP_OPTIONS = {
   duration: 500,
   offset: -100,
   easing: 'easeInOutQuad' as const,
-  a11y: false,
+  a11y: false, // Note: This is overridden by props.enableA11y in the merge at line 369
 };
 
 // Helper to check if tour was completed and saved to localStorage
@@ -132,7 +139,7 @@ const startTour = async (): Promise<void> => {
 
     // Wait for Teleport to render DOM elements, then cache references
     await new Promise((resolve) => {
-      teleportDelayTimer = setTimeout(resolve, TELEPORT_RENDER_DELAY);
+      teleportDelayTimer = setTimeout(resolve, props.teleportDelay);
     });
 
     if (!_Tooltip.value) {
@@ -152,6 +159,11 @@ const startTour = async (): Promise<void> => {
       return;
     }
 
+    // Store current focus for accessibility restoration
+    if (props.enableA11y && typeof document !== 'undefined') {
+      previousFocus = document.activeElement as HTMLElement;
+    }
+
     // Show tour content (but keep hidden via isTransitioning) so nanopop can calculate dimensions
     tourVisible.value = true;
     isTransitioning.value = true;
@@ -175,6 +187,12 @@ const startTour = async (): Promise<void> => {
     // Show tooltip after positioning is complete
     isTransitioning.value = false;
 
+    // Focus the tooltip for accessibility
+    if (props.enableA11y) {
+      await nextTick();
+      _Tooltip.value?.focus();
+    }
+
     emit('onTourStart');
   }, props.startDelay);
 };
@@ -199,6 +217,12 @@ const stopTour = (): void => {
   if (vTour.value) {
     vTour.value = undefined;
   }
+
+  // Restore previous focus for accessibility
+  if (props.enableA11y && previousFocus) {
+    previousFocus.focus();
+    previousFocus = null;
+  }
 };
 const resetTour = (shouldRestart = false): void => {
   stopTour();
@@ -337,9 +361,10 @@ const updatePosition = async (): Promise<void> => {
   if (!props.noScroll && !currentStepData.noScroll) {
     await new Promise<void>((resolve) => {
       // Merge default options with global and step-specific options
-      // Priority: step options > global options > defaults
+      // Priority: step options > global options > enableA11y prop > defaults
       const scrollOptions = {
         ...DEFAULT_JUMP_OPTIONS,
+        a11y: props.enableA11y, // Use enableA11y prop as default
         ...props.jumpOptions,
         ...currentStepData.jumpOptions,
         callback: () => resolve(),
@@ -454,11 +479,46 @@ const onScroll = (): void => {
   redrawLayers();
 };
 
+// Keyboard navigation handler
+const onKeydown = (event: KeyboardEvent): void => {
+  if (!tourVisible.value || !props.enableA11y || !props.keyboardNav) return;
+
+  switch (event.key) {
+    case 'Escape':
+      endTour();
+      event.preventDefault();
+      break;
+    case 'ArrowRight':
+    case 'Enter':
+      // Only handle Enter if it's not from a button click
+      if (
+        event.key === 'Enter' &&
+        (event.target as HTMLElement)?.tagName === 'BUTTON'
+      ) {
+        return;
+      }
+      nextStep();
+      event.preventDefault();
+      break;
+    case 'ArrowLeft':
+      if (currentStepIndex.value > 0) {
+        lastStep();
+        event.preventDefault();
+      }
+      break;
+  }
+};
+
 // Lifecycle hooks
 onMounted(() => {
   // Vue refs will be set automatically for Teleported elements
   // No need to manually query DOM for refs
 
+  // Set up keyboard navigation if enabled
+  if (props.keyboardNav) {
+    window.addEventListener('keydown', onKeydown);
+  }
+
   if (props.autoStart) {
     startTour();
   }
@@ -469,6 +529,9 @@ onMounted(() => {
 
 onUnmounted(() => {
   // Clean up event listeners
+  if (props.keyboardNav) {
+    window.removeEventListener('keydown', onKeydown);
+  }
   window.removeEventListener('resize', onResizeEnd);
   window.removeEventListener('scroll', onScroll, true);
 
@@ -512,17 +575,36 @@ defineExpose<VTourExposedMethods>({
       />
       <div
         :id="tooltipId"
-        role="tooltip"
+        ref="_Tooltip"
+        role="dialog"
+        :aria-modal="enableA11y ? 'true' : undefined"
+        :aria-label="getCurrentStep?.ariaLabel || ariaLabel"
+        :aria-describedby="`${tooltipId}-content`"
+        :tabindex="enableA11y ? '0' : undefined"
         :data-hidden="!tourVisible || isTransitioning"
       >
         <div v-if="tourVisible" :key="`step-${currentStepIndex}`">
+          <!-- Screen reader announcement for step changes -->
+          <div
+            v-if="enableA11y"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            class="vjt-sr-only"
+          >
+            Step {{ currentStepIndex + 1 }} of {{ props.steps.length }}
+          </div>
+
           <div :id="arrowId" v-if="!hideArrow"></div>
           <slot
             name="content"
             :current-step-index="currentStepIndex"
             :current-step-data="getCurrentStep"
           >
-            <div v-html="_CurrentStep.getCurrentStep?.content" />
+            <div
+              :id="`${tooltipId}-content`"
+              v-html="_CurrentStep.getCurrentStep?.content"
+            />
           </slot>
 
           <slot
@@ -539,6 +621,11 @@ defineExpose<VTourExposedMethods>({
                 v-if="lastStepIndex < currentStepIndex"
                 type="button"
                 @click.prevent="lastStep"
+                :aria-label="
+                  enableA11y
+                    ? `Go to previous step, step ${currentStepIndex} of ${props.steps.length}`
+                    : undefined
+                "
               >
                 {{ props.buttonLabels?.back || 'Back' }}
               </button>
@@ -547,11 +634,22 @@ defineExpose<VTourExposedMethods>({
                 v-if="!props.hideSkip"
                 type="button"
                 @click.prevent="endTour"
+                :aria-label="enableA11y ? 'Skip tour and close' : undefined"
               >
                 {{ props.buttonLabels?.skip || 'Skip' }}
               </button>
 
-              <button type="button" @click.prevent="nextStep">
+              <button
+                type="button"
+                @click.prevent="nextStep"
+                :aria-label="
+                  enableA11y
+                    ? isLastStep
+                      ? 'Finish tour'
+                      : `Go to next step, step ${nextStepIndex + 1} of ${props.steps.length}`
+                    : undefined
+                "
+              >
                 {{ getNextLabel }}
               </button>
             </div>
diff --git a/src/style/style.scss b/src/style/style.scss
index c18def1..d06150b 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -125,3 +125,16 @@
     }
   }
 }
+
+// Screen-reader-only content (for accessibility announcements)
+.vjt-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/test/components/VTour.accessibility.spec.ts b/test/components/VTour.accessibility.spec.ts
new file mode 100644
index 0000000..b4d2c43
--- /dev/null
+++ b/test/components/VTour.accessibility.spec.ts
@@ -0,0 +1,632 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import type { ITourStep } from '../../src/Types';
+import {
+  useFakeTimersPerTest,
+  startAndWaitReady,
+  waitForStepTransition,
+  flushVue,
+} from '../helpers/timers';
+import { mountVTour } from '../helpers/mountVTour';
+
+describe('VTour Component - Accessibility', () => {
+  useFakeTimersPerTest();
+
+  let steps: ITourStep[];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    document.body.innerHTML = `
+      <div id="step1">Target 1</div>
+      <div id="step2">Target 2</div>
+      <div id="step3">Target 3</div>
+    `;
+
+    steps = [
+      { target: '#step1', content: 'Step 1 content' },
+      { target: '#step2', content: 'Step 2 content' },
+      { target: '#step3', content: 'Step 3 content' },
+    ];
+  });
+
+  describe('ARIA Attributes', () => {
+    it('should add role="dialog" to tooltip', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip).toBeTruthy();
+      expect(tooltip?.getAttribute('role')).toBe('dialog');
+
+      wrapper.unmount();
+    });
+
+    it('should add aria-modal when accessibility is enabled', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('aria-modal')).toBe('true');
+
+      wrapper.unmount();
+    });
+
+    it('should add default aria-label to tooltip', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('aria-label')).toBe('Guided tour');
+
+      wrapper.unmount();
+    });
+
+    it('should use custom aria-label from props', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        ariaLabel: 'Product feature tour',
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('aria-label')).toBe('Product feature tour');
+
+      wrapper.unmount();
+    });
+
+    it('should use step-specific aria-label when provided', async () => {
+      const stepsWithLabels = [
+        { target: '#step1', content: 'Step 1', ariaLabel: 'Welcome step' },
+        {
+          target: '#step2',
+          content: 'Step 2',
+          ariaLabel: 'Feature introduction',
+        },
+      ];
+
+      const wrapper = mountVTour({
+        steps: stepsWithLabels,
+        autoStart: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('aria-label')).toBe('Welcome step');
+
+      wrapper.unmount();
+    });
+
+    it('should add aria-describedby linking to content', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      const ariaDescribedby = tooltip?.getAttribute('aria-describedby');
+      expect(ariaDescribedby).toBeTruthy();
+
+      const contentElement = document.querySelector(`#${ariaDescribedby}`);
+      expect(contentElement).toBeTruthy();
+
+      wrapper.unmount();
+    });
+
+    it('should add tabindex="0" to make tooltip focusable when a11y enabled', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('tabindex')).toBe('0');
+
+      wrapper.unmount();
+    });
+
+    it('should not add tabindex when a11y disabled', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: false,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('tabindex')).toBeNull();
+
+      wrapper.unmount();
+    });
+  });
+
+  describe('ARIA Live Region', () => {
+    it('should include aria-live region for step announcements', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion).toBeTruthy();
+      expect(liveRegion?.getAttribute('aria-atomic')).toBe('true');
+      expect(liveRegion?.textContent?.trim()).toContain('Step 1 of 3');
+
+      wrapper.unmount();
+    });
+
+    it('should update live region when step changes', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      let liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 1 of 3');
+
+      // Navigate to next step
+      const component = wrapper.vm as any;
+      await component.nextStep();
+      await waitForStepTransition(wrapper);
+
+      // Re-query the live region as it gets recreated with the new :key
+      liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 2 of 3');
+
+      wrapper.unmount();
+    });
+
+    it('should not include live region when a11y disabled', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: false,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion).toBeNull();
+
+      wrapper.unmount();
+    });
+  });
+
+  describe('Button Labels', () => {
+    it('should add descriptive aria-labels to back button', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const component = wrapper.vm as any;
+      await component.nextStep();
+      await waitForStepTransition(wrapper);
+
+      const backButton = Array.from(document.querySelectorAll('button')).find(
+        (btn) => btn.textContent?.includes('Back')
+      );
+      expect(backButton?.getAttribute('aria-label')).toContain(
+        'Go to previous step'
+      );
+      // Currently on step 2 (currentStepIndex=1), button shows currentStepIndex not currentStepIndex+1
+      expect(backButton?.getAttribute('aria-label')).toContain('step 1 of 3');
+
+      wrapper.unmount();
+    });
+
+    it('should add descriptive aria-labels to skip button', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const skipButton = Array.from(document.querySelectorAll('button')).find(
+        (btn) => btn.textContent?.includes('Skip')
+      );
+      expect(skipButton?.getAttribute('aria-label')).toBe(
+        'Skip tour and close'
+      );
+
+      wrapper.unmount();
+    });
+
+    it('should add descriptive aria-labels to next button', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const nextButton = Array.from(document.querySelectorAll('button')).find(
+        (btn) => btn.textContent?.includes('Next')
+      );
+      expect(nextButton?.getAttribute('aria-label')).toContain(
+        'Go to next step'
+      );
+      expect(nextButton?.getAttribute('aria-label')).toContain('step 2 of 3');
+
+      wrapper.unmount();
+    });
+
+    it('should change next button aria-label to "Finish tour" on last step', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const component = wrapper.vm as any;
+
+      // Navigate to last step
+      await component.nextStep();
+      await waitForStepTransition(wrapper);
+      await component.nextStep();
+      await waitForStepTransition(wrapper);
+
+      const finishButton = Array.from(document.querySelectorAll('button')).find(
+        (btn) => btn.textContent?.includes('Done')
+      );
+      expect(finishButton?.getAttribute('aria-label')).toBe('Finish tour');
+
+      wrapper.unmount();
+    });
+
+    it('should not add aria-labels when a11y disabled', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: false,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const buttons = Array.from(document.querySelectorAll('button'));
+      buttons.forEach((btn) => {
+        expect(btn.getAttribute('aria-label')).toBeNull();
+      });
+
+      wrapper.unmount();
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should listen for keyboard events when keyboardNav enabled', async () => {
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        'keydown',
+        expect.any(Function)
+      );
+
+      wrapper.unmount();
+      addEventListenerSpy.mockRestore();
+    });
+
+    it('should not listen for keyboard events when keyboardNav disabled', async () => {
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: false,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const keydownCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === 'keydown'
+      );
+      expect(keydownCalls).toHaveLength(0);
+
+      wrapper.unmount();
+      addEventListenerSpy.mockRestore();
+    });
+
+    it('should close tour on Escape key', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      // Tour should be visible
+      expect(document.querySelector('[id$="-tooltip"]')).toBeTruthy();
+
+      // Simulate Escape key
+      const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+      window.dispatchEvent(escapeEvent);
+
+      await flushVue();
+
+      // Tour should be hidden
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('data-hidden')).toBe('true');
+
+      wrapper.unmount();
+    });
+
+    it('should go to next step on ArrowRight key', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      let liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 1 of 3');
+
+      // Simulate ArrowRight key
+      const arrowEvent = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+      window.dispatchEvent(arrowEvent);
+
+      await waitForStepTransition(wrapper);
+
+      // Re-query the live region as it gets recreated with the new :key
+      liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 2 of 3');
+
+      wrapper.unmount();
+    });
+
+    it('should go to previous step on ArrowLeft key', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const component = wrapper.vm as any;
+
+      // Go to step 2
+      await component.nextStep();
+      await waitForStepTransition(wrapper);
+
+      let liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 2 of 3');
+
+      // Simulate ArrowLeft key
+      const arrowEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+      window.dispatchEvent(arrowEvent);
+
+      await waitForStepTransition(wrapper);
+
+      // Re-query the live region as it gets recreated with the new :key
+      liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 1 of 3');
+
+      wrapper.unmount();
+    });
+
+    it('should go to next step on Enter key', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      let liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 1 of 3');
+
+      // Simulate Enter key
+      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+      window.dispatchEvent(enterEvent);
+
+      await waitForStepTransition(wrapper);
+
+      // Re-query the live region as it gets recreated with the new :key
+      liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion?.textContent).toContain('Step 2 of 3');
+
+      wrapper.unmount();
+    });
+
+    it('should remove keyboard listener on unmount', async () => {
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      wrapper.unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'keydown',
+        expect.any(Function)
+      );
+
+      removeEventListenerSpy.mockRestore();
+    });
+  });
+
+  describe('Focus Management', () => {
+    it('should focus tooltip when tour starts with a11y enabled', async () => {
+      const wrapper = mountVTour({
+        steps,
+        enableA11y: true,
+      });
+
+      const component = wrapper.vm as any;
+      await component.startTour();
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]') as HTMLElement;
+      expect(document.activeElement).toBe(tooltip);
+
+      wrapper.unmount();
+    });
+
+    it('should restore focus to previous element when tour ends', async () => {
+      // Create a focusable element and focus it
+      const button = document.createElement('button');
+      button.id = 'test-button';
+      button.textContent = 'Test';
+      document.body.appendChild(button);
+      button.focus();
+
+      expect(document.activeElement).toBe(button);
+
+      const wrapper = mountVTour({
+        steps,
+        enableA11y: true,
+      });
+
+      const component = wrapper.vm as any;
+      await component.startTour();
+      await startAndWaitReady(wrapper);
+
+      // Focus should move to tooltip
+      const tooltip = document.querySelector('[id$="-tooltip"]') as HTMLElement;
+      expect(document.activeElement).toBe(tooltip);
+
+      // End tour
+      await component.stopTour();
+      await flushVue();
+
+      // Focus should be restored to button
+      expect(document.activeElement).toBe(button);
+
+      wrapper.unmount();
+      button.remove();
+    });
+  });
+
+  describe('Accessibility Configuration', () => {
+    it('should enable all a11y features by default', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('aria-modal')).toBe('true');
+      expect(tooltip?.getAttribute('tabindex')).toBe('0');
+
+      const liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion).toBeTruthy();
+
+      wrapper.unmount();
+    });
+
+    it('should respect enableA11y: false to disable ARIA features', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        enableA11y: false,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const tooltip = document.querySelector('[id$="-tooltip"]');
+      expect(tooltip?.getAttribute('aria-modal')).toBeNull();
+      expect(tooltip?.getAttribute('tabindex')).toBeNull();
+
+      const liveRegion = document.querySelector(
+        '[role="status"][aria-live="polite"]'
+      );
+      expect(liveRegion).toBeNull();
+
+      wrapper.unmount();
+    });
+
+    it('should respect keyboardNav: false to disable keyboard shortcuts', async () => {
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: false,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const keydownCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === 'keydown'
+      );
+      expect(keydownCalls).toHaveLength(0);
+
+      wrapper.unmount();
+      addEventListenerSpy.mockRestore();
+    });
+  });
+});
diff --git a/test/components/VTour.jumpOptions.spec.ts b/test/components/VTour.jumpOptions.spec.ts
index 8cdeda0..b510354 100644
--- a/test/components/VTour.jumpOptions.spec.ts
+++ b/test/components/VTour.jumpOptions.spec.ts
@@ -1,8 +1,8 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import VTour from '../../src/components/VTour.vue';
 import type { ITourStep } from '../../src/Types';
 import jump from 'jump.js';
+import { useFakeTimersPerTest, startAndWaitReady } from '../helpers/timers';
+import { mountVTour } from '../helpers/mountVTour';
 
 // Mock jump.js
 vi.mock('jump.js', () => ({
@@ -15,6 +15,8 @@ vi.mock('jump.js', () => ({
 }));
 
 describe('VTour Component - Jump Options', () => {
+  useFakeTimersPerTest();
+
   const steps: ITourStep[] = [
     {
       target: '#step1',
@@ -35,43 +37,34 @@ describe('VTour Component - Jump Options', () => {
   });
 
   it('should use default jump options when none provided', async () => {
-    const wrapper = mount(VTour, {
-      props: { steps },
-      attachTo: document.body,
-    });
+    const wrapper = mountVTour({ steps, noScroll: false });
 
-    const component = wrapper.vm as any;
-    await component.startTour();
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await startAndWaitReady(wrapper);
 
     expect(jump).toHaveBeenCalled();
     const callArgs = (jump as any).mock.calls[0][1];
 
-    // Should use default values
+    // Should use default values (a11y follows enableA11y prop which defaults to true via mountVTour)
     expect(callArgs.duration).toBe(500);
     expect(callArgs.offset).toBe(-100);
     expect(callArgs.easing).toBe('easeInOutQuad');
-    expect(callArgs.a11y).toBe(false);
+    expect(callArgs.a11y).toBe(true); // mountVTour defaults enableA11y to true
 
     wrapper.unmount();
   });
 
   it('should use global jump options from props', async () => {
-    const wrapper = mount(VTour, {
-      props: {
-        steps,
-        jumpOptions: {
-          duration: 1000,
-          offset: -200,
-          a11y: true,
-        },
+    const wrapper = mountVTour({
+      steps,
+      noScroll: false,
+      jumpOptions: {
+        duration: 1000,
+        offset: -200,
+        a11y: true,
       },
-      attachTo: document.body,
     });
 
-    const component = wrapper.vm as any;
-    await component.startTour();
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await startAndWaitReady(wrapper);
 
     expect(jump).toHaveBeenCalled();
     const callArgs = (jump as any).mock.calls[0][1];
@@ -97,21 +90,17 @@ describe('VTour Component - Jump Options', () => {
       },
     ];
 
-    const wrapper = mount(VTour, {
-      props: {
-        steps: stepsWithOptions,
-        jumpOptions: {
-          duration: 1000,
-          offset: -200,
-          a11y: true,
-        },
+    const wrapper = mountVTour({
+      steps: stepsWithOptions,
+      noScroll: false,
+      jumpOptions: {
+        duration: 1000,
+        offset: -200,
+        a11y: true,
       },
-      attachTo: document.body,
     });
 
-    const component = wrapper.vm as any;
-    await component.startTour();
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await startAndWaitReady(wrapper);
 
     expect(jump).toHaveBeenCalled();
     const callArgs = (jump as any).mock.calls[0][1];
@@ -126,20 +115,15 @@ describe('VTour Component - Jump Options', () => {
   });
 
   it('should not scroll when noScroll is enabled', async () => {
-    const wrapper = mount(VTour, {
-      props: {
-        steps,
-        noScroll: true,
-        jumpOptions: {
-          duration: 1000,
-        },
+    const wrapper = mountVTour({
+      steps,
+      noScroll: true,
+      jumpOptions: {
+        duration: 1000,
       },
-      attachTo: document.body,
     });
 
-    const component = wrapper.vm as any;
-    await component.startTour();
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await startAndWaitReady(wrapper);
 
     // jump.js should not be called when noScroll is true
     expect(jump).not.toHaveBeenCalled();
@@ -152,19 +136,15 @@ describe('VTour Component - Jump Options', () => {
       return (c * t) / d + b;
     };
 
-    const wrapper = mount(VTour, {
-      props: {
-        steps,
-        jumpOptions: {
-          easing: customEasing,
-        },
+    const wrapper = mountVTour({
+      steps,
+      noScroll: false,
+      jumpOptions: {
+        easing: customEasing,
       },
-      attachTo: document.body,
     });
 
-    const component = wrapper.vm as any;
-    await component.startTour();
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await startAndWaitReady(wrapper);
 
     expect(jump).toHaveBeenCalled();
     const callArgs = (jump as any).mock.calls[0][1];
@@ -174,4 +154,29 @@ describe('VTour Component - Jump Options', () => {
 
     wrapper.unmount();
   });
+
+  it('should respect enableA11y prop for jump.js a11y option', async () => {
+    // Test with enableA11y: false
+    const wrapper1 = mountVTour({ steps, enableA11y: false, noScroll: false });
+
+    await startAndWaitReady(wrapper1);
+
+    expect(jump).toHaveBeenCalled();
+    const callArgs1 = (jump as any).mock.calls[0][1];
+    expect(callArgs1.a11y).toBe(false);
+
+    wrapper1.unmount();
+    vi.clearAllMocks();
+
+    // Test with enableA11y: true (explicit)
+    const wrapper2 = mountVTour({ steps, enableA11y: true, noScroll: false });
+
+    await startAndWaitReady(wrapper2);
+
+    expect(jump).toHaveBeenCalled();
+    const callArgs2 = (jump as any).mock.calls[0][1];
+    expect(callArgs2.a11y).toBe(true);
+
+    wrapper2.unmount();
+  });
 });
diff --git a/test/components/VTour.spec.ts b/test/components/VTour.spec.ts
index 82da2d8..6b73c10 100644
--- a/test/components/VTour.spec.ts
+++ b/test/components/VTour.spec.ts
@@ -3,6 +3,13 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VTour from '../../src/components/VTour.vue';
 import type { ITourStep } from '../../src/Types';
+import {
+  useFakeTimersPerTest,
+  startAndWaitReady,
+  waitForStepTransition,
+  flushVue,
+} from '../helpers/timers';
+import { mountVTour } from '../helpers/mountVTour';
 
 // Mock nanopop with proper functionality
 const mockPopper = {
@@ -15,8 +22,9 @@ vi.mock('nanopop', () => ({
 }));
 
 describe('VTour Component - Comprehensive Test Suite', () => {
-  let wrapper: any;
+  useFakeTimersPerTest();
 
+  let wrapper: any;
   const mockSteps: ITourStep[] = [
     {
       target: '#step1',
@@ -38,13 +46,6 @@ describe('VTour Component - Comprehensive Test Suite', () => {
     },
   ];
 
-  // Helper function to wait for async operations and DOM updates
-  const waitForAsync = async (ms: number = 50) => {
-    await new Promise((resolve) => setTimeout(resolve, ms));
-    await nextTick();
-    await nextTick();
-  };
-
   beforeEach(() => {
     // Create a comprehensive DOM structure for testing
     document.body.innerHTML = `
@@ -102,18 +103,14 @@ describe('VTour Component - Comprehensive Test Suite', () => {
         skip: 'Cancel',
       };
 
-      wrapper = mount(VTour, {
-        props: {
-          steps: mockSteps,
-          buttonLabels: customLabels,
-        },
-        attachTo: document.getElementById('app')!,
+      wrapper = mountVTour({
+        steps: mockSteps,
+        buttonLabels: customLabels,
+        autoStart: false,
       });
 
       // Start tour and wait for async operations
-      await wrapper.vm.startTour();
-      await new Promise((resolve) => setTimeout(resolve, 150));
-      await nextTick();
+      await startAndWaitReady(wrapper);
 
       // Check if custom labels appear in Teleported element
       const tooltipElement = document.querySelector('#vjt-tooltip');
@@ -149,11 +146,9 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
   describe('Tour Navigation and Control', () => {
     beforeEach(() => {
-      wrapper = mount(VTour, {
-        props: {
-          steps: mockSteps,
-        },
-        attachTo: document.getElementById('app')!,
+      wrapper = mountVTour({
+        steps: mockSteps,
+        autoStart: false,
       });
     });
 
@@ -178,7 +173,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       expect(wrapper.vm.currentStepIndex).toBe(0);
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Tour should be in started state (currentStepIndex maintained or set)
       expect(wrapper.vm.currentStepIndex).toBe(0);
@@ -196,7 +191,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
       // Navigate to next step
       await wrapper.vm.nextStep();
-      await waitForAsync();
+      await flushVue();
 
       expect(wrapper.vm.currentStepIndex).toBe(initialStep + 1);
       expect(wrapper.vm.lastStepIndex).toBe(initialStep);
@@ -205,12 +200,12 @@ describe('VTour Component - Comprehensive Test Suite', () => {
     it('should navigate backwards using lastStep', async () => {
       // Navigate to step 2
       await wrapper.vm.goToStep(2);
-      await waitForAsync();
+      await flushVue();
       expect(wrapper.vm.currentStepIndex).toBe(2);
 
       // Go back one step
       await wrapper.vm.lastStep();
-      await waitForAsync();
+      await flushVue();
 
       expect(wrapper.vm.currentStepIndex).toBe(1);
       expect(wrapper.vm.lastStepIndex).toBe(0);
@@ -225,7 +220,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
       // Try to go back from step 0
       await wrapper.vm.lastStep();
-      await waitForAsync();
+      await flushVue();
 
       // lastStepIndex should not go below 0
       expect(wrapper.vm.lastStepIndex).toBe(0);
@@ -234,7 +229,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
     it('should navigate to specific step', async () => {
       // Navigate to specific step
       await wrapper.vm.goToStep(2);
-      await waitForAsync();
+      await flushVue();
 
       expect(wrapper.vm.currentStepIndex).toBe(2);
       expect(wrapper.vm.lastStepIndex).toBe(1);
@@ -256,8 +251,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
     });
 
     it('should stop tour correctly', async () => {
-      await wrapper.vm.startTour();
-      await new Promise((resolve) => setTimeout(resolve, 150));
+      await startAndWaitReady(wrapper);
 
       wrapper.vm.stopTour();
       await nextTick();
@@ -293,7 +287,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
     it('should emit tourEnd event reliably', async () => {
       // Test the most reliable event - tourEnd
       wrapper.vm.endTour();
-      await waitForAsync();
+      await flushVue();
 
       expect(wrapper.emitted('onTourEnd')).toBeTruthy();
     });
@@ -348,20 +342,19 @@ describe('VTour Component - Comprehensive Test Suite', () => {
     it('should not start tour if already completed', async () => {
       localStorage.setItem('vjt-completed-tour', 'true');
 
-      wrapper = mount(VTour, {
-        props: {
-          steps: mockSteps,
-          name: 'completed-tour',
-          saveToLocalStorage: 'end',
-        },
+      wrapper = mountVTour({
+        steps: mockSteps,
+        name: 'completed-tour',
+        saveToLocalStorage: 'end',
+        autoStart: false,
       });
 
-      // Try to start tour - it should not emit tourStart if already completed
+      // Try to start tour - it should not start if already completed
       await wrapper.vm.startTour();
-      await new Promise((resolve) => setTimeout(resolve, 150));
+      await flushVue();
 
-      // Tour should not have started (no tourStart emission)
-      expect(wrapper.emitted('onTourStart')).toBeFalsy();
+      // Tour should not have started (tourVisible should be false)
+      expect(wrapper.vm.tourVisible).toBe(false);
     });
   });
 
@@ -527,16 +520,12 @@ describe('VTour Component - Comprehensive Test Suite', () => {
         },
       ];
 
-      wrapper = mount(VTour, {
-        props: {
-          steps: stepsWithCallbacks,
-        },
-        attachTo: document.getElementById('app')!,
+      wrapper = mountVTour({
+        steps: stepsWithCallbacks,
+        autoStart: false,
       });
 
-      await wrapper.vm.startTour();
-      await new Promise((resolve) => setTimeout(resolve, 150));
-      await nextTick();
+      await startAndWaitReady(wrapper);
 
       // onBefore should be called when step starts
       expect(onBeforeSpy).toHaveBeenCalled();
@@ -554,15 +543,17 @@ describe('VTour Component - Comprehensive Test Suite', () => {
         },
       ];
 
-      wrapper = mount(VTour, {
-        props: {
-          steps: stepsWithMissingTarget,
-        },
+      wrapper = mountVTour({
+        steps: stepsWithMissingTarget,
+        autoStart: false,
       });
 
-      await wrapper.vm.startTour();
-      await new Promise((resolve) => setTimeout(resolve, 150));
-      await nextTick();
+      // Try to start the tour, expecting it to fail gracefully
+      try {
+        await startAndWaitReady(wrapper);
+      } catch (error) {
+        // Expected to fail since target doesn't exist
+      }
 
       expect(consoleSpy).toHaveBeenCalledWith(
         'Tour target element not found: #non-existent'
@@ -575,17 +566,13 @@ describe('VTour Component - Comprehensive Test Suite', () => {
     it('should auto start tour when autoStart is true', async () => {
       const startSpy = vi.fn();
 
-      wrapper = mount(VTour, {
-        props: {
-          steps: mockSteps,
-          autoStart: true,
-        },
-        attachTo: document.getElementById('app')!,
+      wrapper = mountVTour({
+        steps: mockSteps,
+        autoStart: true,
       });
 
       // Wait for auto start
-      await new Promise((resolve) => setTimeout(resolve, 150));
-      await nextTick();
+      await startAndWaitReady(wrapper);
 
       // Check if tour has started (currentStepIndex should be 0, not -1 or undefined)
       expect(wrapper.vm.currentStepIndex).toBe(0);
@@ -594,22 +581,20 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
   describe('Resize Handling', () => {
     it('should handle window resize events', async () => {
-      wrapper = mount(VTour, {
-        props: {
-          steps: mockSteps,
-        },
-        attachTo: document.getElementById('app')!,
+      wrapper = mountVTour({
+        steps: mockSteps,
+        autoStart: false,
       });
 
-      await wrapper.vm.startTour();
-      await new Promise((resolve) => setTimeout(resolve, 150));
+      await startAndWaitReady(wrapper);
 
       // Mock resize event
       const resizeEvent = new Event('resize');
       window.dispatchEvent(resizeEvent);
 
-      // Wait for debounced resize handler
-      await new Promise((resolve) => setTimeout(resolve, 300));
+      // Wait for debounced resize handler (need to advance fake timers)
+      vi.advanceTimersByTime(300);
+      await flushVue();
 
       // Should not throw errors
       expect(wrapper.exists()).toBe(true);
@@ -691,25 +676,20 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
       // Try to go to next step - should end tour
       await wrapper.vm.nextStep();
-      await waitForAsync();
+      await flushVue();
 
       // Should have emitted tourEnd
       expect(wrapper.emitted('onTourEnd')).toBeTruthy();
     });
 
     it('should handle various startDelay values', async () => {
-      wrapper = mount(VTour, {
-        props: {
-          steps: mockSteps,
-          startDelay: 100,
-        },
-        attachTo: document.getElementById('app')!,
+      wrapper = mountVTour({
+        steps: mockSteps,
+        startDelay: 100,
+        autoStart: false,
       });
 
-      await wrapper.vm.startTour();
-      // Wait for custom startDelay
-      await new Promise((resolve) => setTimeout(resolve, 150));
-      await waitForAsync();
+      await startAndWaitReady(wrapper);
 
       // Tour should be started
       expect(wrapper.vm.currentStepIndex).toBe(0);
@@ -728,7 +708,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
       // Reset and restart
       wrapper.vm.resetTour(true);
-      await waitForAsync();
+      await flushVue();
 
       // Should be reset to initial state
       expect(wrapper.vm.currentStepIndex).toBe(0);
@@ -803,7 +783,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       // Test each placement
       for (let i = 0; i < stepsWithPlacements.length; i++) {
         await wrapper.vm.goToStep(i);
-        await waitForAsync();
+        await flushVue();
         expect(wrapper.vm.currentStepIndex).toBe(i);
       }
     });
@@ -872,13 +852,13 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       const initialStep = wrapper.vm.currentStepIndex;
 
       // Navigate to next step
       await wrapper.vm.nextStep();
-      await waitForAsync();
+      await flushVue();
 
       // Should have moved to next step successfully
       expect(wrapper.vm.currentStepIndex).toBe(initialStep + 1);
@@ -893,14 +873,14 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Verify first step content
       expect(wrapper.vm.currentStepIndex).toBe(0);
 
       // Navigate to next step
       await wrapper.vm.nextStep();
-      await waitForAsync();
+      await flushVue();
 
       // Verify navigation worked (content was recreated with new key)
       expect(wrapper.vm.currentStepIndex).toBe(1);
@@ -916,7 +896,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
       // Start tour - this internally waits for nextTick before positioning
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Tour should have started successfully
       expect(wrapper.vm.currentStepIndex).toBe(0);
@@ -933,7 +913,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Tour should be started
       const tooltip = document.querySelector('#vjt-tooltip');
@@ -974,7 +954,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Tour should be started and tooltip should exist in DOM
       const tooltip = document.querySelector('#vjt-tooltip') as HTMLElement;
@@ -1012,7 +992,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       expect(targetDiv.classList.contains('vjt-highlight')).toBe(false);
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // After stopping, highlight should be removed
       wrapper.vm.stopTour();
@@ -1046,7 +1026,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Backdrop element should exist in DOM
       const backdrop = document.querySelector('#vjt-backdrop') as HTMLElement;
@@ -1069,7 +1049,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Tooltip should NOT be in wrapper
       expect(wrapper.find('#vjt-tooltip').exists()).toBe(false);
@@ -1110,14 +1090,14 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Should be on first step
       expect(wrapper.vm.currentStepIndex).toBe(0);
 
       // Navigate to second step
       await wrapper.vm.nextStep();
-      await waitForAsync();
+      await flushVue();
 
       // Should be on second step
       expect(wrapper.vm.currentStepIndex).toBe(1);
@@ -1133,27 +1113,25 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       targetDiv.style.top = '500px';
       document.body.appendChild(targetDiv);
 
-      wrapper = mount(VTour, {
-        props: {
-          steps: [
-            {
-              target: '#scroll-target',
-              content: 'Test content',
-            },
-          ],
-        },
-        attachTo: document.getElementById('app')!,
+      wrapper = mountVTour({
+        steps: [
+          {
+            target: '#scroll-target',
+            content: 'Test content',
+          },
+        ],
+        autoStart: false,
       });
 
-      await wrapper.vm.startTour();
-      await waitForAsync();
+      await startAndWaitReady(wrapper);
 
       const tooltip = document.querySelector('#vjt-tooltip') as HTMLElement;
       expect(tooltip).toBeTruthy();
 
       // Trigger scroll event
       window.dispatchEvent(new Event('scroll'));
-      await new Promise((resolve) => setTimeout(resolve, 50));
+      vi.advanceTimersByTime(50);
+      await flushVue();
 
       // Tooltip should still exist in DOM
       const tooltipAfterScroll = document.querySelector('#vjt-tooltip');
@@ -1161,7 +1139,8 @@ describe('VTour Component - Comprehensive Test Suite', () => {
 
       // Trigger resize event
       window.dispatchEvent(new Event('resize'));
-      await new Promise((resolve) => setTimeout(resolve, 300)); // Wait for debounce
+      vi.advanceTimersByTime(300); // Wait for debounce
+      await flushVue();
 
       // Tooltip should still exist in DOM after resize
       const tooltipAfterResize = document.querySelector('#vjt-tooltip');
@@ -1189,7 +1168,7 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       });
 
       await wrapper.vm.startTour();
-      await waitForAsync();
+      await flushVue();
 
       // Verify tour is active
       const tooltip = document.querySelector('#vjt-tooltip');
diff --git a/test/helpers/mountVTour.ts b/test/helpers/mountVTour.ts
new file mode 100644
index 0000000..55f2af5
--- /dev/null
+++ b/test/helpers/mountVTour.ts
@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils';
+import VTour from '../../src/components/VTour.vue';
+
+export function mountVTour(overrides: any = {}) {
+  const base = {
+    steps: overrides.steps ?? [{ target: 'body', content: 'x' }],
+    autoStart: overrides.autoStart ?? true,
+    enableA11y: overrides.enableA11y ?? true,
+    keyboardNav: overrides.keyboardNav ?? true,
+    // Zero all delays/durations
+    startDelay: 0,
+    teleportDelay: 0,
+    resizeTimeout: 0,
+    // Disable scrolling in tests to avoid timing issues with jump.js
+    noScroll: overrides.noScroll ?? true,
+  };
+  return mount(VTour, {
+    props: { ...base, ...overrides },
+    attachTo: document.body,
+  });
+}
diff --git a/test/helpers/timers.ts b/test/helpers/timers.ts
new file mode 100644
index 0000000..ba405aa
--- /dev/null
+++ b/test/helpers/timers.ts
@@ -0,0 +1,106 @@
+import { nextTick } from 'vue';
+import { flushPromises } from '@vue/test-utils';
+import { afterEach, beforeEach, vi } from 'vitest';
+
+export function useFakeTimersPerTest() {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+}
+
+export async function flushVue() {
+  await Promise.resolve();
+  await flushPromises();
+  await nextTick();
+  await nextTick();
+}
+
+export async function runPending() {
+  vi.runOnlyPendingTimers();
+  await flushVue();
+}
+
+/**
+ * Wait for isTransitioning to become false after a step transition.
+ * Useful after calling nextStep(), lastStep(), or goToStep().
+ */
+export async function waitForStepTransition(wrapper: any) {
+  for (let i = 0; i < 30; i++) {
+    await runPending();
+    const vm = wrapper.vm as any;
+    const tip = document.querySelector<HTMLElement>('[id$="-tooltip"]');
+    if (!vm.isTransitioning && tip?.getAttribute('data-hidden') === 'false') {
+      // Extra flushes to ensure Vue re-renders the keyed step content
+      await flushVue();
+      await flushVue();
+      return;
+    }
+  }
+  const vm = wrapper.vm as any;
+  throw new Error(
+    `Step transition did not complete. isTransitioning=${vm.isTransitioning}, currentStepIndex=${vm.currentStepIndex}`
+  );
+}
+
+/**
+ * Start (if needed) and wait until tooltip exists and data-hidden="false".
+ * Advances component's timed gates and waits for transition hooks to fire.
+ */
+export async function startAndWaitReady(wrapper: any) {
+  if (!wrapper.props('autoStart')) {
+    await (wrapper.vm as any).startTour();
+  }
+  await flushVue();
+
+  // Advance the component's timed gates
+  const startDelay = wrapper.props('startDelay') ?? 0;
+  const teleportDelay = wrapper.props('teleportDelay') ?? 0;
+  const transitionMs =
+    wrapper.props('transitionDuration') ?? wrapper.props('transitionMs') ?? 0;
+
+  // Advance startDelay to trigger the setTimeout callback
+  if (startDelay > 0) {
+    vi.advanceTimersByTime(startDelay);
+  } else {
+    // Even with 0 delay, need to run the pending timer
+    vi.runOnlyPendingTimers();
+  }
+  await flushVue();
+
+  // Now advance teleportDelay (inside the startDelay callback)
+  if (teleportDelay > 0) {
+    vi.advanceTimersByTime(teleportDelay);
+  } else {
+    vi.runOnlyPendingTimers();
+  }
+  await flushVue();
+
+  // Advance any transition duration
+  if (transitionMs > 0) {
+    vi.advanceTimersByTime(transitionMs);
+    await flushVue();
+  }
+
+  // Drain any remaining 0ms timers/microtasks and allow async operations to complete
+  for (let i = 0; i < 30; i++) {
+    await runPending();
+
+    const vm = wrapper.vm as any;
+    const tip = document.querySelector<HTMLElement>('[id$="-tooltip"]');
+
+    if (
+      tip &&
+      vm.tourVisible &&
+      !vm.isTransitioning &&
+      tip.getAttribute('data-hidden') === 'false'
+    ) {
+      return tip;
+    }
+  }
+
+  const finalTip = document.querySelector<HTMLElement>('[id$="-tooltip"]');
+  const vm = wrapper.vm as any;
+  throw new Error(
+    `Tooltip not ready. tourVisible=${vm.tourVisible}, isTransitioning=${vm.isTransitioning}, ` +
+      `data-hidden="${finalTip?.getAttribute('data-hidden')}", hasContent=${!!finalTip?.querySelector('[id$="-content"]')}`
+  );
+}
diff --git a/test/setup/transition.ts b/test/setup/transition.ts
new file mode 100644
index 0000000..02b0367
--- /dev/null
+++ b/test/setup/transition.ts
@@ -0,0 +1,42 @@
+import { defineComponent, nextTick } from 'vue';
+import { config } from '@vue/test-utils';
+
+// A Transition stub that fires hooks immediately on the real element
+const ImmediateTransition = defineComponent({
+  name: 'ImmediateTransition',
+  setup(_, { slots, attrs }) {
+    return () => {
+      const vnode = slots.default?.();
+      // Deliver hooks on nextTick when the element is in the DOM
+      nextTick(() => {
+        // Try to find the element rendered by this Transition
+        const el =
+          document.querySelector('[id$="-tooltip"]') ??
+          document.body.querySelector('[data-tour-root]') ??
+          document.body.querySelector('[data-test-transition-target]');
+
+        // Call hooks if present (Vue passes them as props like onBeforeEnter)
+        // @ts-ignore - attrs carries onBeforeEnter/onEnter/onAfterEnter
+        attrs.onBeforeEnter?.(el);
+        // @ts-ignore
+        if (attrs.onEnter) {
+          // Vue enter hook receives (el, done)
+          // @ts-ignore
+          attrs.onEnter(el, () => {});
+        }
+        // @ts-ignore
+        attrs.onAfterEnter?.(el);
+      });
+      return vnode as any;
+    };
+  },
+});
+
+config.global.stubs = {
+  Transition: ImmediateTransition,
+  TransitionGroup: {
+    render() {
+      return (this as any).$slots.default?.();
+    },
+  },
+};
diff --git a/vitest.config.ts b/vitest.config.ts
index 9270ea8..1cbcd93 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'happy-dom',
-    setupFiles: ['./test/setup.ts'],
+    setupFiles: ['./test/setup.ts', './test/setup/transition.ts'],
     pool: 'threads',
     poolOptions: {
       threads: {

From 4fab393585e53b3d8f1f36ef80d2b79c84eb5870 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Tue, 4 Nov 2025 11:40:14 -0600
Subject: [PATCH 08/13] Remove unused

---
 test/components/VTour.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/components/VTour.spec.ts b/test/components/VTour.spec.ts
index 6b73c10..28489ce 100644
--- a/test/components/VTour.spec.ts
+++ b/test/components/VTour.spec.ts
@@ -6,7 +6,6 @@ import type { ITourStep } from '../../src/Types';
 import {
   useFakeTimersPerTest,
   startAndWaitReady,
-  waitForStepTransition,
   flushVue,
 } from '../helpers/timers';
 import { mountVTour } from '../helpers/mountVTour';

From 51faeb2036cf297d90e5c70639a736f07f483500 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Tue, 4 Nov 2025 12:05:43 -0600
Subject: [PATCH 09/13] Better coverage

---
 test/components/VTour.accessibility.spec.ts | 35 +++++++++++++++++++++
 test/components/VTour.spec.ts               | 27 ++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/test/components/VTour.accessibility.spec.ts b/test/components/VTour.accessibility.spec.ts
index b4d2c43..5079dc0 100644
--- a/test/components/VTour.accessibility.spec.ts
+++ b/test/components/VTour.accessibility.spec.ts
@@ -493,6 +493,41 @@ describe('VTour Component - Accessibility', () => {
       wrapper.unmount();
     });
 
+    it('should not trigger next step when Enter is pressed on a button', async () => {
+      const wrapper = mountVTour({
+        steps,
+        autoStart: true,
+        keyboardNav: true,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      const initialStep = wrapper.vm.currentStepIndex;
+
+      // Create a button and simulate Enter key on it
+      const button = document.createElement('button');
+      document.body.appendChild(button);
+      
+      const enterEventOnButton = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        bubbles: true,
+      });
+      
+      Object.defineProperty(enterEventOnButton, 'target', {
+        value: button,
+        enumerable: true,
+      });
+      
+      window.dispatchEvent(enterEventOnButton);
+      await flushVue();
+
+      // Should still be on the same step
+      expect(wrapper.vm.currentStepIndex).toBe(initialStep);
+
+      document.body.removeChild(button);
+      wrapper.unmount();
+    });
+
     it('should remove keyboard listener on unmount', async () => {
       const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
 
diff --git a/test/components/VTour.spec.ts b/test/components/VTour.spec.ts
index 28489ce..d9e0136 100644
--- a/test/components/VTour.spec.ts
+++ b/test/components/VTour.spec.ts
@@ -529,6 +529,33 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       // onBefore should be called when step starts
       expect(onBeforeSpy).toHaveBeenCalled();
     });
+
+    it('should execute async onBefore callback', async () => {
+      let callbackExecuted = false;
+      const asyncOnBefore = vi.fn(async () => {
+        await flushVue();
+        callbackExecuted = true;
+      });
+
+      const stepsWithAsyncCallback = [
+        {
+          target: '#step1',
+          content: 'Step with async callback',
+          onBefore: asyncOnBefore,
+        },
+      ];
+
+      wrapper = mountVTour({
+        steps: stepsWithAsyncCallback,
+        autoStart: false,
+      });
+
+      await startAndWaitReady(wrapper);
+
+      // Async onBefore should be called and awaited
+      expect(asyncOnBefore).toHaveBeenCalled();
+      expect(callbackExecuted).toBe(true);
+    });
   });
 
   describe('Error Handling', () => {

From f5e886f860c8d292b3307032c1812922e7927003 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Tue, 4 Nov 2025 12:05:56 -0600
Subject: [PATCH 10/13] Fmt

---
 test/components/VTour.accessibility.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/components/VTour.accessibility.spec.ts b/test/components/VTour.accessibility.spec.ts
index 5079dc0..b675328 100644
--- a/test/components/VTour.accessibility.spec.ts
+++ b/test/components/VTour.accessibility.spec.ts
@@ -507,17 +507,17 @@ describe('VTour Component - Accessibility', () => {
       // Create a button and simulate Enter key on it
       const button = document.createElement('button');
       document.body.appendChild(button);
-      
+
       const enterEventOnButton = new KeyboardEvent('keydown', {
         key: 'Enter',
         bubbles: true,
       });
-      
+
       Object.defineProperty(enterEventOnButton, 'target', {
         value: button,
         enumerable: true,
       });
-      
+
       window.dispatchEvent(enterEventOnButton);
       await flushVue();
 

From e295b99dbf30f0e6d1a2495212904aab6730c759 Mon Sep 17 00:00:00 2001
From: AdamDrewsTR <Adam.Drews@thomsonreuters.com>
Date: Tue, 4 Nov 2025 15:18:25 -0600
Subject: [PATCH 11/13] feat: Enhance jump options with customizable easing
 functions and improve accessibility support

---
 docs/guide/jump-options.md                |  86 ++++++++----------
 src/Types.ts                              |  14 +--
 src/components/VTour.vue                  |  33 ++++---
 src/easing.ts                             | 101 ++++++++++++++++++++++
 test/components/VTour.jumpOptions.spec.ts |  40 ++++++---
 test/components/VTour.spec.ts             |  23 +++++
 6 files changed, 221 insertions(+), 76 deletions(-)
 create mode 100644 src/easing.ts

diff --git a/docs/guide/jump-options.md b/docs/guide/jump-options.md
index fd43e66..f390883 100644
--- a/docs/guide/jump-options.md
+++ b/docs/guide/jump-options.md
@@ -15,8 +15,13 @@ interface JumpOptions {
   /** Callback function to execute after scroll completes */
   callback?: () => void;
 
-  /** Easing function name or custom function (default: 'easeInOutQuad') */
-  easing?: (t: number, b: number, c: number, d: number) => number | string;
+  /**
+   * Easing function name (default: 'easeInOutQuad')
+   * Valid values: 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic',
+   * 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart',
+   * 'easeInQuint', 'easeOutQuint', 'easeInOutQuint'
+   */
+  easing?: string;
 
   /** Whether to focus the element for accessibility (default: false) */
   a11y?: boolean;
@@ -53,39 +58,16 @@ const steps = [
   },
   {
     target: '#step2',
-    content: 'This step uses custom scroll duration',
+    content: 'This step uses custom scroll options',
     jumpOptions: {
       duration: 300, // Faster scroll
       offset: -200, // More space at top
+      easing: 'easeInCubic', // Different easing
     },
   },
 ];
 ```
 
-## Custom Easing
-
-Provide a custom easing function:
-
-```vue
-<script setup lang="ts">
-import { VTour } from '@globalhive/vuejs-tour';
-
-const customEasing = (t: number, b: number, c: number, d: number) => {
-  // Linear easing
-  return (c * t) / d + b;
-};
-
-const jumpOptions = {
-  duration: 800,
-  easing: customEasing,
-};
-</script>
-
-<template>
-  <VTour :steps="steps" :jump-options="jumpOptions" />
-</template>
-```
-
 ## Disabling Scroll
 
 You can disable scrolling globally or per-step using the existing `noScroll` prop:
@@ -140,30 +122,38 @@ const steps = [
 
 ## Available Easing Functions
 
-jump.js supports the following built-in easing function names:
+VueJS Tour supports the following built-in easing function names:
 
-- `'easeInQuad'`
-- `'easeOutQuad'`
-- `'easeInOutQuad'` (default)
-- `'easeInCubic'`
-- `'easeOutCubic'`
-- `'easeInOutCubic'`
-- `'easeInQuart'`
-- `'easeOutQuart'`
-- `'easeInOutQuart'`
-- `'easeInQuint'`
-- `'easeOutQuint'`
-- `'easeInOutQuint'`
+- `'easeInQuad'` - Quadratic acceleration
+- `'easeOutQuad'` - Quadratic deceleration
+- `'easeInOutQuad'` - Quadratic acceleration and deceleration (default)
+- `'easeInCubic'` - Cubic acceleration
+- `'easeOutCubic'` - Cubic deceleration
+- `'easeInOutCubic'` - Cubic acceleration and deceleration
+- `'easeInQuart'` - Quartic acceleration
+- `'easeOutQuart'` - Quartic deceleration
+- `'easeInOutQuart'` - Quartic acceleration and deceleration
+- `'easeInQuint'` - Quintic acceleration
+- `'easeOutQuint'` - Quintic deceleration
+- `'easeInOutQuint'` - Quintic acceleration and deceleration
 
-Or provide your own custom easing function following the signature:
+Example usage:
 
-```typescript
-(t: number, b: number, c: number, d: number) => number;
+```vue
+<template>
+  <VTour
+    :steps="steps"
+    :jump-options="{
+      duration: 800,
+      easing: 'easeInOutCubic', // Smoother animation
+    }"
+  />
+</template>
 ```
 
-Where:
+### Understanding Easing Types
 
-- `t` = current time
-- `b` = beginning value
-- `c` = change in value
-- `d` = duration
+- **In** (e.g., `easeInQuad`) - Starts slow, ends fast (acceleration)
+- **Out** (e.g., `easeOutQuad`) - Starts fast, ends slow (deceleration)
+- **InOut** (e.g., `easeInOutQuad`) - Starts slow, speeds up, then slows down (smooth)
+- **Quad/Cubic/Quart/Quint** - The strength of the curve (higher = more dramatic)
diff --git a/src/Types.ts b/src/Types.ts
index e2f1242..861ea98 100644
--- a/src/Types.ts
+++ b/src/Types.ts
@@ -14,13 +14,13 @@ export interface JumpOptions {
   /** Callback function to execute after scroll completes */
   readonly callback?: () => void;
 
-  /** Easing function name (default: 'easeInOutQuad') */
-  readonly easing?: (
-    t: number,
-    b: number,
-    c: number,
-    d: number
-  ) => number | string;
+  /**
+   * Easing function name (default: 'easeInOutQuad')
+   * Valid values: 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic',
+   * 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart',
+   * 'easeInQuint', 'easeOutQuint', 'easeInOutQuint'
+   */
+  readonly easing?: string;
 
   /** Whether to focus the element for accessibility (default: false) */
   readonly a11y?: boolean;
diff --git a/src/components/VTour.vue b/src/components/VTour.vue
index 93e39a7..6eca314 100644
--- a/src/components/VTour.vue
+++ b/src/components/VTour.vue
@@ -8,6 +8,7 @@ import type {
   VTourData,
   VTourExposedMethods,
 } from '../Types';
+import { easeInOutQuad, easingFunctions } from '../easing';
 
 // Props with defaults
 const props = withDefaults(defineProps<VTourProps>(), {
@@ -94,8 +95,6 @@ let previousFocus: HTMLElement | null = null;
 const DEFAULT_JUMP_OPTIONS = {
   duration: 500,
   offset: -100,
-  easing: 'easeInOutQuad' as const,
-  a11y: false, // Note: This is overridden by props.enableA11y in the merge at line 369
 };
 
 // Helper to check if tour was completed and saved to localStorage
@@ -106,6 +105,11 @@ const isTourCompleted = (): boolean => {
 const startTour = async (): Promise<void> => {
   if (isTourCompleted()) return;
 
+  // If tour is already active, do nothing (prevents restart)
+  if (tourVisible.value) {
+    return;
+  }
+
   if (props.saveToLocalStorage === 'step') {
     const savedStep = localStorage.getItem(saveKey.value);
     currentStepIndex.value = parseInt(savedStep || '0', 10);
@@ -360,17 +364,26 @@ const updatePosition = async (): Promise<void> => {
   // Scroll to target first if needed
   if (!props.noScroll && !currentStepData.noScroll) {
     await new Promise<void>((resolve) => {
-      // Merge default options with global and step-specific options
-      // Priority: step options > global options > enableA11y prop > defaults
-      const scrollOptions = {
-        ...DEFAULT_JUMP_OPTIONS,
-        a11y: props.enableA11y, // Use enableA11y prop as default
+      // Merge jump options: step > global > defaults
+      const merged = {
+        duration: DEFAULT_JUMP_OPTIONS.duration,
+        offset: DEFAULT_JUMP_OPTIONS.offset,
+        easing: 'easeInOutQuad',
+        a11y: props.enableA11y,
         ...props.jumpOptions,
         ...currentStepData.jumpOptions,
-        callback: () => resolve(),
-      } as any; // jump.js has incomplete type definitions
+      };
+
+      // Map string easing name to function (jump.js requirement)
+      const easingFn = easingFunctions[merged.easing] || easeInOutQuad;
 
-      jump(targetElement, scrollOptions);
+      jump(targetElement, {
+        duration: merged.duration,
+        offset: merged.offset,
+        easing: easingFn,
+        a11y: merged.a11y,
+        callback: () => resolve(),
+      });
     });
   }
 
diff --git a/src/easing.ts b/src/easing.ts
new file mode 100644
index 0000000..6b8579e
--- /dev/null
+++ b/src/easing.ts
@@ -0,0 +1,101 @@
+// Robert Penner's easing functions
+// Credit: http://robertpenner.com/easing/
+// Ported for ES6 from: https://github.com/jaxgeller/ez.js
+
+export type EasingFunction = (
+  t: number,
+  b: number,
+  c: number,
+  d: number
+) => number;
+
+// Quadratic
+export const easeInQuad: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  return c * t * t + b;
+};
+
+export const easeOutQuad: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  return -c * t * (t - 2) + b;
+};
+
+export const easeInOutQuad: EasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) return (c / 2) * t * t + b;
+  t--;
+  return (-c / 2) * (t * (t - 2) - 1) + b;
+};
+
+// Cubic
+export const easeInCubic: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  return c * t * t * t + b;
+};
+
+export const easeOutCubic: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  t--;
+  return c * (t * t * t + 1) + b;
+};
+
+export const easeInOutCubic: EasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) return (c / 2) * t * t * t + b;
+  t -= 2;
+  return (c / 2) * (t * t * t + 2) + b;
+};
+
+// Quartic
+export const easeInQuart: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  return c * t * t * t * t + b;
+};
+
+export const easeOutQuart: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  t--;
+  return -c * (t * t * t * t - 1) + b;
+};
+
+export const easeInOutQuart: EasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) return (c / 2) * t * t * t * t + b;
+  t -= 2;
+  return (-c / 2) * (t * t * t * t - 2) + b;
+};
+
+// Quintic
+export const easeInQuint: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  return c * t * t * t * t * t + b;
+};
+
+export const easeOutQuint: EasingFunction = (t, b, c, d) => {
+  t /= d;
+  t--;
+  return c * (t * t * t * t * t + 1) + b;
+};
+
+export const easeInOutQuint: EasingFunction = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) return (c / 2) * t * t * t * t * t + b;
+  t -= 2;
+  return (c / 2) * (t * t * t * t * t + 2) + b;
+};
+
+// Map of easing function names to implementations
+export const easingFunctions: Record<string, EasingFunction> = {
+  easeInQuad,
+  easeOutQuad,
+  easeInOutQuad,
+  easeInCubic,
+  easeOutCubic,
+  easeInOutCubic,
+  easeInQuart,
+  easeOutQuart,
+  easeInOutQuart,
+  easeInQuint,
+  easeOutQuint,
+  easeInOutQuint,
+};
diff --git a/test/components/VTour.jumpOptions.spec.ts b/test/components/VTour.jumpOptions.spec.ts
index b510354..89c8a2b 100644
--- a/test/components/VTour.jumpOptions.spec.ts
+++ b/test/components/VTour.jumpOptions.spec.ts
@@ -47,7 +47,7 @@ describe('VTour Component - Jump Options', () => {
     // Should use default values (a11y follows enableA11y prop which defaults to true via mountVTour)
     expect(callArgs.duration).toBe(500);
     expect(callArgs.offset).toBe(-100);
-    expect(callArgs.easing).toBe('easeInOutQuad');
+    expect(typeof callArgs.easing).toBe('function'); // Should be easeInOutQuad function
     expect(callArgs.a11y).toBe(true); // mountVTour defaults enableA11y to true
 
     wrapper.unmount();
@@ -73,7 +73,7 @@ describe('VTour Component - Jump Options', () => {
     expect(callArgs.duration).toBe(1000);
     expect(callArgs.offset).toBe(-200);
     expect(callArgs.a11y).toBe(true);
-    expect(callArgs.easing).toBe('easeInOutQuad'); // Default still applies
+    expect(typeof callArgs.easing).toBe('function'); // Default easeInOutQuad
 
     wrapper.unmount();
   });
@@ -109,7 +109,7 @@ describe('VTour Component - Jump Options', () => {
     expect(callArgs.duration).toBe(300);
     expect(callArgs.offset).toBe(-50);
     expect(callArgs.a11y).toBe(true); // From global
-    expect(callArgs.easing).toBe('easeInOutQuad'); // From default
+    expect(typeof callArgs.easing).toBe('function'); // Default easeInOutQuad
 
     wrapper.unmount();
   });
@@ -131,16 +131,12 @@ describe('VTour Component - Jump Options', () => {
     wrapper.unmount();
   });
 
-  it('should support custom easing function', async () => {
-    const customEasing = (t: number, b: number, c: number, d: number) => {
-      return (c * t) / d + b;
-    };
-
+  it('should support different easing names', async () => {
     const wrapper = mountVTour({
       steps,
       noScroll: false,
       jumpOptions: {
-        easing: customEasing,
+        easing: 'easeInCubic',
       },
     });
 
@@ -149,8 +145,8 @@ describe('VTour Component - Jump Options', () => {
     expect(jump).toHaveBeenCalled();
     const callArgs = (jump as any).mock.calls[0][1];
 
-    // Should use custom easing function
-    expect(callArgs.easing).toBe(customEasing);
+    // Should map string to easing function
+    expect(typeof callArgs.easing).toBe('function');
 
     wrapper.unmount();
   });
@@ -179,4 +175,26 @@ describe('VTour Component - Jump Options', () => {
 
     wrapper2.unmount();
   });
+
+  it('should not override default easing with undefined values', async () => {
+    const wrapper = mountVTour({
+      steps,
+      noScroll: false,
+      jumpOptions: {
+        duration: 1000,
+        // easing is undefined, should use default 'easeInOutQuad'
+      } as any,
+    });
+
+    await startAndWaitReady(wrapper);
+
+    expect(jump).toHaveBeenCalled();
+    const callArgs = (jump as any).mock.calls[0][1];
+
+    // Should still have the default easing function, not undefined
+    expect(typeof callArgs.easing).toBe('function');
+    expect(callArgs.duration).toBe(1000); // Custom duration should be applied
+
+    wrapper.unmount();
+  });
 });
diff --git a/test/components/VTour.spec.ts b/test/components/VTour.spec.ts
index d9e0136..a963b61 100644
--- a/test/components/VTour.spec.ts
+++ b/test/components/VTour.spec.ts
@@ -180,6 +180,29 @@ describe('VTour Component - Comprehensive Test Suite', () => {
       expect(wrapper.vm.lastStepIndex).toBe(0);
     });
 
+    it('should not restart tour if already active', async () => {
+      // Start the tour properly with all async operations
+      await startAndWaitReady(wrapper);
+
+      expect(wrapper.vm.tourVisible).toBe(true);
+      expect(wrapper.vm.currentStepIndex).toBe(0);
+
+      // Navigate to step 2
+      await wrapper.vm.goToStep(2);
+      await flushVue();
+
+      expect(wrapper.vm.currentStepIndex).toBe(2);
+      expect(wrapper.vm.tourVisible).toBe(true);
+
+      // Try to start tour again while it's active
+      await wrapper.vm.startTour();
+      await flushVue();
+
+      // Tour should remain at step 2, not restart at step 0
+      expect(wrapper.vm.currentStepIndex).toBe(2);
+      expect(wrapper.vm.tourVisible).toBe(true);
+    });
+
     it('should navigate through steps', async () => {
       // Start from known state
       wrapper.vm.currentStepIndex = 0;

From d9510dfc31ef1d8edf983c294978da55200e37ab Mon Sep 17 00:00:00 2001
From: GlobalHive <support@globalhive.de>
Date: Thu, 6 Nov 2025 14:29:16 +0100
Subject: [PATCH 12/13] docs: Added/Updated documentation

---
 README.md                   | 29 -----------------------------
 docs/.vitepress/config.ts   |  4 +++-
 docs/guide/accessibility.md |  2 +-
 docs/guide/roadmap.md       | 14 +++++++++++---
 src/style/_variables.scss   |  2 +-
 5 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 7d1a448..e57237f 100644
--- a/README.md
+++ b/README.md
@@ -33,35 +33,6 @@
 > Looking for a nuxt version?
 > [Nuxt version (Special thanks to BayBreezy)](https://github.com/BayBreezy/nuxt-tour)
 
-> [!CAUTION]
-> As of version 2.0.1, VueJS Tour has been rewritten in TypeScript. The `VTour` component is now a named export and must be imported as such.
-> Please refer to the [Documentation](https://globalhive.github.io/vuejs-tour/) for more information on how to use VueJS Tour.
-
-<br><br><br><br>
-<ins>If you still want to use the old version, then this is the correct way to install it:</ins>
-
-* Step 1: Go to your project directory and install VueJS Tour using npm:
-
-```bash
-cd my-project
-npm install @globalhive/vuejs-tour
-```
-
-* Step 2: Import the plugin in your application entry point (typically `main.js`):
-
-```javascript
-import { createApp } from "vue";
-import App from "./App.vue";
-import VueJsTour from '@globalhive/vuejs-tour';
-import '@globalhive/vuejs-tour/dist/style.css';
-
-const app = createApp(App)
-  .use(VueJsTour)
-  .mount("#app");
-```
-Everything is ready! Now you can use VueJS Tour in your application.<br>
-Make sure to check out the [documentation](https://globalhive.github.io/vuejs-tour/) for more information.
-
 ## Create a tour
 
 Add the VueJS Tour component anywhere in your app. It is recommended to add it to `App.vue`
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index c809a2e..b3f95c7 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -19,7 +19,7 @@ export default defineConfig({
     nav: [
       { text: 'Guide', link: '/guide/what-is-vuejs-tour' },
       {
-        text: '2.4.3',
+        text: '2.5.0',
         items: [
           {
             text: 'Changelog',
@@ -98,6 +98,8 @@ export default defineConfig({
             { text: 'Skipping a Tour', link: '/guide/skipping-a-tour' },
             { text: 'Button Labels', link: '/guide/button-labels' },
             { text: 'Multiple Tours', link: '/guide/multiple-tours' },
+            { text: 'Jump Options', link: '/guide/jump-options' },
+            { text: 'Accessibility', link: '/guide/accessibility' },
             {
               text: 'Styling',
               items: [
diff --git a/docs/guide/accessibility.md b/docs/guide/accessibility.md
index 1fa8236..4a242f2 100644
--- a/docs/guide/accessibility.md
+++ b/docs/guide/accessibility.md
@@ -4,7 +4,7 @@
 
 VueJS Tour now includes comprehensive WCAG 2.1 AA accessibility features, including keyboard navigation, ARIA attributes, focus management, and screen reader support.
 
-**⚠️ Note:** Accessibility features are **disabled by default** (as of v2.4.3) pending further testing and validation. Enable them by setting `enableA11y: true` on the component.
+**⚠️ Note:** Accessibility features are **disabled by default** (as of v2.5.0) pending further testing and validation. Enable them by setting `enableA11y: true` on the component.
 
 ## Implemented Accessibility Features
 
diff --git a/docs/guide/roadmap.md b/docs/guide/roadmap.md
index b92ea41..221dc9d 100644
--- a/docs/guide/roadmap.md
+++ b/docs/guide/roadmap.md
@@ -5,10 +5,18 @@
 🚧 = In Progress
 
 
-## 2.4.0 (TBA) 🚧
+## 2.5.0 (2025-11-06) ✔️
+Special thanks to @AdamDrewsTR
 
-* **Step:** Adding `arrow️` option
-* **VTour:** Adding `showProgress` prop
+### Features
+
+* **VTour:** Adding `jumpOptions` prop ✔️
+* **VTour:** Adding accessibility ✔️
+
+### Documentation
+
+* **Documentation:** Adding [Jump Options](/guide/jump-options) page ✔️
+* **Documentation:** Adding [Accessibility](/guide/accessibility) page ✔️
 
 ## 2.2.0 [2.3.0] (2024-08-13) [Delayed: 23.09.2024] ✔️
 
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
index ec94adc..9a976ee 100644
--- a/src/style/_variables.scss
+++ b/src/style/_variables.scss
@@ -11,7 +11,7 @@ $vjt__highlight_outline_radius: 1px !default;
 $vjt__highlight_outline: 2px solid $vjt__highlight_color !default;
 $vjt__action_button_color: #fff !default;
 $vjt__action_button_font_size: 13px !default;
-$vjt__action_button_color_hover: #000 !default;
+$vjt__action_button_color_hover: #fff !default;
 $vjt__action_button_padding: 4px 16px !default;
 $vjt__action_button_border_radius: 4px !default;
 $vjt__action_button_background_hover: #000 !default;

From ba4c32d5eda2b0208f5a611d7a8c854e83ecefaf Mon Sep 17 00:00:00 2001
From: GlobalHive <support@globalhive.de>
Date: Thu, 6 Nov 2025 14:34:19 +0100
Subject: [PATCH 13/13] chore: release 2.5.0

Release-As: 2.5.0