# Terminal

A dark command bar for showing CLI commands, plus a light token row and inline
CLI references for prose. This is `terminal.css` in `@layer components`.

The terminal sits on a **fixed dark surface in both light and dark mode**. It
reads the `--terminal-*` slots, not the theme surfaces, so it stays dark when
the rest of the page is light. This is intentional: a command bar should look
like a terminal regardless of the page theme. (Contrast bare `<pre>`, which uses
`--bg-inverse` and flips with the theme.)

## The command bar

```html
<div class="terminal">
  <span class="prompt">&gt;</span>
  <span class="cmd">elements install @elements/style</span>

  <button class="copy">
    <span class="default">copy</span>
    <span class="done">✓ copied</span>
  </button>
</div>
```

Parts:

| Class | Role |
|---|---|
| `.terminal` | The dark bar |
| `.terminal > .prompt` | The dim, non-selectable prompt glyph |
| `.terminal > .cmd` | The command text: selectable, scrolls horizontally if long |
| `.terminal > .copy` | A dark copy button |

**Copy is your JavaScript.** Add `is-copied` to the copy button to flip it into
the confirmed state: it hides the `.default` span and shows the `.done` span
(green). The class toggles the look; wiring the clipboard and toggling the class
is your code.

## Caption

`.caption` is a sans-serif label to sit above a terminal block:

```html
<p class="caption">Install the design system:</p>
<div class="terminal">…</div>
```

## Token row

`.token-row` is a light-surface variant for showing a labeled value with a copy
button (an API key, a license token):

```html
<div class="token-row">
  <span class="key">License token</span>
  <span class="val">lic_xxxxxxxx</span>
  <button class="copy">copy</button>
</div>
```

| Class | Role |
|---|---|
| `.token-row` | Bordered soft-background row |
| `.token-row > .key` | The mono label |
| `.token-row > .val` | The mono value (truncates if long) |

## Inline CLI references

For CLI mentions inside prose:

- `.path`: an inline file path chip, e.g. `app/pages/home/template.html`.
- `.cli`: an inline command with a `.prompt` glyph and a `.cmd`.

```html
<p>Edit <span class="path">app/pages/home/template.html</span> and run
   <span class="cli"><span class="prompt">&gt;</span><span class="cmd">elements start</span></span>.</p>
```