Pressed Down Kbd for Svelte

In shortcut trainers and on-screen keyboards that react to the keys the user presses, and in step-by-step tutorials that show which key to hold. In static documentation, leave every key flat.

translate-y-0.5 moves the cap down by two pixels without affecting the layout around it, so the next key doesn't shift. The Kbd has no shadow, so there's nothing to remove; if you add a shadow to your caps, drop it on the pressed one to make it look flush.

As long as the key is held. In an interactive demo, add the class on keydown and remove it on keyup; in a static illustration it stays on.

Yes, that's how a chord works: ⌘ goes down, then K. Put the class on each key that's held, and the caps that aren't stay up.

A very short transition, under 100 milliseconds, feels like a key springing back; a longer one feels sluggish. Respect reduced motion by dropping the transition.

A two-pixel shift is easy to miss, and screen readers don't see it at all. Pair it with a color change, as the Active State example does, and say what's pressed in text when it matters.