Utilities

Pipeline’s utility classes, including focus-ring helpers for accessible focus styling.

Accessibility

• focus-ring: resets browser default focus styling and displays a ring when the element is focused (uses --default-ring-width)
• focus-ring-<n>: sets ring width to npx via ---focus-ring-width (e.g. focus-ring-1, focus-ring-2); pair with focus-ring. Offset width stays 1px. Arbitrary lengths like focus-ring-[3px] are supported
• focus-ring-offset-<color>: changes the offset color of the focus ring to match the background color of its parent