Consider button focus rings on immediate child

[danirabbit]

Problem

We have some issues with focus rings being outside of buttons like clipping in linked styles or when there isn’t technically any margin around the button or some issue with z axis ordering or clipping in overlays. Lots of little edge cases that make focus rings outside of the button break

Proposal

Maybe instead, we should apply the focus style to the immediate child of the button (likely a label or icon) as a background

Prior Art

This would look more similar to the flat button focus styles and indeed maybe we could combine a lot of the focus style code this way as well

[danirabbit]

In practice, looks like:

[cassidyjames]

Hmmmmm... functionally I think it makes sense, but it's quite an aesthetic departure. Have you investigated using inset shadows and/or outline with a negative outline-offset to keep the outlined look but placing the glow on the inside of the widget instead of the outside?

I very briefly started poking at that approach in the focus-inside branch, but didn't get a chance to get very far.

[danirabbit]

Yeah, I'm not in love with it, but I wanted to record it somewhere as a possible solution.

I haven't spend any time working on a solution for outlines inside of elements