How do I style the keyboard focus ring in V24?

Flow
1

For accessibility reasons I need to style the focus ring for input fields. Looked at the docs and for buttons it works:

    box-shadow: 0 0 0 4px black;
}``` 
Results in exactly what I need (see attached image).
However, for TextField this not yield the desired result (again, as per docs):
```vaadin-text-field[focus-ring]```
Results in what you see in the attached image. I want to replace the blue focus ring with my own black one, not have a black border around the entire field and the blue one still around the input. How do I do that? I tried to combone vaadin-text-field::part(input-field) with the focus-ring selector but it didn't help.
![image.png|423x66](upload://yERI2kliuVgFPoljyVZ3xkIY4RG.png)
![image.png|1020x114](upload://3ENHPeb8GiKrZShJxipP33IsxjA.png)
2

Nevermind, I had my selectors wrong:
vaadin-text-field[focus-ring]::part(input-field) works

3

In V24.3, there is actually an even easier way:
–focus-ring-width and --focus-ring-color

Those properties can be applied globally to set the same styling on ALL components

4

(and I just realized we’ve forgotten to add them to the documentation!)