feat(Focus): Create inset focus ring for clipped components

What does this MR do?

For some components, the focus ring is clipped because a) it’s applied outside of the element’s bounds, and b) the element’s parent has an overflow setting that visually clips the focus ring.

This provides an alternate focus ring that can be applied inside the bounds of an element when the following conditions are met:

• The current focus ring is clipped by a parent element.
• An inset focus ring doesn’t impact content legibility (for example, overlapping text or icons.

Example

Before	After

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• [-] If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• [-] If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • CustomersDot: mr_url
  • Status Page: mr_url
• [-] Added the ~"component:*" label(s) if applicable.

Security

N/A

Closes #1102 (closed)