`. They carry the ring classes anyway, which costs nothing: `:focus-visible` never matches a non-focusable element. The moment you compose one onto a real control with `asChild`, the ring is already there. This also means you don't have to tell the component it's interactive — there's no `interactive` prop to forget, and nothing that can fall out of sync with whether the element is actually focusable. If you reach for `tabIndex` instead of `asChild`, that works too. ## Turning off the offset [#turning-off-the-offset] By default the ring sits 2px clear of the element, over a background-colored gap, so it stays legible against the element's own fill. For something flush inside a container — a cell in a grid, a row in a scrolling list — that gap punches a hole in the surrounding surface. Pass `offset: false`: ```tsx

Flush row

``` The rule behind that: **`offset: true` means the gap is painted in the *page* background** (white, or `gray-dark-950` in dark). An element sitting on any other surface — a tinted table header, a coloured chip — needs a gap that matches *that* surface, so it turns the offset off and supplies its own pair. `DataTable`'s sortable header is the worked example: its `thead` is `bg-brand-50/90`, so a page-coloured gap would read as a white band cut out of the header. ```tsx cn( focusStyles({ offset: false }), 'focus-visible:ring-offset-2 focus-visible:ring-offset-brand-50 dark:focus-visible:ring-offset-brand-950', ) ``` ## Rows stacked in a scroller [#rows-stacked-in-a-scroller] Rows that sit flush against each other inside a scrolling list — `TreeSelect`'s tree — can't take an outer ring at all: the scroller clips it at the edges, and the next row paints over its bottom edge. `inset: true` draws the ring inside the element's own edge instead. Pair it with `offset: false`: ```tsx

Tree row

``` ## Controls whose focus lives elsewhere [#controls-whose-focus-lives-elsewhere] Some controls put the real focus on a visually-hidden `` and mirror the state onto the parts you can actually see — `Checkbox`, `RadioGroup`, `Switch`, `ChoiceCardGroup`. `:focus-visible` can never match those parts, because they are never focused. Zag sets a `data-focus-visible` attribute on them instead, and `source` keys the ring off that: ```tsx focusStyles({ source: 'data-focus-visible' }); ``` This source emits no `outline-none`: the part it lands on isn't focusable, so there's no native outline to suppress. Most consumers never need this — reach for it only when you're styling a part of an Ark/Zag primitive yourself. Zag only sets the attribute for *keyboard* focus, so the ring stays out of the way on a mouse click, exactly like `:focus-visible`. ## API [#api] ```ts import { focusStyles, type FocusStylesOptions } from '@42-central/ui-react'; focusStyles(); // brand ring + offset (default) focusStyles({ offset: false }); // brand ring only focusStyles({ ring: 'palette' }); // --c-text, for a nested control focusStyles({ offset: false, inset: true }); // inside the edge, for flush rows focusStyles({ source: 'data-focus-visible' }); // Zag-driven controls ``` Width and alpha are deliberately *not* options. Every ring the kit draws is 2px and fully opaque — that consistency is the whole point of having one utility. `focusStyles` lives on the package root (`@42-central/ui-react`), alongside [`cn`](/docs/theming) and [`COLORS`](/docs/colors). It returns a plain class string, so it composes with `cn` like any other. Your Tailwind build needs to see the kit's classes for these to be generated. The `@source "../node_modules/@42-central/ui-react/dist/**/*.js"` line from the [install guide](/docs) already covers it.