Keyboard Shortcuts
`<pura-kbd-shortcuts>` opens a native modal `<dialog>` that renders, as key-style chips, the shortcuts declared as `<pura-shortcut>` children (pure data carriers, with no UI of their own) grouped by section. Use it when your app has several shortcuts and you want a standard help panel (for example opened with "?"). It is agent-native: each instance registers in `window.__puraKbdShortcuts` and reflects `data-pura-kbd-shortcuts` (id), `data-count`, and `data-key` on the host, while exposing the body as `role="list"` with each row in an `aria-label` of "label: keys", so an agent can discover, inspect, and trigger the help without touching the shadow DOM.
Preview
<button id="abrir-atalhos">View keyboard shortcuts (or press ?)</button>
<pura-kbd-shortcuts id="ajuda" title="Keyboard shortcuts" key="?">
<pura-shortcut keys="⌘ K" label="Open search" section="General"></pura-shortcut>
<pura-shortcut keys="⌘ /" label="Show shortcuts" section="General"></pura-shortcut>
<pura-shortcut keys="G I" label="Go to inbox" section="Navigation"></pura-shortcut>
<pura-shortcut keys="G C" label="Go to calendar" section="Navigation"></pura-shortcut>
<pura-shortcut keys="⌘ Enter" label="Send" section="Editing"></pura-shortcut>
<pura-shortcut keys="Esc" label="Cancel" section="Editing"></pura-shortcut>
<span slot="footer">Press ? anytime to reopen this help.</span>
</pura-kbd-shortcuts>
<script type="module">
import "/pura/lib/kbd-shortcuts.js";
const ajuda = document.getElementById("ajuda");
document.getElementById("abrir-atalhos").addEventListener("click", () => ajuda.open());
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | Keyboard shortcuts | Title shown in the dialog header (the "header" slot takes priority when filled). |
key | string | — | Key combo that opens/toggles the help when pressed anywhere in the document, e.g. "?" or "Meta+/" / "⌘ /". Empty = no binding. Accepts symbol tokens (⌘ ⌥ ⌃ ⇧) or names (Meta Cmd Ctrl Control Alt Option Shift) plus a final key, separated by a space or "+". |
open | boolean | false | Reflects and controls the open state; the presence of the attribute opens the dialog (showModal). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/kbd-shortcuts.js"></script>import "./pura/lib/kbd-shortcuts.js";