The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

Focus

A consistent focus ring helps with predictable keyboard navigation. Together with --pc-color-focus, these tokens create a uniform focus state for Placer Toolkit components.

Custom property	Default value
`--pc-focus-ring-width`	`0.1875rem` (3 px)
`--pc-focus-ring-style`	`solid`
`--pc-focus-ring`	`var(--pc-focus-ring-width) var(--pc-focus-ring-style) var(--pc-color-focus)`
`--pc-focus-ring-offset`	`0.0625rem` (1 px)

See the focus ring in action by navigating this form example with your keyboard.

<form>
    <pc-input label="Text input">
        <span slot="hint">
            Press <kbd>Tab</kbd> to move focus to other interactive elements.
        </span>
    </pc-input>

    <pc-checkbox>Checkbox</pc-checkbox>

    <pc-button>Button</pc-button>
</form>

<style>
    form > * + * {
        display: block;
        inline-size: fit-content;
        margin-block-start: var(--pc-spacing-m);
    }
</style>

Code

Edit