Copy Button

---
/**
 * CopyButton — click copies, the icon turns into a check, the label says so,
 * and both come back. The one thing that needs a script is the clipboard
 * (navigator.clipboard.writeText): the button carries the value or a
 * selector for the element whose text to copy, and the script writes one
 * attribute, data-state, and one line of status text. The icon is
 * AnimatedIcons reading that attribute;
 * the label faces are CSS. A refused clipboard (permission, insecure
 * context) is said out loud — "Copy failed" — not swallowed. The done and
 * error faces hold for the ambient duration token, then return to idle.
 * Two nodes, not one: the button, named by its visible face only, and right
 * after it a visually hidden role="status" span the script writes the done
 * or error label into — the announcement, which a face that only changes
 * opacity never was.
 */
import type { HTMLAttributes } from 'astro/types';
import AnimatedIcons from './AnimatedIcons.astro';

interface Props extends HTMLAttributes<'button'> {
  /** Text to copy. */
  value?: string;
  /** Or: selector of the element whose textContent to copy. */
  target?: string;
  label?: string;
  doneLabel?: string;
  errorLabel?: string;
  /** Icon only; the label stays as the accessible name. */
  compact?: boolean;
}

const { value, target, label = 'Copy', doneLabel = 'Copied', errorLabel = 'Copy failed', compact = false, class: className, ...rest } = Astro.props;
// unique per render: two CopyButtons on a page (CodeTabs renders one per panel) each announce into their own node
const statusId = `ma-copy-status-${Math.random().toString(36).slice(2, 7)}`;
---

<button
  class:list={['ma-copy', compact && 'ma-copy--compact', className]}
  type="button"
  data-ma-copy={statusId}
  data-value={value}
  data-target={target}
  data-state="idle"
  aria-label={compact ? label : undefined}
  {...rest}
>
  <AnimatedIcons icon="copy" />
  <span class="ma-copy__label" aria-hidden={compact ? 'true' : undefined}>
    <span class="ma-copy__face" data-face="idle">{label}</span>
    <span class="ma-copy__face" data-face="done">{doneLabel}</span>
    <span class="ma-copy__face" data-face="error">{errorLabel}</span>
  </span>
</button>
<span class="ma-sr" role="status" id={statusId}></span>

<style is:global>
  @layer components {
    :where(.ma-copy) {
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
      padding: 0.45em 0.8em;
      border: 1px solid var(--ma-edge);
      border-radius: 0.5em;
      background: var(--ma-panel);
      color: var(--ma-ink);
      font: inherit;
      font-size: 0.875em;
      line-height: 1.2;
      white-space: nowrap;
      cursor: copy;
      transition:
        border-color var(--ma-duration-fast) var(--ma-ease-out),
        color var(--ma-duration-fast) var(--ma-ease-out);
    }
    :where(.ma-copy:hover) {
      border-color: color-mix(in srgb, var(--ma-ink) 40%, transparent);
    }
    :where(.ma-copy:focus-visible) {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }
    :where(.ma-copy--compact) {
      padding: 0.45em;
    }
    :where(.ma-copy--compact .ma-copy__label) {
      display: none;
    }
    :where(.ma-copy__label) {
      display: inline-grid;
    }
    /* inactive faces leave the accessibility tree, so the button is named by the one that shows. visibility transitions
       with the fade: a face that arrives is visible at once, one that leaves stays until it has faded. It runs on
       ease-out, not the preset curve — an overshooting spring would flip it hidden and back mid-fade. Hidden faces keep
       their grid cell, so the width stays. */
    :where(.ma-copy__face) {
      grid-area: 1 / 1;
      opacity: 0;
      visibility: hidden;
      translate: 0 var(--ma-travel-hover);
      transition:
        opacity var(--ma-duration) var(--ma-ease),
        translate var(--ma-duration) var(--ma-ease),
        visibility var(--ma-duration) var(--ma-ease-out);
    }
    :where(.ma-copy[data-state='idle'] [data-face='idle']),
    :where(.ma-copy[data-state='done'] [data-face='done']),
    :where(.ma-copy[data-state='error'] [data-face='error']) {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
    }
    /* the state tints are hooks: on a coloured ground a caller points --ma-copy-done / --ma-copy-error at a colour that
       keeps 4.5 : 1 there (the words carry the state either way) */
    :where(.ma-copy[data-state='done']) {
      color: var(--ma-copy-done, color-mix(in srgb, var(--ma-ink) 55%, #3a9a5b));
    }
    :where(.ma-copy[data-state='error']) {
      color: var(--ma-copy-error, color-mix(in srgb, var(--ma-ink) 50%, #d64a2e));
    }
    /* JavaScript off: nothing can reach the clipboard, so the button would do nothing. The text it copies is still on the
       page to select */
    @media (scripting: none) {
      :where(.ma-copy) {
        display: none;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-copy__face) {
        transition: none;
        translate: 0 0;
      }
    }
  }
</style>

<script>
  import { onMount } from '../lib/runtime';

  onMount<HTMLButtonElement>('[data-ma-copy]', (btn, { signal }) => {
    let timer: number | undefined;
    // data-ma-copy holds the id of this instance's status node, the sibling rendered after the button
    const status = document.getElementById(btn.dataset.maCopy!);
    // the hold time is the ambient duration token, read from the element so a preset or an override applies
    const hold = () => {
      const v = getComputedStyle(btn).getPropertyValue('--ma-dur-ambient').trim();
      const n = parseFloat(v);
      return n ? (v.endsWith('ms') ? n : n * 1000) : 1400;
    };
    const say = (text: string) => {
      if (!status) return;
      if (text && status.textContent === text) {
        // the same text again is no change to assistive tech: empty the node, let a frame render it empty, then write
        status.textContent = '';
        requestAnimationFrame(() => requestAnimationFrame(() => (status.textContent = text)));
      } else status.textContent = text;
    };
    // back to idle, and the status empties: a later copy is a change again, and no stale "Copied" is left to browse to
    const idle = () => {
      btn.dataset.state = 'idle';
      say('');
    };
    const settle = (state: 'done' | 'error') => {
      btn.dataset.state = state;
      say(btn.querySelector(`[data-face='${state}']`)!.textContent!);
      clearTimeout(timer);
      timer = window.setTimeout(idle, hold());
    };
    btn.addEventListener(
      'click',
      async () => {
        const text = btn.dataset.value ?? (btn.dataset.target ? document.querySelector(btn.dataset.target)?.textContent : '') ?? '';
        try {
          await navigator.clipboard.writeText(text);
          settle('done');
        } catch {
          settle('error');
        }
      },
      { signal },
    );
    // torn down before a swap: a button that survives it (transition:persist) goes back to idle rather than keeping the
    // "Copied" whose reset timer this just cleared
    signal.addEventListener('abort', () => {
      clearTimeout(timer);
      idle();
    });
  });
</script>