Method render

examples/lit/hotkey/src/app.ts:198–561

()

  }

  render() {
    return html` <div class="app">
      <header>
        <h1>@hotkey</h1>
        <p>
          Register keyboard shortcuts with callback context containing the
          hotkey and parsed hotkey information.
        </p>
      </header>

      <main>
        <section class="demo-section">
          <h2>Basic Hotkey</h2>
          <p>Press <kbd>${formatForDisplay('Mod+S')}</kbd> to trigger</p>
          <div class="counter">Save triggered: ${this.saveCount}x</div>
          <pre class="code-block">
${`@hotkey('Mod+S', (_event, { hotkey, parsedHotkey }) => {
  console.log('Hotkey:', hotkey)
  console.log('Parsed:', parsedHotkey)
})`}</pre
          >
        </section>

        <section class="demo-section">
          <h2>With requireReset</h2>
          <p>
            Hold <kbd>${formatForDisplay('Mod+K')}</kbd> — only increments once
            until you release all keys
          </p>
          <div class="counter">Increment: ${this.incrementCount}</div>
          <p class="hint">
            This prevents repeated triggering while holding the keys down.
            Release all keys to allow re-triggering.
          </p>
          <pre class="code-block">
${`@hotkey('Mod+K', { requireReset: true })
private _handleIncrementing(
  _event: KeyboardEvent,
  { hotkey }: HotkeyCallbackContext,
) {
  this.incrementCount++
}`}</pre
          >
        </section>

        <section class="demo-section">
          <h2>Conditional Hotkey</h2>
          <p>
            <kbd>${formatForDisplay('Mod+E')}</kbd> is currently
            <strong>${this.enabled ? 'enabled' : 'disabled'}</strong>
          </p>
          <button @click=${() => (this.enabled = !this.enabled)}>
            ${this.enabled ? 'Disable' : 'Enable'} Hotkey
          </button>
          <pre class="code-block">
${`@property({ type: Boolean }) enabled = true

@hotkey('Mod+E')