@glowhop/core-tour 1.3.0 → 1.4.0

package/index.js

@@ -12,17 +12,6 @@ function cloneStepProps(props) {
       ...props.popover,
       animation: props.popover.animation && { ...props.popover.animation },
       arrow: props.popover.arrow && { ...props.popover.arrow },
-      keyboardShortcuts: props.popover.keyboardShortcuts && {
-        previous: props.popover.keyboardShortcuts.previous && [
-          ...props.popover.keyboardShortcuts.previous
-        ],
-        advance: props.popover.keyboardShortcuts.advance && [
-          ...props.popover.keyboardShortcuts.advance
-        ],
-        cancel: props.popover.keyboardShortcuts.cancel && [
-          ...props.popover.keyboardShortcuts.cancel
-        ]
-      },
       placementTryOrder: props.popover.placementTryOrder && [...props.popover.placementTryOrder]
     },
     indicator: props.indicator && {
@@ -31,9 +20,29 @@ function cloneStepProps(props) {
       placementTryOrder: props.indicator.placementTryOrder && [
         ...props.indicator.placementTryOrder
       ]
-    }
+    },
+    behavior: props.behavior && {
+      ...props.behavior,
+      missingTarget: props.behavior.missingTarget && { ...props.behavior.missingTarget },
+      scroll: props.behavior.scroll && { ...props.behavior.scroll }
+    },
+    controls: cloneControls(props.controls),
+    classNames: cloneClassNames(props.classNames)
   };
 }
+function cloneControls(controls) {
+  return controls && Object.freeze({
+    previous: cloneControl(controls.previous),
+    advance: cloneControl(controls.advance),
+    cancel: cloneControl(controls.cancel)
+  });
+}
+function cloneControl(control) {
+  return control && Object.freeze({ state: control.state, keys: control.keys && Object.freeze([...control.keys]) });
+}
+function cloneClassNames(classNames) {
+  return classNames && Object.freeze({ ...classNames });
+}
 function freezeStepProps(props) {
   const cloned = cloneStepProps(props);
   if (cloned.data)
@@ -46,14 +55,6 @@ function freezeStepProps(props) {
     Object.freeze(cloned.popover.animation);
   if (cloned.popover?.arrow)
     Object.freeze(cloned.popover.arrow);
-  if (cloned.popover?.keyboardShortcuts?.previous)
-    Object.freeze(cloned.popover.keyboardShortcuts.previous);
-  if (cloned.popover?.keyboardShortcuts?.advance)
-    Object.freeze(cloned.popover.keyboardShortcuts.advance);
-  if (cloned.popover?.keyboardShortcuts?.cancel)
-    Object.freeze(cloned.popover.keyboardShortcuts.cancel);
-  if (cloned.popover?.keyboardShortcuts)
-    Object.freeze(cloned.popover.keyboardShortcuts);
   if (cloned.popover?.placementTryOrder)
     Object.freeze(cloned.popover.placementTryOrder);
   if (cloned.popover)
@@ -64,6 +65,12 @@ function freezeStepProps(props) {
     Object.freeze(cloned.indicator.placementTryOrder);
   if (cloned.indicator)
     Object.freeze(cloned.indicator);
+  if (cloned.behavior?.missingTarget)
+    Object.freeze(cloned.behavior.missingTarget);
+  if (cloned.behavior?.scroll)
+    Object.freeze(cloned.behavior.scroll);
+  if (cloned.behavior)
+    Object.freeze(cloned.behavior);
   return Object.freeze(cloned);
 }
 // packages/core/src/definition/workflow-definition.ts
@@ -84,11 +91,6 @@ function freezePopover(options) {
     ...options,
     animation: freezeAnimation(options.animation),
     arrow: options.arrow && freezeRecord({ ...options.arrow }),
-    keyboardShortcuts: options.keyboardShortcuts && freezeRecord({
-      previous: options.keyboardShortcuts.previous && freezeRecord([...options.keyboardShortcuts.previous]),
-      advance: options.keyboardShortcuts.advance && freezeRecord([...options.keyboardShortcuts.advance]),
-      cancel: options.keyboardShortcuts.cancel && freezeRecord([...options.keyboardShortcuts.cancel])
-    }),
     placementTryOrder: options.placementTryOrder && freezeRecord([...options.placementTryOrder])
   });
 }
@@ -103,17 +105,11 @@ function freezeStep(draft) {
   return freezeRecord({
     id: draft.id,
     target: draft.target,
-    resetPropsOnEnter: draft.resetPropsOnEnter,
     props: freezeStepProps(draft.props),
-    behavior: draft.behavior && freezeRecord({
-      ...draft.behavior,
-      scroll: draft.behavior.scroll && freezeRecord({ ...draft.behavior.scroll })
-    }),
     actions: freezeRecord(draft.actions.map((action) => action)),
-    eventHandlers: freezeRecord(draft.eventHandlers.map((handler) => freezeRecord({ ...handler }))),
-    advanceAction: draft.advanceAction,
-    previousAction: draft.previousAction,
-    cancelAction: draft.cancelAction
+    targetEvents: freezeRecord(draft.targetEvents.map((handler) => freezeRecord({ ...handler }))),
+    beforeEnter: draft.beforeEnter,
+    beforeLeave: draft.beforeLeave
   });
 }
 function freezeOptions(options) {
@@ -122,8 +118,11 @@ function freezeOptions(options) {
     overlay: freezeOverlay(options.overlay),
     popover: freezePopover(options.popover),
     indicator: freezeIndicator(options.indicator),
+    classNames: cloneClassNames(options.classNames),
+    controls: cloneControls(options.controls),
     behavior: options.behavior && freezeRecord({
       ...options.behavior,
+      missingTarget: options.behavior.missingTarget && freezeRecord({ ...options.behavior.missingTarget }),
       scroll: options.behavior.scroll && freezeRecord({ ...options.behavior.scroll })
     })
   });
