i've been experimenting with building an animated focus ring using CSS anchor positioning https://codepen.io/hi_mayank/pen/MWNrBpQ

i'm adding a pseudo-element on the body itself, so it requires no extra HTML. and unlike a regular outline, it won't get clipped by adjacent elements or overflow.

issues:
- it does not work for elements focused inside a popover or dialog.
- i'm also trying to animate it but it's not performant bc you cannot use anchored values in transforms.