← →

Hotkey

<pura-hotkey> registers a global keyboard shortcut on the document and fires the `trigger` event when the combo is pressed, and it can activate a target element via CSS selector without writing any script. Use it when you need shortcuts (mod+k, Ctrl+Shift+P, etc.) that open dialogs, trigger buttons, or drive any control declaratively. Being agent-native, it reflects data-* on the host (data-pura-hotkey, data-keys, data-combo, data-target), exposes aria-keyshortcuts, and registers itself in window.__puraHotkeys with .list(), .find(keys), and .trigger(keys), letting agents enumerate and fire every shortcut on the page without touching the shadow DOM.

Preview

<button id="abrir-busca">Open search</button>
<dialog id="busca">
  <p>Search opened by the shortcut.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>

<!-- mod+k activates the button (focus + click); the button opens the dialog -->
<pura-hotkey keys="mod+k" target="#abrir-busca"></pura-hotkey>

<script type="module">
  import "/pura/lib/hotkey.js";
  const btn = document.getElementById("abrir-busca");
  const dlg = document.getElementById("busca");
  btn.addEventListener("click", () => dlg.showModal());
</script>

Attributes

Attribute	Type	Default	Description
`keys`	string	—	The combo to bind, e.g. "mod+k", "Ctrl Shift P", "⌘ /". `mod` becomes ⌘ on Apple and Ctrl elsewhere. Empty/absent => no binding.
`target`	string	—	Optional CSS selector; on trigger, the first match is activated (focus + click on buttons/links, or .show()/.open()/.click() if exposed).
`when`	string	—	Optional CSS selector that must exist in the document for the binding to be active (scopes the shortcut to a state).
`disabled`	boolean	false	While present, the binding is inert.
`allow-in-input`	boolean	false	By default the combo is ignored while typing in input/textarea/select/contenteditable. Enable to let it fire inside fields (modifier combos, such as mod+k, always fire).
`prevent-default`	boolean	true para combos com modificador	When set, prevents the browser's default action on keydown. On by default for combos that have a modifier.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/hotkey.js"></script>

JavaScript

import "./pura/lib/hotkey.js";

Events

trigger