# Terminal

Shows a command in a framed block, with tabs as its title bar and a copy button for the open one.

### Known issues
None known.

### Copy the markup
Terminal markup
```html
<div class="luz-terminal">
  <nav class="luz-tabs luz-terminal__tabs" aria-label="Install">
    <a class="luz-tab" href="#install-npm-pane">npm</a>
    <a class="luz-tab" href="#install-cdn-pane">CDN</a>
  </nav>
  <div class="luz-tabpanel luz-terminal__pane" id="install-npm-pane">
    <button class="luz-copy-btn" type="button" data-copy="npm install @luz-ds/core" aria-label="Copy the npm command">Copy</button>
    <pre class="luz-terminal__code" data-lang="bash" tabindex="0" role="region" aria-label="npm command"><code>npm install @luz-ds/core</code></pre>
  </div>
  <div class="luz-tabpanel luz-terminal__pane" id="install-cdn-pane">
    <button class="luz-copy-btn" type="button" data-copy="…" aria-label="Copy the CDN link">Copy</button>
    <pre class="luz-terminal__code" data-lang="html" tabindex="0" role="region" aria-label="CDN link"><code>…</code></pre>
  </div>
</div>
```

Terminal script code
```js
import { initTabs } from "@luz-ds/core/tabs";
import { initCopyButtons } from "@luz-ds/core/clipboard";
initTabs();
initCopyButtons();
```

### Variants and options
One look. Its parts are classes of the block, and the language of a pane decides whether it shows a prompt:

- `.luz-terminal`: The frame: a hairline border, rounded corners, a faint tint of the ink
- `.luz-terminal__tabs`: Goes on the `.luz-tabs` row: the title bar, with small uppercase tabs in the mono face
- `.luz-terminal__pane`: Goes on a `.luz-tabpanel`: holds a copy button and a code block
- `data-lang="bash"`: On the `pre.luz-terminal__code`: the command starts with a `$` prompt. Any other language shows none

### How it works
A tab row, a copy button and a code block in one frame, styled by `components/terminal.css`. It has no script of its own: it is [tabs](https://nandovejer.github.io/luz/docs/components/tabs/), a [copy button](https://nandovejer.github.io/luz/docs/components/copy-button/) and a [code block](https://nandovejer.github.io/luz/docs/components/code/).

- `initTabs()` upgrades the row and shows one pane at a time. `luz.js` runs it.
- `initCopyButtons()` copies the `data-copy` text of the button. `luz.js` runs it.
- The copy button of the open pane sits at the end of the title bar. The code block shows no language label.
- The command is a `.luz-terminal__code`, not a `.luz-code-block`, so `highlight.js` leaves it alone: it adds no second copy button and no syntax colours.
- The prompt is drawn by CSS, so it is not part of the text the button copies.

### Without JavaScript
The title bar is a row of links, and every pane is shown, stacked, in order. Each link jumps to its pane.

The copy buttons are hidden, because they would do nothing. The command stays on the page, so the reader selects and copies it.

### Keyboard and ARIA
Tab moves into the title bar, to the selected tab; Tab again goes to the copy button, then to the command.

- Left and Right (or Up and Down) move to the next tab and select it; Home and End go to the first and the last. In right-to-left text, Left and Right follow the reading direction.
- Enter or Space presses the copy button. Focus stays on it.
- Name the tab row with `aria-label`, and each code block with `aria-label` and `role="region"`: the block scrolls, so it takes focus.
- The visible label of the button is “Copy”; its `aria-label` starts with it and says what is copied. The result is announced in the polite live region shared by every copy button.

### When to use
Use a terminal for a command the reader will paste into a shell, or a line to add to a page, that comes in more than one form: npm or the CDN, one package manager or another.

### When not to use
Do not use a terminal for code that is not a command, or for a single form with nothing to switch.

- For code to read, such as markup or styles, use a [code block](https://nandovejer.github.io/luz/docs/components/code/).
- For one value to copy, use a [copy button](https://nandovejer.github.io/luz/docs/components/copy-button/) next to it.
- For a long session with its output, use a code block the reader can select.