Button has odd focus behavior when adding padding

[nicholasrice]

Describe the bug; what happened?

The above SS has padding applied to the fast-button host. This causes the focus rect to draw inside the box of the host because focus is actually on an internal button element. We should move the focus rect to the host element and use :focus-within to account for this.

[chrisdholt]

Let’s remember to include “fast-anchor” as part of this as the styles are shared.

[CuddleBunny]

@chrisdholt - The affected styles are shared so the fix will apply to both.

[nicholasrice]

As discussed in #3792, the problem with my proposed approach is that :focus-within does not follow the same selection rules as :focus-visible.

Instead, the developer should set padding on the internal button element using CSS parts:

fast-button::part(control) {
  padding: 12px
}

We can re-visit this if we ever get a :focus-visible-within selector