highlightElement function exported

Last updated: 2026-03-05T20:45:07.036Z

Location

src/lib/demo/step-executor.ts:467-483

Metrics

LOC: 17 Complexity: 3 Params: 2

Signature

highlightElement(step: FlowStep, durationMs: number): : void

Summary

Highlight an element briefly before interaction for visual feedback.

Source Code

export function highlightElement(step: FlowStep, durationMs: number): void {
  if (durationMs <= 0) return;

  const el = findElement(step);
  if (!(el instanceof HTMLElement)) return;

  const originalOutline = el.style.outline;
  const originalTransition = el.style.transition;

  el.style.transition = "outline 0.15s ease";
  el.style.outline = "3px solid #4285f4";

  setTimeout(() => {
    el.style.outline = originalOutline;
    el.style.transition = originalTransition;
  }, durationMs);
}

Dependencies (Outgoing)

graph LR highlightElement["highlightElement"] findElement["findElement"] highlightElement -->|calls| findElement style highlightElement fill:#dbeafe,stroke:#2563eb,stroke-width:2px click highlightElement "d623ce50223cce1c.html" click findElement "db37f185eea489b4.html"
TargetType
findElement calls

Impact (Incoming)

graph LR highlightElement["highlightElement"] FillableElement["FillableElement"] assertFailed["assertFailed"] FillableElement -->|uses| highlightElement assertFailed -->|uses| highlightElement style highlightElement fill:#dbeafe,stroke:#2563eb,stroke-width:2px click highlightElement "d623ce50223cce1c.html" click FillableElement "2ecf5aaac3f668a8.html" click assertFailed "32e8f6272df2aded.html"
SourceType
FillableElement uses
assertFailed uses