Kbd

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<!-- One cap per key -->
<span class="tui-kbd-combo"><kbd class="tui-kbd">Ctrl</kbd><kbd class="tui-kbd">K</kbd></span>

<!-- Or let the script pick the keys for the platform: ⌘ K on a Mac, Ctrl K elsewhere -->
<span data-kbd="Mod+K"></span>
<span data-kbd="Mod+Shift+P" data-kbd-size="sm" data-kbd-plus></span>

<!-- Inside a sentence -->
<p>Press <kbd class="tui-kbd tui-kbd--sm">Esc</kbd> to close it.</p>

<!-- A symbol names itself for a screen reader -->
<kbd class="tui-kbd"><span aria-hidden="true">⌘</span><span class="tui-kbd__name">Command</span></kbd>

import { kbdLabels, kbdHTML, wireKbd } from '/kit/kit.mjs';

kbdLabels('Mod+Shift+K', { mac: true });
// [{ text: '⌘', name: 'Command', key: 'meta' }, { text: '⇧', … }, { text: 'K', … }]

el.innerHTML = kbdHTML('Mod+K', { size: 'sm', plus: true });
wireKbd(container);   // fills every [data-kbd] under it

Needs kit.css and kit.mjs. How to install the kit.

• A <kbd> is text, not a control: it is not focusable and it does nothing. To press something, use a key.
• A symbol cap is hidden from assistive technology and its name is spoken instead, so ⌘ is read “Command” and ⇧ “Shift”, not by their code points.
• The cap is 22px tall at its default size and the label inside is 11px semibold in the second ink, so it stays legible in both finishes.
• Where a shortcut differs by platform, the visitor sees their own; do not print the Mac symbols to everyone.
• The pressed state is a second cue, never the only one: it changes with a real key press and is not needed to use a page.

A cap is the key’s own anatomy scaled down: a face gradient with the catch-light along its top edge, a skirt of the darker metal one or two pixels below, and a shadow under that. Its dish is a second, lower face inset 2px (concentric with the cap, so its corner is the cap’s less the rim) with a soft shadow along its upper wall. Held, the cap drops by the height of its skirt and takes the pressed light, exactly as a key does. kbd.mjs holds a small table of key names, each with its Mac glyph, its printed word elsewhere and what to say aloud; the rest is arithmetic and string-building, exported for tests.