@@ -133,7 +132,7 @@ function cloneWorkflowStepDraft(definition) {
     ...definition,
     props: cloneStepProps(definition.props),
     actions: definition.actions.map((action) => action),
-    eventHandlers: [...definition.eventHandlers]
+    targetEvents: [...definition.targetEvents]
   };
 }
 function assertUniqueStepIds(name, drafts) {
@@ -246,21 +245,21 @@ class WorkflowBuilder {
     this.currentStep = new WorkflowStepBuilder(this, {
       id: options.id,
       target: options.target,
-      resetPropsOnEnter: options.resetPropsOnEnter,
       props: {
         title: options.title,
         content: options.content,
         data: cloneStepProps(options).data,
         overlay: options.overlay,
         popover: options.popover,
-        indicator: options.indicator
+        indicator: options.indicator,
+        behavior: options.behavior,
+        controls: options.controls,
+        classNames: options.classNames
       },
-      behavior: options.behavior,
       actions: [],
-      eventHandlers: [],
-      advanceAction: null,
-      previousAction: null,
-      cancelAction: null
+      targetEvents: [],
+      beforeEnter: null,
+      beforeLeave: null
     });
     return this.currentStep;
   }
@@ -364,19 +363,14 @@ class WorkflowStepBuilder {
     this.draft.actions.push(callback);
     return this;
   }
-  beforeAdvance(callback) {
-    this.assertActive();
-    this.draft.advanceAction = callback;
-    return this;
-  }
-  beforePrevious(callback) {
+  beforeEnter(callback) {
     this.assertActive();
-    this.draft.previousAction = callback;
+    this.draft.beforeEnter = callback;
     return this;
   }
-  beforeCancel(callback) {
+  beforeLeave(callback) {
     this.assertActive();
-    this.draft.cancelAction = callback;
+    this.draft.beforeLeave = callback;
     return this;
   }
   onTargetEvent(eventOrEvents, callback) {
@@ -387,7 +381,7 @@ class WorkflowStepBuilder {
     for (const event of events) {
       if (event.length === 0)
         throw new TypeError("event name must not be empty");
-      this.draft.eventHandlers.push({
+      this.draft.targetEvents.push({
         event,
         callback
       });
@@ -504,6 +498,7 @@ class GlowTourElement {
   element;
   options;
   animations = new Set;
+  filledAnimations = new Set;
   cancelledAnimations = new WeakSet;
   released = false;
   constructor(element, options) {
@@ -568,13 +563,23 @@ class GlowTourElement {
     } finally {
       stopWatchingVisibility();
       this.animations.delete(animation);
+      const fill = animation.effect?.getTiming?.().fill;
+      if (!this.released && !this.cancelledAnimations.has(animation) && (fill === "forwards" || fill === "both")) {
+        this.filledAnimations.add(animation);
+      }
     }
   }
+  _releaseFilledAnimations() {
+    for (const animation of this.filledAnimations) {
+      this._cancelAnimation(animation);
+    }
+    this.filledAnimations.clear();
+  }
   getElement() {
     return this.released ? null : this.element;
   }
-  disappear() {
-    return this._disappear();
+  disappear(hideFromAssistiveTechnology) {
+    return this._disappear(hideFromAssistiveTechnology);
   }
   release() {
     if (this.released)
@@ -588,6 +593,7 @@ class GlowTourElement {
       this._cancelAnimation(animation);
     }
     this.animations.clear();
+    this._releaseFilledAnimations();
   }
   _cancelAnimation(animation) {
     this.cancelledAnimations.add(animation);
@@ -733,7 +739,7 @@ class OverlayElement extends GlowTourElement {
   }
   _cutoutPath(position, step) {
     return `path("${roundedRectPath(position, paintedBoxDimensions(this.element), {
-      padding: step.overlay?.padding ?? DEFAULT_OVERLAY_PADDING,
+      padding: step.detached ? 0 : step.overlay?.padding ?? DEFAULT_OVERLAY_PADDING,
       radius: step.overlay?.radius ?? DEFAULT_OVERLAY_RADIUS
     }, this.element)}")`;
   }
@@ -1438,7 +1444,7 @@ class PopoverElement extends GlowTourElement {
       };
     }
     const gap = Math.max(0, step.popover?.gap ?? DEFAULT_POPOVER_GAP);
-    const arrowDisabled = step.popover?.arrow?.disabled === true;
+    const arrowDisabled = step.popover?.arrow?.hidden === true;
     const arrowEdgePadding = step.popover?.arrow?.edgePadding ?? DEFAULT_ARROW_EDGE_PADDING;
     const popoverPosition = currentElement.getBoundingClientRect();
     const viewport = viewportDimensions(currentElement);
@@ -1448,7 +1454,7 @@ class PopoverElement extends GlowTourElement {
     const maxY = viewport.height - gap - popoverPosition.height;
     const targetCenterX = targetPosition.left + targetPosition.width / 2;
     const targetCenterY = targetPosition.top + targetPosition.height / 2;
-    if (maxX < minX || maxY < minY) {
+    if (step.detached || maxX < minX || maxY < minY) {
       return this._centerPosition(popoverPosition, viewport);
     }
     const centeredX = targetCenterX - popoverPosition.width / 2;
@@ -1517,7 +1523,7 @@ class PopoverElement extends GlowTourElement {
   async present(nextPosition, step) {
     await this._appear(nextPosition, step);
   }
-  initializeProps() {
+  initializeProps(hideFromAssistiveTechnology = true) {
     const el = this.getElement();
     if (!el) {
       return;
@@ -1528,8 +1534,12 @@ class PopoverElement extends GlowTourElement {
     if (!el.hasAttribute("tabindex")) {
       this.mutationLease.setAttribute("tabindex", POPOVER_IDLE_ATTRIBUTES.tabindex);
     }
-    this.mutationLease.setAttribute("aria-hidden", POPOVER_IDLE_ATTRIBUTES["aria-hidden"]);
-    this.mutationLease.setAttribute("inert", POPOVER_IDLE_ATTRIBUTES.inert);
+    if (hideFromAssistiveTechnology) {
+      this.mutationLease.setAttribute("aria-hidden", POPOVER_IDLE_ATTRIBUTES["aria-hidden"]);
+      this.mutationLease.setAttribute("inert", POPOVER_IDLE_ATTRIBUTES.inert);
+    } else {
+      this.mutationLease.setStyle("pointer-events", "none");
+    }
   }
   updatePosition(nextPosition, step, onReposition) {
     const nextCoordinates = this.resolvePosition(nextPosition, step);
@@ -1578,7 +1588,7 @@ class PopoverElement extends GlowTourElement {
         let pending = this.pendingReposition;
         this.pendingReposition = null;
         this.repositionPhase = "fading-out";
-        await this._disappear();
+        await this._disappear(false);
         if (generation !== this.repositionGeneration || !this.getElement())
           return;
         pending = this.pendingReposition ?? pending;
@@ -1615,7 +1625,7 @@ class PopoverElement extends GlowTourElement {
   _applyArrowStyles(step) {
     const arrow = step.popover?.arrow;
     ensurePopoverArrowStyles(this.element, {
-      disabled: arrow?.disableAutoStyles,
+      disabled: arrow?.autoStyles === false,
       nonce: arrow?.styleNonce
     });
     this._applyArrowStyle(ARROW_STYLE_PROPERTIES.color, arrow?.color);
@@ -1633,6 +1643,7 @@ class PopoverElement extends GlowTourElement {
     }
   }
   async _appear(position, step) {
+    this._releaseFilledAnimations();
     const defaultStyles = this._getNextStyles(position, step);
     for (const [key, value] of Object.entries(defaultStyles)) {
       if (value != null)
@@ -1647,27 +1658,36 @@ class PopoverElement extends GlowTourElement {
       return;
     this._applyVisibleState();
   }
-  async _disappear() {
+  async _disappear(hideFromAssistiveTechnology = true) {
+    this._releaseFilledAnimations();
     const animation = this._startAnimation({
       opacity: 0
     }, this._getAnimationOptions());
     if (animation && !await this._waitForAnimation(animation))
       return;
-    this._applyHiddenState();
+    if (hideFromAssistiveTechnology)
+      this._applyHiddenState();
+    else
+      this._applyFadedState();
   }
   _release() {
     this.mutationLease.release();
   }
   _applyVisibleState() {
     this.mutationLease.setStyle("opacity", "1");
+    this.mutationLease.releaseStyle("pointer-events");
     this.mutationLease.setAttribute("aria-hidden", null);
     this.mutationLease.setAttribute("inert", null);
   }
-  _applyHiddenState() {
+  _applyFadedState() {
     this.mutationLease.setStyle("opacity", "0");
+    this.mutationLease.setStyle("pointer-events", "none");
+    this.mutationLease.setStyle("transform", null);
+  }
+  _applyHiddenState() {
+    this._applyFadedState();
     this.mutationLease.setAttribute("aria-hidden", "true");
     this.mutationLease.setAttribute("inert", "true");
-    this.mutationLease.setStyle("transform", null);
   }
 }
 function toPixels(value) {
@@ -1750,15 +1770,18 @@ class FocusGuard {
       this.deactivate();
     if (!this.active) {
       this.document = document2;
-      this.initialFocus = isHTMLElement(this.document.activeElement, scope.popover) ? this.document.activeElement : null;
+      this.captureInitialFocus(scope.popover);
       this.document.addEventListener("focusin", this.handleFocusIn, true);
       this.active = true;
     }
     this.update(scope);
+    if (scope.autoFocus === false)
+      return;
     const currentFocus = this.document?.activeElement;
-    if (scope.autoFocus !== false || !isNode(currentFocus, scope.popover) || !this.isAllowed(currentFocus)) {
-      this.focusFallback();
+    if (scope.deferFocus && isNode(currentFocus, scope.popover) && this.isAllowed(currentFocus)) {
+      return;
     }
+    this.focusFallback();
   }
   update(scope) {
     this.popover = scope.popover;
@@ -1771,10 +1794,23 @@ class FocusGuard {
     if (this.active)
       this.focusFallback();
   }
-  deactivate() {
-    if (!this.active) {
+  captureInitialFocus(reference, pending) {
+    if (this.active || this.initialFocus)
       return;
+    const activeElement = pending ?? ownerDocument(reference)?.activeElement;
+    this.initialFocus = isHTMLElement(activeElement, reference) ? activeElement : null;
+  }
+  deactivate() {
+    const focusToRestore = this.release();
+    if (focusToRestore?.isConnected) {
+      focusToRestore.focus();
     }
+  }
+  release() {
+    const focusToRestore = this.initialFocus;
+    this.initialFocus = null;
+    if (!this.active)
+      return null;
     this.document?.removeEventListener("focusin", this.handleFocusIn, true);
     this.document = null;
     this.active = false;
@@ -1782,11 +1818,7 @@ class FocusGuard {
     this.allowedTarget = null;
     this.allowTargetInteraction = false;
     this.restoreFallback();
-    const focusToRestore = this.initialFocus;
-    this.initialFocus = null;
-    if (focusToRestore?.isConnected) {
-      focusToRestore.focus();
-    }
+    return focusToRestore;
   }
   isAllowed(target) {
     if (target === this.fallback)
@@ -1825,8 +1857,8 @@ class FocusGuard {
   }
   findFocusable(root, direction) {
     const candidates = focusableTourControls(root);
-    const selector = direction === "advance" ? "[data-glow-tour-advance-trigger]" : "[data-glow-tour-previous-trigger]";
-    return candidates.find((candidate) => candidate.matches(selector)) ?? null;
+    const find = (trigger) => candidates.find((candidate) => candidate.matches(`[data-glow-tour-${trigger}-trigger]`));
+    return direction === "previous" && find("previous") || find("advance") || null;
   }
 }
 function belongsToScope(target, scope) {
@@ -1891,6 +1923,149 @@ class ScrollLock {
   }
 }
 
+// packages/core/src/utils/options.ts
+function mergeStepProps(base, patch) {
+  return {
+    ...base,
+    ...patch,
+    data: patch.data ? { ...base.data, ...patch.data } : base.data,
+    overlay: mergeOverlayOptions(base.overlay, patch.overlay),
+    popover: mergePopoverOptions(base.popover, patch.popover),
+    indicator: mergeIndicatorOptions(base.indicator, patch.indicator),
+    behavior: mergeStepBehavior(base.behavior, patch.behavior),
+    controls: mergeControls(base.controls, patch.controls),
+    classNames: mergeClassNames(base.classNames, patch.classNames)
+  };
+}
+function mergeClassNames(base, patch) {
+  if (!patch)
+    return base;
+  const merged = { ...base };
+  for (const slot in patch) {
+    const key = slot;
+    merged[key] = patch[key] ?? merged[key];
+  }
+  return merged;
+}
+function mergeOverlayOptions(defaults, overrides) {
+  if (!defaults && !overrides) {
+    return;
+  }
+  return {
+    ...mergeBaseOptions(defaults, overrides),
+    color: overrides?.color ?? defaults?.color,
+    opacity: overrides?.opacity ?? defaults?.opacity,
+    padding: overrides?.padding ?? defaults?.padding,
+    radius: overrides?.radius ?? defaults?.radius
+  };
+}
+function mergeIndicatorOptions(defaults, overrides) {
+  if (!defaults && !overrides) {
+    return;
+  }
+  return {
+    ...mergeBaseOptions(defaults, overrides),
+    hidden: overrides?.hidden ?? defaults?.hidden,
+    gap: overrides?.gap ?? defaults?.gap,
+    placementTryOrder: cloneArray(overrides?.placementTryOrder ?? defaults?.placementTryOrder)
+  };
+}
+function mergePopoverOptions(defaults, overrides) {
+  if (!defaults && !overrides) {
+    return;
+  }
+  const placementTryOrder = overrides?.placementTryOrder ?? defaults?.placementTryOrder;
+  const hasArrow = !!defaults?.arrow || !!overrides?.arrow;
+  return {
+    ...mergeBaseOptions(defaults, overrides),
+    arrow: hasArrow ? {
+      hidden: overrides?.arrow?.hidden ?? defaults?.arrow?.hidden,
+      color: overrides?.arrow?.color ?? defaults?.arrow?.color,
+      size: overrides?.arrow?.size ?? defaults?.arrow?.size,
+      borderWidth: overrides?.arrow?.borderWidth ?? defaults?.arrow?.borderWidth,
+      borderRadius: overrides?.arrow?.borderRadius ?? defaults?.arrow?.borderRadius,
+      edgePadding: overrides?.arrow?.edgePadding ?? defaults?.arrow?.edgePadding,
+      styleNonce: overrides?.arrow?.styleNonce ?? defaults?.arrow?.styleNonce,
+      autoStyles: overrides?.arrow?.autoStyles ?? defaults?.arrow?.autoStyles
+    } : undefined,
+    gap: overrides?.gap ?? defaults?.gap,
+    placementTryOrder: cloneArray(placementTryOrder)
+  };
+}
+function mergeScrollOptions(defaults, overrides) {
+  if (!defaults && !overrides) {
+    return;
+  }
+  return {
+    behavior: overrides?.behavior ?? defaults?.behavior,
+    block: overrides?.block ?? defaults?.block,
+    inline: overrides?.inline ?? defaults?.inline
+  };
+}
+function mergeAnimationOptions(defaults, overrides) {
+  if (!defaults) {
+    return overrides ? { ...overrides } : undefined;
+  }
+  if (!overrides) {
+    return { ...defaults };
+  }
+  return {
+    duration: overrides.duration ?? defaults.duration,
+    easing: overrides.easing ?? defaults.easing
+  };
+}
+function mergeBaseOptions(defaults, overrides) {
+  return {
+    animated: overrides?.animated ?? defaults?.animated,
+    animation: mergeAnimationOptions(defaults?.animation, overrides?.animation)
+  };
+}
+function mergeStepBehavior(defaults, overrides) {
+  if (!defaults && !overrides) {
+    return;
+  }
+  return {
+    allowInteraction: overrides?.allowInteraction ?? defaults?.allowInteraction,
+    allowScroll: overrides?.allowScroll ?? defaults?.allowScroll,
+    autoFocus: overrides?.autoFocus ?? defaults?.autoFocus,
+    autoScroll: overrides?.autoScroll ?? defaults?.autoScroll,
+    missingTarget: mergeMissingTarget(defaults?.missingTarget, overrides?.missingTarget),
+    scroll: mergeScrollOptions(defaults?.scroll, overrides?.scroll),
+    overlayClick: overrides?.overlayClick ?? defaults?.overlayClick
+  };
+}
+function mergeControls(defaults, overrides) {
+  if (!defaults && !overrides)
+    return;
+  return {
+    previous: mergeControl(defaults?.previous, overrides?.previous),
+    advance: mergeControl(defaults?.advance, overrides?.advance),
+    cancel: mergeControl(defaults?.cancel, overrides?.cancel)
+  };
+}
+function mergeControl(defaults, overrides) {
+  if (!defaults && !overrides)
+    return;
+  return {
+    state: overrides?.state ?? defaults?.state,
+    keys: cloneArray(overrides?.keys ?? defaults?.keys)
+  };
+}
+function mergeMissingTarget(defaults, overrides) {
+  if (!defaults && !overrides)
+    return;
+  return {
+    strategy: overrides?.strategy ?? defaults?.strategy,
+    timeout: overrides?.timeout ?? defaults?.timeout
+  };
+}
+function cloneArray(value) {
+  return value ? [...value] : undefined;
+}
+function isControlAvailable(props, command) {
+  return props !== undefined && props.controls?.[command]?.state !== "disabled";
+}
+
 // packages/core/src/dom/tour-view-driver.ts
 var SCROLL_SETTLE_STILL_FRAMES = 2;
 var SCROLL_SETTLE_GRACE_FRAMES = 3;
@@ -1925,11 +2100,15 @@ class DomTourViewDriver {
   modalDocument = null;
   modalRoot = null;
   overlay = null;
-  pendingKeyboardCommand = null;
+  pendingCommand = null;
   pointer = null;
   pendingFocusGeneration = null;
+  handledTriggerClick = null;
   popover = null;
   presentationDirty = false;
+  focusToRestore = null;
+  appliedAllowInteraction = false;
+  pointerFading = false;
   rafId = null;
   rafCancel = null;
   root = null;
@@ -1990,7 +2169,7 @@ class DomTourViewDriver {
     const generation = this.beginGeneration();
     const removeAbort = this.cancelAnimationsOnAbort(signal);
     const replaceVisiblePopover = this.active && onBeforePopoverAppear !== undefined;
-    let removeTransitionKeydown = () => {};
+    let removeTransitionListeners = () => {};
     try {
       this.cleanupStepResources();
       this.throwIfStale(generation, signal);
@@ -2005,41 +2184,51 @@ class DomTourViewDriver {
       this.lastViewport = null;
       this.presentationDirty = false;
       this.awaitingStepUi = true;
-      if (replaceVisiblePopover) {
-        const listener = (event) => this.queueTransitionKeydown(event, step, generation);
-        const currentWindow = this.getWindow();
-        if (typeof currentWindow?.addEventListener === "function") {
-          currentWindow.addEventListener("keydown", listener);
-          removeTransitionKeydown = () => currentWindow.removeEventListener("keydown", listener);
-        }
+      const modal = !step.allowsInteraction();
+      if (modal)
+        this.claimModal();
+      const onKeydown = (event) => this.queueTransitionKeydown(event, step, generation, replaceVisiblePopover);
+      const onClick = (event) => {
+        if (replaceVisiblePopover)
+          this.queueTransitionClick(event, step, generation);
+      };
+      const currentWindow = this.getWindow();
+      if (typeof currentWindow?.addEventListener === "function") {
+        currentWindow.addEventListener("keydown", onKeydown);
+        currentWindow.addEventListener("click", onClick);
+        removeTransitionListeners = () => {
+          currentWindow.removeEventListener("keydown", onKeydown);
+          currentWindow.removeEventListener("click", onClick);
+        };
       }
       const target = step.target;
       if (!target)
         return;
       this.activeTarget = target;
-      this.syncModality(step.behavior?.allowInteraction === true);
+      this.focusGuard.captureInitialFocus(target, this.focusToRestore);
       const scrolling = this.beginTargetScroll(step, target, signal);
       this.throwIfStale(generation, signal);
-      this.initializeElements(step);
-      const resolveRect = () => target.getBoundingClientRect();
+      this.initializeElements(step, replaceVisiblePopover);
+      const resolveRect = () => presentationRect(step, target);
       await this.appear(resolveRect, step, generation, scrolling, replaceVisiblePopover, onBeforePopoverAppear);
       this.throwIfStale(generation, signal);
       const targetRect = resolveRect();
       this.lastTargetRect = snapshotRect(targetRect);
       this.lastViewport = snapshotViewport(target);
       this.active = true;
+      this.syncModality(step.allowsInteraction());
       this.activateFocus(step, target, direction, generation);
       this.syncScrollLock(step);
       this.throwIfStale(generation, signal);
-      removeTransitionKeydown();
-      removeTransitionKeydown = () => {};
+      removeTransitionListeners();
+      removeTransitionListeners = () => {};
       this.attachStepResources(step, target, generation, signal);
     } catch (error) {
       if (this.isCurrentGeneration(generation))
         this.releaseModality();
       throw error;
     } finally {
-      removeTransitionKeydown();
+      removeTransitionListeners();
       removeAbort();
     }
   }
@@ -2052,7 +2241,7 @@ class DomTourViewDriver {
     try {
       this.cleanupStepResources();
       this.releaseModality();
-      this.focusGuard.deactivate();
+      this.focusToRestore = this.focusGuard.release() ?? this.focusToRestore;
       this.scrollLock.deactivate();
       this.throwIfStale(generation, signal);
       this.active = false;
@@ -2064,16 +2253,19 @@ class DomTourViewDriver {
       this.currentSignal = null;
       this.lastTargetRect = null;
       this.lastViewport = null;
-      this.popover?.getElement()?.removeAttribute("aria-modal");
       await Promise.allSettled([
         this.overlay?.disappear() ?? Promise.resolve(),
         this.popover?.disappear() ?? Promise.resolve(),
         this.pointer?.disappear() ?? Promise.resolve()
       ]);
-      this.throwIfStale(generation, signal);
     } finally {
+      if (this.isCurrentGeneration(generation)) {
+        this.focusToRestore?.focus();
+        this.focusToRestore = null;
+      }
       removeAbort();
     }
+    this.throwIfStale(generation, signal);
   }
   releaseMount() {
     if (this.disposed)
@@ -2124,45 +2316,40 @@ class DomTourViewDriver {
     if (this.disposed || !step || !target || !targetRect || !signal)
       return;
     this.activeTarget = target;
-    this.initializeElements(step);
+    this.initializeElements(step, false);
     this.awaitingStepUi = true;
     await this.appear(() => targetRect, step, generation, null, false);
     this.throwIfStale(generation);
+    this.syncModality(step.allowsInteraction());
     this.activateFocus(step, target, this.direction, generation);
     this.syncScrollLock(step);
     this.throwIfStale(generation);
     this.attachStepResources(step, target, generation, signal);
   }
-  initializeElements(step) {
-    const interactionAllowed = step.behavior?.allowInteraction === true;
+  initializeElements(step, replaceVisiblePopover) {
+    const interactionAllowed = step.allowsInteraction();
     this.overlay?.initializeProps();
-    this.overlay?.setAnimationOptions(animationOptions(step, step.overlay, this.overlay.getElement()));
+    this.overlay?.setAnimationOptions(animationOptions(step, step.props.get().overlay, this.overlay.getElement()));
     this.overlay?.setInteractionAllowed(interactionAllowed);
-    this.popover?.initializeProps();
-    this.popover?.setAnimationOptions(animationOptions(step, step.popover, this.popover.getElement()));
-    const popover = this.popover?.getElement();
-    if (isHTMLElement(popover, this.root ?? popover) && !interactionAllowed)
-      popover.setAttribute("aria-modal", "true");
+    this.appliedAllowInteraction = interactionAllowed;
+    this.popover?.initializeProps(!replaceVisiblePopover);
+    this.popover?.setAnimationOptions(animationOptions(step, step.props.get().popover, this.popover.getElement()));
     this.pointer?.initializeProps();
-    this.pointer?.setAnimationOptions(animationOptions(step, step.indicator, this.pointer.getElement()));
+    this.pointer?.setAnimationOptions(animationOptions(step, step.props.get().indicator, this.pointer.getElement()));
   }
   syncModality(interactionAllowed) {
     if (interactionAllowed) {
       this.releaseModality();
       return;
     }
+    this.claimModal();
+    const popover = this.popover?.getElement();
+    if (isHTMLElement(popover, this.root ?? popover))
+      popover.setAttribute("aria-modal", "true");
     const root = this.root;
-    if (!root)
+    if (!root || this.modalRoot === root)
       return;
     const document2 = root.ownerDocument;
-    const owner = ACTIVE_MODAL_BY_DOCUMENT.get(document2);
-    if (owner && owner !== this.modalToken) {
-      throw new Error("GlowTour.js only supports one active modal tour per document");
-    }
-    ACTIVE_MODAL_BY_DOCUMENT.set(document2, this.modalToken);
-    this.modalDocument = document2;
-    if (this.modalRoot === root)
-      return;
     this.restoreInertBranches();
     this.modalRoot = root;
     let branch = root;
@@ -2179,6 +2366,17 @@ class DomTourViewDriver {
       branch = parent;
     }
   }
+  claimModal() {
+    const document2 = this.root?.ownerDocument;
+    if (!document2)
+      return;
+    const owner = ACTIVE_MODAL_BY_DOCUMENT.get(document2);
+    if (owner && owner !== this.modalToken) {
+      throw new Error("GlowTour.js only supports one active modal tour per document");
+    }
+    ACTIVE_MODAL_BY_DOCUMENT.set(document2, this.modalToken);
+    this.modalDocument = document2;
+  }
   releaseModality() {
     this.popover?.getElement()?.removeAttribute("aria-modal");
     this.restoreInertBranches();
@@ -2202,14 +2400,14 @@ class DomTourViewDriver {
   async appear(resolveRect, step, generation, scrolling, hadVisiblePopover, onBeforePopoverAppear) {
     const spotlightRect = resolveRect();
     const stepUi = this.presentStepUi(resolveRect, step, generation, scrolling, hadVisiblePopover, onBeforePopoverAppear);
-    const spotlight = this.overlay?.moveToTarget(spotlightRect, step, scrolling !== null);
+    const spotlight = this.overlay?.moveToTarget(spotlightRect, this.elementProps(step), scrolling !== null);
     if (scrolling)
       this.schedulePosition(generation);
     await Promise.all([spotlight ?? Promise.resolve(), stepUi]);
   }
   async presentStepUi(resolveRect, step, generation, scrolling, hadVisiblePopover, onBeforePopoverAppear) {
     if (hadVisiblePopover)
-      await this.popover?.disappear();
+      await this.popover?.disappear(false);
     if (onBeforePopoverAppear) {
       await onBeforePopoverAppear();
       this.syncControlState(step);
@@ -2223,12 +2421,15 @@ class DomTourViewDriver {
     await this.enterStepUi(resolveRect(), step);
   }
   enterStepUi(targetRect, step) {
-    const popoverPlacement = this.popover?.resolvePosition(targetRect, step).placement;
+    const popoverPlacement = this.popover?.resolvePosition(targetRect, this.elementProps(step)).placement;
     return Promise.all([
-      this.popover?.present(targetRect, step) ?? Promise.resolve(),
-      this.isPointerEnabled(step) ? this.pointer?.moveToTarget(targetRect, step, true, popoverPlacement) ?? Promise.resolve() : this.pointer?.disappear() ?? Promise.resolve()
+      this.popover?.present(targetRect, this.elementProps(step)) ?? Promise.resolve(),
+      this.presentPointer(targetRect, step, popoverPlacement) ?? Promise.resolve()
     ]);
   }
+  presentPointer(targetRect, step, popoverPlacement) {
+    return this.isPointerEnabled(step) ? this.pointer?.moveToTarget(targetRect, step.props.get(), true, popoverPlacement) : this.pointer?.disappear();
+  }
   attachStepResources(step, target, generation, signal) {
     let initialPropsNotification = true;
     this.stepCleanups.push(step.props.subscribe(() => {
@@ -2239,7 +2440,14 @@ class DomTourViewDriver {
         return;
       }
       this.presentationDirty = true;
+      this.syncScrollLock(step);
+      if (step.allowsInteraction() === this.appliedAllowInteraction)
+        return;
+      this.syncInteraction(step);
+      this.pointerFading = step.allowsInteraction() === this.appliedAllowInteraction;
     }));
+    if (step.allowsInteraction() !== this.appliedAllowInteraction)
+      this.syncInteraction(step);
     this.stepCleanups.push(this.commands?.subscribeCapabilities?.((active) => {
       if (!this.isCurrentGeneration(generation))
         return;
@@ -2249,7 +2457,7 @@ class DomTourViewDriver {
         this.focusGuard.focus();
       }
       if (active)
-        this.flushPendingKeyboardCommand(step, generation);
+        this.flushPendingCommand(step, generation);
     }) ?? (() => {}));
     this.attachTargetResources(step, target, generation, signal);
     const currentWindow = this.getWindow(target);
@@ -2271,14 +2479,22 @@ class DomTourViewDriver {
     this.schedulePosition(generation);
   }
   attachTargetResources(step, target, generation, signal) {
-    for (const handler of step.definition.eventHandlers) {
+    if (step.detached)
+      return;
+    for (const handler of step.definition.targetEvents) {
       const listener = (event) => {
         if (!this.isCurrentGeneration(generation))
           return;
         const context = Object.freeze({
           advance: () => this.commandForStep("advance", step, signal),
           cancel: () => this.commandForStep("cancel", step, signal),
+          goTo: async (id) => {
+            if (!signal.aborted && this.currentStep === step)
+              await this.commands?.goTo(id);
+          },
           previous: () => this.commandForStep("previous", step, signal),
+          direction: step.direction,
+          initialProps: step.initialProps,
           props: step.props,
           signal,
           target
@@ -2337,20 +2553,20 @@ class DomTourViewDriver {
         this.freezeForDisconnectedTarget(step, target, generation);
       return;
     }
-    const targetRect = target.getBoundingClientRect();
+    const targetRect = presentationRect(step, target);
     const targetSnapshot = snapshotRect(targetRect);
     const viewportSnapshot = snapshotViewport(target);
     const presentationChanged = this.presentationDirty;
     if (!presentationChanged && sameRect(targetSnapshot, this.lastTargetRect) && sameViewport(viewportSnapshot, this.lastViewport))
       return;
     if (presentationChanged) {
-      this.overlay?.setAnimationOptions(animationOptions(step, step.overlay, this.overlay.getElement()));
-      this.popover?.setAnimationOptions(animationOptions(step, step.popover, this.popover.getElement()));
-      this.pointer?.setAnimationOptions(animationOptions(step, step.indicator, this.pointer.getElement()));
+      this.overlay?.setAnimationOptions(animationOptions(step, step.props.get().overlay, this.overlay.getElement()));
+      this.popover?.setAnimationOptions(animationOptions(step, step.props.get().popover, this.popover.getElement()));
+      this.pointer?.setAnimationOptions(animationOptions(step, step.props.get().indicator, this.pointer.getElement()));
       this.syncControlState(step);
       this.syncShortcutLabels(step);
     }
-    this.overlay?.updatePosition(targetRect, step, presentationChanged, (transition) => this.observeDynamicOperation(transition, generation));
+    this.overlay?.updatePosition(targetRect, this.elementProps(step), presentationChanged, (transition) => this.observeDynamicOperation(transition, generation));
     if (!this.awaitingStepUi)
       this.trackStepUi(targetRect, step, generation, presentationChanged);
     this.lastTargetRect = targetSnapshot;
@@ -2359,15 +2575,18 @@ class DomTourViewDriver {
       this.presentationDirty = false;
   }
   trackStepUi(targetRect, step, generation, presentationChanged) {
-    const popoverPlacement = this.popover?.updatePosition(targetRect, step, (reposition) => this.observeDynamicOperation(reposition, generation));
+    const popoverPlacement = this.popover?.updatePosition(targetRect, this.elementProps(step), (reposition) => this.observeDynamicOperation(reposition, generation));
     if (presentationChanged) {
-      this.pointer?.syncVisibility(this.isPointerEnabled(step), targetRect, step, popoverPlacement);
+      if (this.pointerFading)
+        this.pointerFading = false;
+      else
+        this.pointer?.syncVisibility(this.isPointerEnabled(step), targetRect, step.props.get(), popoverPlacement);
     } else if (this.isPointerEnabled(step)) {
       const pointer = this.pointer?.getElement();
       if (pointer?.getAttribute("aria-hidden") === "true") {
-        this.observeDynamicOperation(this.pointer?.moveToTarget(targetRect, step, true, popoverPlacement), generation);
+        this.observeDynamicOperation(this.pointer?.moveToTarget(targetRect, step.props.get(), true, popoverPlacement), generation);
       } else {
-        this.pointer?.updatePosition(targetRect, step, popoverPlacement);
+        this.pointer?.updatePosition(targetRect, step.props.get(), popoverPlacement);
       }
     } else if (this.pointer?.getElement()?.getAttribute("aria-hidden") !== "true") {
       this.observeDynamicOperation(this.pointer?.disappear(), generation);
@@ -2389,70 +2608,75 @@ class DomTourViewDriver {
     const step = this.currentStep;
     if (!step || event.defaultPrevented || event.isComposing || event.ctrlKey || event.metaKey || event.altKey)
       return;
-    if (event.key === "Tab" && step.behavior?.allowInteraction !== true) {
+    if (event.key === "Tab" && !step.allowsInteraction()) {
       this.loopFocus(event);
       return;
     }
-    const shortcuts = step.popover?.keyboardShortcuts;
-    if ((shortcuts?.cancel ?? DEFAULT_SHORTCUTS.cancel).includes(event.key) && this.canCommand("cancel", step)) {
-      event.preventDefault();
-      this.command("cancel", "keyboard");
-      return;
-    }
-    if (isEditable(event.target, this.root))
+    const command = this.keyboardCommand(event, step, (command2) => this.canCommand(command2, step));
+    if (!command)
       return;
-    if ((shortcuts?.advance ?? DEFAULT_SHORTCUTS.advance).includes(event.key) && this.canCommand("advance", step)) {
-      event.preventDefault();
-      this.command("advance", "keyboard");
-    } else if ((shortcuts?.previous ?? DEFAULT_SHORTCUTS.previous).includes(event.key) && this.canCommand("previous", step)) {
-      event.preventDefault();
-      this.command("previous", "keyboard");
-    }
+    event.preventDefault();
+    this.command(command, "keyboard");
+  }
+  keyboardCommand(event, step, available) {
+    if (activatesControl(event, this.root))
+      return null;
+    const controls = step.props.get().controls;
+    const shortcut = (command) => (controls?.[command]?.keys ?? DEFAULT_SHORTCUTS[command]).includes(event.key) && available(command);
+    return shortcut("cancel") ? "cancel" : isEditable(event.target, this.root) ? null : shortcut("advance") ? "advance" : shortcut("previous") ? "previous" : null;
   }
   handleOverlayClick(event, step, target) {
     if (this.currentStep !== step || event.defaultPrevented)
       return;
-    if (step.behavior?.allowInteraction === true)
+    if (step.allowsInteraction())
       return;
     const path = event.composedPath();
     const popover = this.popover?.getElement();
     const pointer = this.pointer?.getElement();
-    if (path.includes(target) || popover && path.includes(popover) || pointer && path.includes(pointer))
+    if (!step.detached && path.includes(target) || popover && path.includes(popover) || pointer && path.includes(pointer))
       return;
-    const overlayClick = step.behavior?.overlayClick ?? "none";
+    const overlayClick = step.props.get().behavior?.overlayClick ?? "none";
     if (overlayClick === "advance" && this.canCommand("advance", step)) {
       this.command("advance", "overlay");
     } else if (overlayClick === "cancel" && this.canCommand("cancel", step)) {
       this.command("cancel", "overlay");
     }
   }
-  queueTransitionKeydown(event, step, generation) {
+  queueTransitionKeydown(event, step, generation, queue) {
+    const target = event.target;
+    const root = this.root;
     if (!this.isCurrentGeneration(generation) || event.defaultPrevented || event.isComposing || event.ctrlKey || event.metaKey || event.altKey)
       return;
-    const shortcuts = step.popover?.keyboardShortcuts;
-    let command = null;
-    if ((shortcuts?.cancel ?? DEFAULT_SHORTCUTS.cancel).includes(event.key))
-      command = "cancel";
-    else if (!isEditable(event.target, this.root)) {
-      if ((shortcuts?.advance ?? DEFAULT_SHORTCUTS.advance).includes(event.key) && step.props.get().popover?.disableAdvanceButton !== true)
-        command = "advance";
-      else if ((shortcuts?.previous ?? DEFAULT_SHORTCUTS.previous).includes(event.key) && step.props.get().popover?.disablePreviousButton !== true)
-        command = "previous";
+    if (!step.allowsInteraction() && isHTMLElement(target, root) && target !== target.ownerDocument.body && !root?.contains(target)) {
+      event.preventDefault();
+      return;
     }
+    if (!queue)
+      return;
+    const command = this.keyboardCommand(event, step, (command2) => isControlAvailable(step.props.get(), command2));
     if (!command)
       return;
     event.preventDefault();
-    this.pendingKeyboardCommand ??= { command, generation };
+    this.pendingCommand ??= { command, generation, source: "keyboard" };
+  }
+  queueTransitionClick(event, step, generation) {
+    const scope = this.root ?? this.popover?.getElement();
+    if (!this.isCurrentGeneration(generation) || event.defaultPrevented || event === this.handledTriggerClick || !isHTMLElement(scope, scope) || !isElement(event.target, scope))
+      return;
+    const match = this.findClickedTrigger(event.target, scope);
+    if (!match || this.isLiveDisabled(match.trigger) || !isControlAvailable(step.props.get(), match.command))
+      return;
+    this.pendingCommand ??= { command: match.command, generation, source: "trigger" };
   }
-  flushPendingKeyboardCommand(step, generation) {
-    const pending = this.pendingKeyboardCommand;
+  flushPendingCommand(step, generation) {
+    const pending = this.pendingCommand;
     if (!pending || pending.generation !== generation)
       return;
-    this.pendingKeyboardCommand = null;
+    this.pendingCommand = null;
     queueMicrotask(() => {
       if (!this.isCurrentGeneration(generation) || this.currentStep !== step || !this.canCommand(pending.command, step))
         return;
-      this.commandForGeneration(pending.command, generation, "keyboard");
+      this.commandForGeneration(pending.command, generation, pending.source);
     });
   }
   loopFocus(event) {
@@ -2479,32 +2703,32 @@ class DomTourViewDriver {
     const popover = this.popover?.getElement();
     if (!isHTMLElement(popover, this.root ?? popover))
       return;
-    const autoFocus = step.behavior?.disableAutoFocus !== true;
+    const autoFocus = step.autoFocuses();
     const deferFocus = autoFocus && this.commands?.subscribeCapabilities !== undefined;
     if (deferFocus)
       this.pendingFocusGeneration = generation;
     this.focusGuard.activate({
       allowedTarget: target,
-      allowTargetInteraction: step.behavior?.allowInteraction === true,
-      autoFocus: autoFocus && !deferFocus,
+      allowTargetInteraction: step.allowsInteraction(),
+      autoFocus,
+      deferFocus,
       direction,
       fallback: this.root ?? popover.parentElement,
       popover
     });
   }
   syncScrollLock(step) {
-    if (step.allowScroll) {
+    if (step.allowsScroll()) {
       this.scrollLock.deactivate();
       return;
     }
     this.scrollLock.activate(this.root?.ownerDocument ?? this.popover?.getElement()?.ownerDocument);
   }
   syncShortcutLabels(step) {
-    for (const advance of this.findTriggers("advance")) {
-      syncKeyShortcuts(advance, step.popover?.keyboardShortcuts?.advance ?? DEFAULT_SHORTCUTS.advance);
-    }
-    for (const previous of this.findTriggers("previous")) {
-      syncKeyShortcuts(previous, step.popover?.keyboardShortcuts?.previous ?? DEFAULT_SHORTCUTS.previous);
+    for (const command of ["advance", "previous"]) {
+      const shortcuts = isControlAvailable(step.props.get(), command) ? step.props.get().controls?.[command]?.keys ?? DEFAULT_SHORTCUTS[command] : [];
+      for (const trigger of this.findTriggers(command))
+        syncKeyShortcuts(trigger, shortcuts);
     }
   }
   attachButtonHandlers(step) {
@@ -2518,6 +2742,7 @@ class DomTourViewDriver {
       const match = this.findClickedTrigger(event.target, scope);
       if (!match)
         return;
+      this.handledTriggerClick = event;
       this.deferTriggerCommand(match.command, event, step, generation, match.trigger);
     });
   }
@@ -2568,13 +2793,13 @@ class DomTourViewDriver {
   }
   syncControlState(step) {
     for (const advance of this.findTriggers("advance")) {
-      this.syncControl(advance, this.commands?.isAdvanceDisabled() === true || step.props.get().popover?.disableAdvanceButton === true);
+      this.syncControl(advance, this.commands?.isAdvanceDisabled() === true || !isControlAvailable(step.props.get(), "advance"));
     }
     for (const previous of this.findTriggers("previous")) {
-      this.syncControl(previous, this.commands?.isPreviousDisabled() === true || step.props.get().popover?.disablePreviousButton === true);
+      this.syncControl(previous, this.commands?.isPreviousDisabled() === true || !isControlAvailable(step.props.get(), "previous"));
     }
     for (const cancel of this.findTriggers("cancel")) {
-      this.syncControl(cancel, this.commands?.isCancelDisabled() === true);
+      this.syncControl(cancel, this.commands?.isCancelDisabled() === true || !isControlAvailable(step.props.get(), "cancel"));
     }
   }
   findTriggers(direction) {
@@ -2606,14 +2831,12 @@ class DomTourViewDriver {
     return !signal.aborted && this.currentStep === step ? this.command(command, "api") : Promise.resolve();
   }
   canCommand(command, step, trigger) {
-    if (this.isConsumerDisabled(trigger ?? null))
+    if (this.isConsumerDisabled(trigger ?? null) || !isControlAvailable(step.props.get(), command))
       return false;
-    if (command === "advance") {
-      return (this.commands?.canAdvance?.() ?? true) && step.props.get().popover?.disableAdvanceButton !== true;
-    }
-    if (command === "previous") {
-      return (this.commands?.canPrevious?.() ?? true) && step.props.get().popover?.disablePreviousButton !== true;
-    }
+    if (command === "advance")
+      return this.commands?.canAdvance?.() ?? true;
+    if (command === "previous")
+      return this.commands?.canPrevious?.() ?? true;
     return this.commands?.canCancel?.() ?? true;
   }
   syncControl(element, disabled) {
@@ -2634,13 +2857,18 @@ class DomTourViewDriver {
   isLiveDisabled(element) {
     return element.disabled || element.getAttribute("aria-disabled") === "true" || this.isConsumerDisabled(element);
   }
+  elementProps(step) {
+    const props = step.props.get();
+    return step.detached ? { ...props, detached: true } : props;
+  }
   isPointerEnabled(step) {
-    return step.behavior?.allowInteraction === true && step.indicator?.disabled !== true;
+    return step.allowsInteraction() && step.props.get().indicator?.hidden !== true;
   }
   cleanupStepResources() {
     this.cancelScroll?.();
     this.cancelScroll = null;
     this.presentationDirty = false;
+    this.pointerFading = false;
     if (this.rafId !== null)
       this.rafCancel?.(this.rafId);
     this.rafId = null;
@@ -2673,17 +2901,36 @@ class DomTourViewDriver {
     });
   }
   applyInteractionLock(step, locked) {
-    const allowed = !locked && step.behavior?.allowInteraction === true;
+    const allowed = !locked && step.allowsInteraction();
     this.overlay?.setInteractionAllowed(allowed);
     this.syncModality(allowed);
+  }
+  applyInteraction(step, target) {
+    this.applyInteractionLock(step, false);
+    this.appliedAllowInteraction = step.allowsInteraction();
     const popover = this.popover?.getElement();
     if (isHTMLElement(popover, this.root ?? popover)) {
-      if (allowed)
-        popover.removeAttribute("aria-modal");
-      else
-        popover.setAttribute("aria-modal", "true");
+      this.focusGuard.update({
+        allowedTarget: target,
+        allowTargetInteraction: step.allowsInteraction(),
+        direction: this.direction,
+        fallback: this.root ?? popover.parentElement,
+        popover
+      });
     }
   }
+  syncInteraction(step) {
+    const target = this.activeTarget;
+    if (this.disposed || !this.active || this.frozen || this.awaitingStepUi || this.currentStep !== step || !target)
+      return;
+    const focusWasInTarget = this.isFocusInsideTarget(target);
+    this.applyInteraction(step, target);
+    if (focusWasInTarget && !step.allowsInteraction() && step.autoFocuses())
+      this.focusGuard.focus();
+    const targetRect = target.getBoundingClientRect();
+    this.pointer?.cancelAnimations();
+    this.observeDynamicOperation(this.presentPointer(targetRect, step, this.popover?.resolvePosition(targetRect, this.elementProps(step)).placement), this.generation);
+  }
   isFocusInsideTarget(target) {
     const activeElement = target.ownerDocument?.activeElement;
     if (!activeElement)
@@ -2700,23 +2947,15 @@ class DomTourViewDriver {
     this.frozen = false;
     this.currentSignal = signal;
     this.activeTarget = target;
-    this.applyInteractionLock(step, false);
+    this.applyInteraction(step, target);
     this.attachTargetResources(step, target, this.generation, signal);
-    const popover = this.popover?.getElement();
-    if (isHTMLElement(popover, this.root ?? popover)) {
-      this.focusGuard.update({
-        allowedTarget: target,
-        allowTargetInteraction: step.behavior?.allowInteraction === true,
-        direction: this.direction,
-        fallback: this.root ?? popover.parentElement,
-        popover
-      });
-    }
-    if (this.targetFocusedAtFreeze) {
-      this.targetFocusedAtFreeze = false;
-      if (step.behavior?.allowInteraction === true)
+    if (this.targetFocusedAtFreeze && step.autoFocuses()) {
+      if (step.allowsInteraction())
         target.focus();
+      else
+        this.focusGuard.focus();
     }
+    this.targetFocusedAtFreeze = false;
     this.syncControlState(step);
     this.syncShortcutLabels(step);
     this.moveToRetargetedRect(step, target);
@@ -2724,18 +2963,18 @@ class DomTourViewDriver {
   }
   moveToRetargetedRect(step, target) {
     const generation = this.generation;
-    const targetRect = target.getBoundingClientRect();
-    this.observeDynamicOperation(this.overlay?.animateTo(targetRect, step), generation);
-    const placement = this.popover?.updatePosition(targetRect, step, (reposition) => this.observeDynamicOperation(reposition, generation));
+    const targetRect = presentationRect(step, target);
+    this.observeDynamicOperation(this.overlay?.animateTo(targetRect, this.elementProps(step)), generation);
+    const placement = this.popover?.updatePosition(targetRect, this.elementProps(step), (reposition) => this.observeDynamicOperation(reposition, generation));
     if (this.isPointerEnabled(step)) {
-      this.observeDynamicOperation(this.pointer?.moveToTarget(targetRect, step, true, placement), generation);
+      this.observeDynamicOperation(this.pointer?.moveToTarget(targetRect, step.props.get(), true, placement), generation);
     }
     this.lastTargetRect = snapshotRect(targetRect);
     this.lastViewport = snapshotViewport(target);
   }
   beginGeneration() {
     this.generation += 1;
-    this.pendingKeyboardCommand = null;
+    this.pendingCommand = null;
     this.pendingFocusGeneration = null;
     this.cancelElementAnimations();
     return this.generation;
@@ -2755,18 +2994,18 @@ class DomTourViewDriver {
   }
   beginTargetScroll(step, target, signal) {
     this.throwIfAborted(signal);
-    if (step.behavior?.disableAutoScroll)
+    if (step.detached || step.props.get().behavior?.autoScroll === false)
       return null;
     if (isInViewport(target.getBoundingClientRect(), target))
       return null;
     const currentWindow = this.getWindow(target);
     if (!currentWindow)
       return null;
-    const behavior = prefersReducedMotion(target) ? "instant" : step.behavior?.scroll?.behavior ?? "smooth";
+    const behavior = prefersReducedMotion(target) ? "instant" : step.props.get().behavior?.scroll?.behavior ?? "smooth";
     target.scrollIntoView({
       behavior,
-      block: step.behavior?.scroll?.block ?? "center",
-      inline: step.behavior?.scroll?.inline ?? "nearest"
+      block: step.props.get().behavior?.scroll?.block ?? "center",
+      inline: step.props.get().behavior?.scroll?.inline ?? "nearest"
     });
     if (behavior === "instant")
       return null;
@@ -2845,6 +3084,12 @@ function animationOptions(step, options, element) {
     easing: options?.animation?.easing
   };
 }
+function presentationRect(step, target) {
+  if (!step.detached)
+    return target.getBoundingClientRect();
+  const viewport = viewportDimensions(target);
+  return { height: 0, left: viewport.width / 2, top: viewport.height / 2, width: 0 };
+}
 function abortError2() {
   return new DOMException("The operation was aborted", "AbortError");
 }
@@ -2880,6 +3125,10 @@ function sameViewport(left, right) {
 function finite(value, fallback = 0) {
   return Number.isFinite(value) ? value : fallback;
 }
+function activatesControl(event, context) {
+  const target = event.target;
+  return event.key === "Enter" && isHTMLElement(target, context) && target.matches(FOCUSABLE_SELECTOR);
+}
 function isEditable(target, context) {
   if (!isHTMLElement(target, context))
     return false;
@@ -2950,12 +3199,13 @@ function validateIndicator(path, indicator) {
   validateFiniteNonNegative(`${path}.gap`, indicator.gap);
 }
 function validateBehavior(path, behavior) {
-  validateFiniteNonNegative(`${path}.targetTimeout`, behavior?.targetTimeout);
+  validateFiniteNonNegative(`${path}.missingTarget.timeout`, behavior?.missingTarget?.timeout);
 }
 function validateStepProps(path, props) {
   validateOverlay(`${path}.overlay`, props.overlay);
   validatePopover(`${path}.popover`, props.popover);
   validateIndicator(`${path}.indicator`, props.indicator);
+  validateBehavior(`${path}.behavior`, props.behavior);
 }
 function validateWorkflowOptions(workflow) {
   validateOverlay("options.overlay", workflow.options.overlay);
@@ -2963,113 +3213,8 @@ function validateWorkflowOptions(workflow) {
   validateIndicator("options.indicator", workflow.options.indicator);
   validateBehavior("options.behavior", workflow.options.behavior);
   for (const [index, step] of workflow.steps.entries()) {
-    const path = `steps[${index}]`;
-    validateBehavior(`${path}.behavior`, step.behavior);
-    validateStepProps(path, step.props);
-  }
-}
-
-// packages/core/src/utils/options.ts
-function mergeOverlayOptions(defaults, overrides) {
-  if (!defaults && !overrides) {
-    return;
-  }
-  return {
-    ...mergeBaseOptions(defaults, overrides),
-    color: overrides?.color ?? defaults?.color,
-    opacity: overrides?.opacity ?? defaults?.opacity,
-    padding: overrides?.padding ?? defaults?.padding,
-    radius: overrides?.radius ?? defaults?.radius
-  };
-}
-function mergeIndicatorOptions(defaults, overrides) {
-  if (!defaults && !overrides) {
-    return;
-  }
-  return {
-    ...mergeBaseOptions(defaults, overrides),
-    disabled: overrides?.disabled ?? defaults?.disabled,
-    gap: overrides?.gap ?? defaults?.gap,
-    placementTryOrder: cloneArray(overrides?.placementTryOrder ?? defaults?.placementTryOrder)
-  };
-}
-function mergePopoverOptions(defaults, overrides) {
-  if (!defaults && !overrides) {
-    return;
-  }
-  const placementTryOrder = overrides?.placementTryOrder ?? defaults?.placementTryOrder;
-  const hasArrow = !!defaults?.arrow || !!overrides?.arrow;
-  const hasKeyboardShortcuts = !!defaults?.keyboardShortcuts || !!overrides?.keyboardShortcuts;
-  return {
-    ...mergeBaseOptions(defaults, overrides),
-    arrow: hasArrow ? {
-      disabled: overrides?.arrow?.disabled ?? defaults?.arrow?.disabled,
-      color: overrides?.arrow?.color ?? defaults?.arrow?.color,
-      size: overrides?.arrow?.size ?? defaults?.arrow?.size,
-      borderWidth: overrides?.arrow?.borderWidth ?? defaults?.arrow?.borderWidth,
-      borderRadius: overrides?.arrow?.borderRadius ?? defaults?.arrow?.borderRadius,
-      edgePadding: overrides?.arrow?.edgePadding ?? defaults?.arrow?.edgePadding,
-      styleNonce: overrides?.arrow?.styleNonce ?? defaults?.arrow?.styleNonce,
-      disableAutoStyles: overrides?.arrow?.disableAutoStyles ?? defaults?.arrow?.disableAutoStyles
-    } : undefined,
-    disableAdvanceButton: overrides?.disableAdvanceButton ?? defaults?.disableAdvanceButton,
-    disablePreviousButton: overrides?.disablePreviousButton ?? defaults?.disablePreviousButton,
-    gap: overrides?.gap ?? defaults?.gap,
-    hideAdvanceButton: overrides?.hideAdvanceButton ?? defaults?.hideAdvanceButton,
-    hideFooter: overrides?.hideFooter ?? defaults?.hideFooter,
-    hidePreviousButton: overrides?.hidePreviousButton ?? defaults?.hidePreviousButton,
-    placementTryOrder: cloneArray(placementTryOrder),
-    keyboardShortcuts: hasKeyboardShortcuts ? {
-      previous: cloneArray(overrides?.keyboardShortcuts?.previous ?? defaults?.keyboardShortcuts?.previous),
-      advance: cloneArray(overrides?.keyboardShortcuts?.advance ?? defaults?.keyboardShortcuts?.advance),
-      cancel: cloneArray(overrides?.keyboardShortcuts?.cancel ?? defaults?.keyboardShortcuts?.cancel)
-    } : undefined
-  };
-}
-function mergeScrollOptions(defaults, overrides) {
-  if (!defaults && !overrides) {
-    return;
-  }
-  return {
-    behavior: overrides?.behavior ?? defaults?.behavior,
-    block: overrides?.block ?? defaults?.block,
-    inline: overrides?.inline ?? defaults?.inline
-  };
-}
-function mergeAnimationOptions(defaults, overrides) {
-  if (!defaults) {
-    return overrides ? { ...overrides } : undefined;
-  }
-  if (!overrides) {
-    return { ...defaults };
-  }
-  return {
-    duration: overrides.duration ?? defaults.duration,
-    easing: overrides.easing ?? defaults.easing
-  };
-}
-function mergeBaseOptions(defaults, overrides) {
-  return {
-    animated: overrides?.animated ?? defaults?.animated,
-    animation: mergeAnimationOptions(defaults?.animation, overrides?.animation)
-  };
-}
-function mergeStepBehavior(defaults, overrides) {
-  if (!defaults && !overrides) {
-    return;
+    validateStepProps(`steps[${index}]`, step.props);
   }
-  return {
-    allowInteraction: overrides?.allowInteraction ?? defaults?.allowInteraction,
-    disableAutoFocus: overrides?.disableAutoFocus ?? defaults?.disableAutoFocus,
-    disableAutoScroll: overrides?.disableAutoScroll ?? defaults?.disableAutoScroll,
-    missingTargetStrategy: overrides?.missingTargetStrategy ?? defaults?.missingTargetStrategy,
-    scroll: mergeScrollOptions(defaults?.scroll, overrides?.scroll),
-    targetTimeout: overrides?.targetTimeout ?? defaults?.targetTimeout,
-    overlayClick: overrides?.overlayClick ?? defaults?.overlayClick
-  };
-}
-function cloneArray(value) {
-  return value ? [...value] : undefined;
 }
 
 // packages/core/src/runtime/step-props-store.ts
@@ -3085,16 +3230,18 @@ function createStepPropsStore(initialProps, reportListenerError, path = "steps[0
       } catch {}
     }
   };
+  const set = (update) => {
+    const next = typeof update === "function" ? update(current) : update;
+    validateStepProps(path, next);
+    current = freezeStepProps(next);
+    const published = current;
+    for (const listener of Array.from(listeners))
+      notify(listener, published);
+  };
   return Object.freeze({
     get: () => current,
-    set: (update) => {
-      const next = typeof update === "function" ? update(current) : update;
-      validateStepProps(path, next);
-      current = freezeStepProps(next);
-      const published = current;
-      for (const listener of Array.from(listeners))
-        notify(listener, published);
-    },
+    set,
+    update: (patch) => set((props) => mergeStepProps(props, typeof patch === "function" ? patch(props) : patch)),
     subscribe: (listener) => {
       notify(listener, current);
       listeners.add(listener);
@@ -3116,42 +3263,35 @@ class ActiveStep {
   rootDocument;
   initialProps;
   props;
-  behavior;
   animated;
-  allowScroll;
   target = null;
+  detached = false;
+  direction = "advance";
   constructor(definition, defaults, reportSubscriberError = () => {}, path = "steps[0]", rootDocument) {
     this.definition = definition;
     this.path = path;
     this.rootDocument = rootDocument;
-    this.initialProps = freezeStepProps({
-      title: definition.props.title,
-      content: definition.props.content,
-      data: definition.props.data,
-      overlay: mergeOverlayOptions(defaults.overlay, definition.props.overlay),
-      popover: mergePopoverOptions(defaults.popover, definition.props.popover),
-      indicator: mergeIndicatorOptions(defaults.indicator, definition.props.indicator)
-    });
+    this.initialProps = freezeStepProps(mergeStepProps(defaults, definition.props));
     this.props = createStepPropsStore(this.initialProps, reportSubscriberError, path);
-    this.behavior = mergeStepBehavior(defaults.behavior, definition.behavior);
     this.animated = defaults.animated;
-    this.allowScroll = defaults.allowScroll !== false;
-  }
-  reset() {
-    this.props.set(this.initialProps);
   }
-  get overlay() {
-    return this.props.get().overlay;
+  allowsInteraction() {
+    return !this.detached && this.props.get().behavior?.allowInteraction === true;
   }
-  get popover() {
-    return this.props.get().popover;
+  autoFocuses() {
+    return this.props.get().behavior?.autoFocus !== false;
   }
-  get indicator() {
-    return this.props.get().indicator;
+  allowsScroll() {
+    return this.props.get().behavior?.allowScroll !== false;
   }
   async resolveTarget(signal) {
     return await resolveTargetElement(this.definition.target, { document: this.rootDocument, signal }, this.path);
   }
+  detach() {
+    const body = (this.rootDocument ?? globalThis.document)?.body ?? null;
+    this.detached = body !== null;
+    return body;
+  }
   snapshot() {
     return Object.freeze({
       id: this.definition.id,
@@ -3231,7 +3371,7 @@ class TourRootBinding {
   hasPopover() {
     return this.popover !== null;
   }
-  get document() {
+  getDocument() {
     return this.root.ownerDocument;
   }
   release() {
@@ -3365,11 +3505,11 @@ function attachRootBridge(tour, driver, isDisposed, onMountReleaseStart, onMount
   return {
     assertCanRun(workflow) {
       if (!binding)
-        throw new Error("Glow tour requires a connected root before run()");
+        throw new Error("Glow tour requires a connected root before start()");
       if (workflow.steps.length > 0 && !binding.hasPopover()) {
-        throw new Error("Glow tour requires a connected popover before run()");
+        throw new Error("Glow tour requires a connected popover before start()");
       }
-      return binding.document;
+      return binding.getDocument();
     },
     release() {
       binding?.release();
@@ -3459,13 +3599,10 @@ function prefixReservations(document2) {
 var DEFAULT_TARGET_TIMEOUT = 3000;
 var TARGET_LOSS_GRACE_MS = 150;
 var DISPOSED_ERROR_MESSAGE = "Tour controller is disposed";
-function resolveStartIndex(workflow, startAt) {
-  if (startAt === undefined)
-    return 0;
-  const index = workflow.steps.findIndex((step) => step.id === startAt);
-  if (index === -1) {
-    throw new Error(`Workflow "${workflow.name}" has no step with id "${startAt}" to start at.`);
-  }
+function resolveStepIndex(workflow, id) {
+  const index = workflow.steps.findIndex((step) => step.id === id);
+  if (index === -1)
+    throw new Error(`Workflow "${workflow.name}" has no step with id "${id}".`);
   return index;
 }
 function normalizedError(error) {
@@ -3498,6 +3635,7 @@ class TourController {
   stepPropsSubscriptions = [];
   tourStartedAt = 0;
   stepEnteredAt = 0;
+  pendingTourStart;
   commandSource = "api";
   state = Object.freeze({
     get: () => this.snapshot,
@@ -3523,6 +3661,7 @@ class TourController {
       canCancel: () => this.status === "active" && this.isCancelAvailable(),
       canPrevious: () => this.canNavigate("previous"),
       cancel: (source) => this.cancel(source),
+      goTo: (id) => this.goTo(id),
       isAdvanceDisabled: () => !this.isPresentedAdvanceAvailable(),
       isCancelDisabled: () => !this.isPresentedCancelAvailable(),
       isPreviousDisabled: () => !this.isPresentedPreviousAvailable(),
@@ -3544,10 +3683,10 @@ class TourController {
   create(name, options = {}) {
     return new WorkflowBuilder(name, options);
   }
-  async run(workflow, runOptions = {}) {
+  async start(workflow, runOptions = {}) {
     this.assertNotDisposed();
     validateWorkflowOptions(workflow);
-    const startIndex = resolveStartIndex(workflow, runOptions.startAt);
+    const startIndex = runOptions.startAt === undefined ? 0 : resolveStepIndex(workflow, runOptions.startAt);
     const rootDocument = this.options.assertCanRun?.(workflow) ?? undefined;
     const retainedPresentation = this.capturePresentation();
     const operation = this.beginOperation();
@@ -3564,6 +3703,7 @@ class TourController {
     this.error = null;
     this.commandSource = "api";
     this.retainedPresentation = retainedPresentation;
+    this.pendingTourStart = undefined;
     try {
       this.setStatus("starting");
       this.assertCurrent(operation);
@@ -3571,16 +3711,16 @@ class TourController {
       await workflow.options.onStart?.(startContext);
       this.assertCurrent(operation);
       if (isStartAborted()) {
-        this.resetToIdle();
+        await this.resetToIdle(operation);
         return;
       }
       this.tourStartedAt = Date.now();
-      this.emit("tour:start", this.steps[startIndex] ?? null, 0);
+      this.pendingTourStart = this.steps[startIndex] ?? null;
       if (this.steps.length === 0) {
         await this.finish(operation);
         return;
       }
-      await this.enter(startIndex, "advance", operation);
+      await this.navigate(startIndex, "advance", operation);
     } catch (error) {
       await this.handleFailure(error, operation);
     }
@@ -3593,15 +3733,16 @@ class TourController {
     this.assertNotDisposed();
     await this.transitionFromPublic("previous", undefined, source);
   }
-  async goToStep(index) {
+  async goTo(id) {
     this.assertNotDisposed();
-    if (this.status === "starting" || this.status === "transitioning")
+    const workflow = this.workflow;
+    if (!workflow || this.status === "starting" || this.status === "transitioning")
       return;
-    if (index < 0 || index >= this.steps.length) {
-      throw new Error(`Step index ${index} is out of bounds`);
-    }
-    const direction = index > this.index ? "advance" : "previous";
-    await this.transitionFromPublic(direction, index, "api");
+    const index = resolveStepIndex(workflow, id);
+    await this.transitionFromPublic(this.directionTo(index), index, "api");
+  }
+  directionTo(index) {
+    return index > this.index ? "advance" : "previous";
   }
   async cancel(source = "api") {
     this.assertNotDisposed();
@@ -3627,6 +3768,7 @@ class TourController {
     this.direction = "advance";
     this.error = null;
     this.retainedPresentation = null;
+    this.pendingTourStart = undefined;
     this.status = "disposed";
     this.publish(true);
     this.stateListeners.clear();
@@ -3647,29 +3789,57 @@ class TourController {
     this.direction = "advance";
     this.error = null;
     this.retainedPresentation = null;
+    this.pendingTourStart = undefined;
     this.status = "idle";
   }
   completeMountRelease() {
     if (!this.disposed)
       this.publish();
   }
-  async enter(index, direction, operation) {
-    this.direction = direction;
-    this.emitStepLeave(this.currentStep());
-    this.setStatus("transitioning");
+  async navigate(index, direction, operation, lostStep) {
+    const from = this.currentStep();
+    if (this.status !== "transitioning")
+      this.setStatus("transitioning");
     this.assertCurrent(operation);
-    const step = this.steps[index];
-    if (!step)
-      throw new Error(`Step index ${index} is out of bounds`);
-    if (step.definition.resetPropsOnEnter !== false)
-      step.reset();
-    const target = await this.resolveTarget(step, operation);
-    this.assertCurrent(operation);
-    if (!target) {
-      await this.advancePastMissingTarget(index, direction, operation);
+    const skipped = [];
+    let step = this.steps[index];
+    let target = null;
+    while (step) {
+      target = await this.resolveTarget(step, operation);
+      this.assertCurrent(operation);
+      if (target)
+        break;
+      skipped.push(step);
+      index += direction === "advance" ? 1 : -1;
+      step = this.steps[index];
+    }
+    if (!step || !target) {
+      if (index >= this.steps.length || lostStep)
+        this.direction = direction;
+      if (index >= this.steps.length)
+        await this.finish(operation, skipped);
+      else if (!lostStep)
+        this.setStatus("active");
+      else
+        await this.cancelCurrent(operation);
       return;
     }
     step.target = target;
+    step.direction = direction;
+    if (await this.runStepHook(step.definition.beforeEnter, step, operation, direction)) {
+      if (lostStep)
+        throw this.missingTargetError(lostStep);
+      if (from)
+        this.setStatus("active");
+      else
+        await this.resetToIdle(operation);
+      return;
+    }
+    this.direction = direction;
+    this.flushTourStart();
+    for (const skippedStep of skipped)
+      this.emit("step:skip", skippedStep, 0);
+    this.emitStepLeave(from);
     let committed = false;
     const commitStep = () => {
       this.assertCurrent(operation);
@@ -3708,29 +3878,24 @@ class TourController {
       return;
     this.setStatus("transitioning");
     this.assertCurrent(operation);
-    const hook = direction === "advance" ? step.definition.advanceAction : step.definition.previousAction;
-    await hook?.(this.createBeforeActionStepContext(step));
-    this.assertCurrent(operation);
-    if (destination !== undefined) {
-      await this.enter(destination, direction, operation);
-      return;
-    }
-    if (direction === "advance") {
-      const nextIndex = this.index + 1;
-      if (nextIndex >= this.steps.length)
-        await this.finish(operation);
-      else
-        await this.enter(nextIndex, direction, operation);
-      return;
-    }
-    if (this.index === 0) {
-      if (this.canCancel())
-        await this.cancelCurrent(operation);
-      else
-        this.setStatus("active");
+    if (await this.runStepHook(step.definition.beforeLeave, step, operation, direction)) {
+      this.setStatus("active");
       return;
     }
-    await this.enter(this.index - 1, direction, operation);
+    await this.navigate(destination ?? this.index + (direction === "advance" ? 1 : -1), direction, operation);
+  }
+  async runStepHook(hook, step, operation, direction) {
+    if (!hook)
+      return false;
+    let aborted = false;
+    await hook(Object.freeze({
+      ...this.createStepHookContext(step, operation, direction),
+      abort: () => {
+        aborted = true;
+      }
+    }));
+    this.assertCurrent(operation);
+    return aborted;
   }
   async runActions(operation) {
     const step = this.currentStep();
@@ -3754,9 +3919,11 @@ class TourController {
   }
   async resolveTarget(step, operation) {
     const signal = this.signalFor(operation);
-    const strategy = step.behavior?.missingTargetStrategy ?? "error";
-    const timeout = step.behavior?.targetTimeout ?? DEFAULT_TARGET_TIMEOUT;
+    const missingTarget = step.props.get().behavior?.missingTarget;
+    const strategy = missingTarget?.strategy ?? "error";
+    const timeout = missingTarget?.timeout ?? DEFAULT_TARGET_TIMEOUT;
     const startedAt = Date.now();
+    step.detached = false;
     while (true) {
       const target = await step.resolveTarget(signal);
       this.assertCurrent(operation);
@@ -3764,6 +3931,9 @@ class TourController {
         return target;
       if (strategy === "skip")
         return null;
+      const body = strategy === "detached" && step.detach();
+      if (body)
+        return body;
       if (strategy !== "wait" || Date.now() - startedAt >= timeout) {
         throw this.missingTargetError(step);
       }
@@ -3796,28 +3966,20 @@ class TourController {
     const operation = this.beginOperation();
     try {
       this.assertCurrent(operation);
-      const recoveredDuringGrace = await this.pollForTarget(step, operation, TARGET_LOSS_GRACE_MS);
+      let recovered = await this.pollForTarget(step, operation, TARGET_LOSS_GRACE_MS);
       this.assertCurrent(operation);
-      if (recoveredDuringGrace) {
-        step.target = recoveredDuringGrace;
-        await this.driver.retarget(step, this.signalFor(operation));
+      if (!recovered) {
+        const strategy = step.props.get().behavior?.missingTarget?.strategy ?? "error";
+        if (strategy === "skip") {
+          await this.navigate(index + (direction === "advance" ? 1 : -1), direction, operation, step);
+          return;
+        }
+        recovered = strategy === "detached" ? step.detach() : strategy === "wait" ? await this.pollForTarget(step, operation, (step.props.get().behavior?.missingTarget?.timeout ?? DEFAULT_TARGET_TIMEOUT) - TARGET_LOSS_GRACE_MS) : null;
         this.assertCurrent(operation);
-        this.publish();
-        return;
-      }
-      const strategy = step.behavior?.missingTargetStrategy ?? "error";
-      if (strategy === "skip") {
-        await this.advancePastRecoveryMissingTarget(step, index, direction, operation);
-        return;
+        if (!recovered)
+          throw this.missingTargetError(step);
       }
-      if (strategy !== "wait")
-        throw this.missingTargetError(step);
-      const timeout = step.behavior?.targetTimeout ?? DEFAULT_TARGET_TIMEOUT;
-      const recoveredAfterWait = await this.pollForTarget(step, operation, Math.max(0, timeout - TARGET_LOSS_GRACE_MS));
-      this.assertCurrent(operation);
-      if (!recoveredAfterWait)
-        throw this.missingTargetError(step);
-      step.target = recoveredAfterWait;
+      step.target = recovered;
       await this.driver.retarget(step, this.signalFor(operation));
       this.assertCurrent(operation);
       this.publish();
@@ -3830,34 +3992,10 @@ class TourController {
         this.recoveringTarget = null;
     }
   }
-  async advancePastMissingTarget(index, direction, operation) {
-    const nextIndex = direction === "advance" ? index + 1 : index - 1;
-    if (nextIndex >= this.steps.length)
-      await this.finish(operation);
-    else if (nextIndex < 0) {
-      if (this.canCancel())
-        await this.cancelCurrent(operation);
-      else
-        this.setStatus("active");
-    } else
-      await this.enter(nextIndex, direction, operation);
-  }
-  async advancePastRecoveryMissingTarget(step, index, direction, operation) {
-    const nextIndex = direction === "advance" ? index + 1 : index - 1;
-    if (nextIndex >= this.steps.length)
-      await this.finish(operation);
-    else if (nextIndex < 0) {
-      if (this.canCancel())
-        await this.cancelCurrent(operation);
-      else
-        throw this.missingTargetError(step);
-    } else
-      await this.enter(nextIndex, direction, operation);
-  }
   missingTargetError(step) {
     return new Error(`Missing target at ${step.path}: ${String(step.definition.target)}`);
   }
-  async finish(operation) {
+  async finish(operation, skipped = []) {
     this.assertCurrent(operation);
     const step = this.currentStep();
     const { context, isAborted } = this.createLifecycleHookContext(step);
@@ -3867,9 +4005,12 @@ class TourController {
       if (step)
         this.setStatus("active");
       else
-        this.resetToIdle();
+        await this.resetToIdle(operation);
       return;
     }
+    this.flushTourStart();
+    for (const skippedStep of skipped)
+      this.emit("step:skip", skippedStep, 0);
     this.emitStepLeave(step);
     await this.driver.clear(this.signalFor(operation));
     this.assertCurrent(operation);
@@ -3880,10 +4021,6 @@ class TourController {
   }
   async cancelCurrent(operation) {
     const step = this.currentStep();
-    if (step?.definition.cancelAction) {
-      await step.definition.cancelAction(this.createBeforeActionStepContext(step));
-    }
-    this.assertCurrent(operation);
     const { context, isAborted } = this.createLifecycleHookContext(step);
     await this.workflow?.options.onCancel?.(context);
     this.assertCurrent(operation);
@@ -3891,6 +4028,7 @@ class TourController {
       this.setStatus("active");
       return;
     }
+    this.flushTourStart();
     this.emitStepLeave(step);
     await this.driver.clear(this.signalFor(operation));
     this.assertCurrent(operation);
@@ -3909,12 +4047,17 @@ class TourController {
     });
     return { context, isAborted: () => aborted };
   }
-  resetToIdle() {
+  async resetToIdle(operation) {
+    if (this.retainedPresentation) {
+      await this.driver.clear(this.signalFor(operation));
+      this.assertCurrent(operation);
+    }
     this.workflow = null;
     this.releaseStepPropsSubscriptions();
     this.steps = [];
     this.index = -1;
     this.retainedPresentation = null;
+    this.pendingTourStart = undefined;
     this.setStatus("idle");
   }
   async handleFailure(reason, operation) {
@@ -3924,6 +4067,7 @@ class TourController {
     this.error = error;
     this.retainedPresentation = null;
     this.setStatus("error");
+    this.flushTourStart();
     this.emit("tour:error", this.currentStep(), Date.now() - this.tourStartedAt, error);
     if (!this.isCurrent(operation))
       throw error;
@@ -3938,9 +4082,8 @@ class TourController {
     return this.operationToken;
   }
   createStepContext(step, operation, onControl) {
-    if (!step.target)
-      throw new Error("Cannot create a step context without a target");
     return Object.freeze({
+      ...this.createStepHookContext(step, operation, step.direction),
       advance: async () => {
         onControl?.();
         this.assertCurrent(operation);
@@ -3952,21 +4095,29 @@ class TourController {
         if (this.canCancel())
           await this.cancelCurrent(operation);
       },
+      goTo: async (id) => {
+        onControl?.();
+        this.assertCurrent(operation);
+        if (!this.workflow)
+          return;
+        const index = resolveStepIndex(this.workflow, id);
+        await this.transition(this.directionTo(index), operation, index);
+      },
       previous: async () => {
         onControl?.();
         this.assertCurrent(operation);
         await this.transition("previous", operation);
-      },
-      props: step.props,
-      signal: this.signalFor(operation),
-      target: step.target
+      }
     });
   }
-  createBeforeActionStepContext(step) {
+  createStepHookContext(step, operation, direction) {
     if (!step.target)
       throw new Error("Cannot create a step context without a target");
     return Object.freeze({
-      ...step.props.get(),
+      direction,
+      initialProps: step.initialProps,
+      props: step.props,
+      signal: this.signalFor(operation),
       target: step.target
     });
   }
@@ -4009,12 +4160,10 @@ class TourController {
     return direction === "advance" || this.index > 0;
   }
   isAdvanceButtonAvailable() {
-    const props = this.currentStep()?.props.get();
-    return props !== undefined && props.popover?.disableAdvanceButton !== true;
+    return isControlAvailable(this.currentStep()?.props.get(), "advance");
   }
   isPreviousButtonAvailable() {
-    const props = this.currentStep()?.props.get();
-    return props !== undefined && props.popover?.disablePreviousButton !== true && this.index > 0;
+    return isControlAvailable(this.currentStep()?.props.get(), "previous") && this.index > 0;
   }
   isCancelAvailable() {
     return this.currentStep() !== null && this.canCancel();
@@ -4029,7 +4178,7 @@ class TourController {
     return this.currentStep() ? this.isCancelAvailable() : this.retainedPresentation?.canCancel ?? false;
   }
   canCancel() {
-    return (this.workflow?.options.cancellable ?? true) && this.status !== "finished" && this.status !== "cancelled" && this.status !== "error";
+    return this.status !== "finished" && this.status !== "cancelled" && this.status !== "error";
   }
   setStatus(status) {
     this.status = status;
@@ -4087,6 +4236,13 @@ class TourController {
       this.reportSubscriberError(error);
     }
   }
+  flushTourStart() {
+    const step = this.pendingTourStart;
+    if (step === undefined)
+      return;
+    this.pendingTourStart = undefined;
+    this.emit("tour:start", step, 0);
+  }
   emitStepLeave(step) {
     if (!step || !this.hasEventListeners())
       return;
@@ -4169,9 +4325,9 @@ function createGlowTour(options = {}) {
     cancel: () => controller.cancel(),
     create: (name, options2) => controller.create(name, options2),
     dispose: () => controller.dispose(),
-    goToStep: (index) => controller.goToStep(index),
+    goTo: (id) => controller.goTo(id),
     previous: () => controller.previous(),
-    run: (workflow, runOptions) => controller.run(workflow, runOptions),
+    start: (workflow, runOptions) => controller.start(workflow, runOptions),
     state: controller.state
   };
   bridge = attachRootBridge(tour, driver, () => controller.isDisposed(), () => controller.beginMountRelease(), () => controller.completeMountRelease());