[CL-1186] - spotlight and popover fixes

[jaasen-livefront]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/CL-1186

📔 Objective

Fixes issues with the spotlight effect used in guided tour popovers, and adds customization inputs to bit-popover.

Light mode contrast — The spotlight overlay opacity was 0.3, too close to the nav hover color to create visible contrast. Increased to 0.55.

Resize lag — CDK's reposition scroll strategy only reacts to scroll events, so resizing the window caused the spotlight cutout to trail behind the highlighted element. Added a window resize listener in SpotlightService that immediately calls updatePosition(), cleaned up when the overlay is disposed.

Spotlight cropping — The spotlight cutout was sizing to the directive's host element, which could be wider than the visual target (e.g. a full-width nav row). Added a spotlightTargetSelector input to PopoverAnchorForDirective that accepts a CSS selector to find a child element to use as the spotlight target instead.

Viewport margin — Added a viewportMargin input to PopoverAnchorForDirective to control the minimum distance between the popover and the viewport edge (passed to CDK's withViewportMargin()).

Popover customization — Added optional panelClass, headerClass, titleClass, and contentClass inputs to bit-popover for overriding styles on specific sections without modifying the shared component defaults.

📸 Screenshots

Screen.Recording.2026-05-05.at.2.18.15.PM.mov

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud