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

<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:

<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):

<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.

<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>