Configuration
Nested configurations afford simple flexibility for complex layouts.
boxShadow
type: string
default: none
Provides access to the box-shadow css property so multiple inner and outer shadows can simply be defined. Use currentColor to refer to the configuration.color property for better re-use.
none
color
type: string
default: -webkit-focus-ring-color
Sets the main color of the the focus tracker. By default, uses the browser's default focus styles. Any valid css value may be used, including helpers like color-mix().
-webkit-focus-ring-color
offset
type: string | number
default: 0
Sets an offset distance. By default, the offset is 0 so that the tracker tightly wraps the edges of the target element. A negative offset will move the tracker inside the bounds of the element. A string may be used to include css units like "0.1rem" or "3px".
-1px
target
type: 'self' | 'target' | HTMLElement
default: 'target'
Sets where the focus tracker's indicator will be positioned. By default, uses 'target' as the target of the focus event. May use 'self' for nested configurations so children show focus on itself, or may pass any other element.
target
thickness
type: string | number
default: auto
Sets how thick the focus tracker's outline should be. By default, uses the browser's default thickness. A string may be used to include css units like "0.1rem" or "3px".
1px