On this page

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

We’d love to hear from you. Please reach out to us with any questions or enquiries you may have.

You can contact us via e‐mail at placer.coc.reports+contact@gmail.com.

We look forward to hearing from you!

Got it!

Dangerous lands

Whoa! You’ve wandered into the dangerous lands of Placer Toolkit. Version 0 is out of date and doesn’t meet EU privacy standards, including GDPR.

Want the latest powers, security and compliance? Stick with the current version of Placer Toolkit!

Yikes!

Power up!

Our site is 100 % cookie‐free! We value your privacy, which is why we don’t store any cookies or personal information related to you.

Your browser history is safe from crumbs, and your data is protected, aligning with modern privacy standards like the GDPR. Enjoy your visit without a single digital cookie in sight! 🍪🚫

View our Privacy Policy for more information.

Got it!