Focus ring

Utilities for consistent focus treatment.

Quick reference

Class	Styles
`af-focus-ring:focus-visible`	`outline: var(--af-focus-ring-width) solid var(--af-focus-ring-color)` + offset
`af-focus-ring-inset:focus-visible`	inset ring via `box-shadow`
`af-focus-none:focus-visible`	`outline: none`

Focus ring

<button class="af-btn af-focus-ring">
  Tab to focus
</button>

Inset focus ring

<button class="af-btn af-focus-ring-inset">
  Tab to focus
</button>

No focus outline

<button class="af-btn af-focus-none">
  Tab to focus
</button>

All focus utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.