Copy key

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

<!-- A value in the key -->
<button class="tui-key tui-copy-key" type="button" data-copy-value="npm install @northwind/cli" aria-label="Copy install command"></button>

<!-- Or the text of an element on the page, which is also what gets selected if the clipboard refuses -->
<code id="cmd">pnpm add @northwind/cli</code>
<button class="tui-key tui-copy-key" type="button" data-copy-from="#cmd" aria-label="Copy the command"></button>

<!-- Dressed by the script; this is what it leaves -->
<button class="tui-key tui-copy-key" type="button" data-copy-value="tok_8c1e" aria-label="Copy token">
  <span class="tui-lamp" aria-hidden="true"></span><span class="tui-copy-key__legend">Copy</span>
</button>
<span class="tui-copy-key__status" role="status"></span>

import { copyFromKey } from '/kit/kit.mjs';

document.addEventListener('tui-copy', (e) => {
  if (!e.detail.ok) hint('Press Ctrl+C or Cmd+C to take the selected text');
});

await copyFromKey(document.querySelector('#token-key'));   // true if the clipboard took it

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

• It is a native <button> named “Copy install command”, with the visible word first in the name so voice control can say it.
• The result is said aloud by a polite status line: “Copied”, or “The clipboard said no. The text is selected; copy it with your keyboard.” The lamp and the legend say the same to the eye, so colour is never the only sign.
• When the clipboard is refused the text is selected where it is, or set in a small labelled field beside the key, and the focus is on it, so the next keystroke can copy it.
• The legend goes back after 1.6 seconds; the focus stays on the key throughout.
• The wink is a 360ms change of the lamp, which reduced motion removes; the lamp stays lit for the whole confirmation. On a phone the cap is 44px tall.

It is the kit’s key with the kit’s lamp set in the cap, dark at rest. Nothing is drawn for the copied stage that the lamp does not already know how to draw: a lit lamp, green for done and amber for a question. One listener on the page answers every key that carries data-copy-value. It asks the clipboard first, then tries the old way from a hidden field, and only when both refuse does it select the text for the person to take. The key’s width is held between Copy and Copied so a toolbar does not shift.