Clipboard

<%# Markup for the clipboard (copy & completion feedback) demo.
    Copies via navigator.clipboard, shows the result in the visible feedback slot,
    and hands the announcement to the shared stimeo--announcer your app seats once,
    in its layout. Keep the feedback slot free of live-region semantics — the
    announcer already reads the result, so a role="status" here would say it twice.
    For localization the visible labels come from the copied-label / error-label
    Values and the spoken ones from the announce-copied-text / announce-error-text
    Values. The look per data-state (idle / copied / error) lives in demo.css. %>
<div
  class="clipboard"
  data-controller="stimeo--clipboard"
  data-stimeo--clipboard-feedback-duration-value="2000"
  data-stimeo--clipboard-copied-label-value="<%= t('components.clipboard.demo.copied') %>"
  data-stimeo--clipboard-error-label-value="<%= t('components.clipboard.demo.error') %>"
  data-stimeo--clipboard-announce-copied-text-value="<%= t(
    'components.clipboard.demo.announce_copied'
  ) %>"
  data-stimeo--clipboard-announce-error-text-value="<%= t(
    'components.clipboard.demo.announce_error'
  ) %>">
  <input
    class="clipboard__source"
    type="text"
    readonly
    aria-label="<%= t('components.clipboard.demo.source_label') %>"
    value="https://stimeo.example/share/abc123"
    data-stimeo--clipboard-target="source">
  <button
    class="clipboard__button"
    type="button"
    data-stimeo--clipboard-target="button"
    data-action="click->stimeo--clipboard#copy">
    <%= t("components.clipboard.demo.button") %>
  </button>
  <span class="clipboard__feedback" data-stimeo--clipboard-target="feedback"></span>
</div>

/*
 * Presentation-only styles for the clipboard demo.
 * Success / failure styling switches on the data-state the library sets on the
 * controller element. The feedback slot is a plain visible label — the shared
 * announcer does the reading, so it needs no live-region styling of its own.
 */

.clipboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 32rem;
}

.clipboard__source {
  flex: 1 1 16rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  font: inherit;
  color: var(--fg);
  background: var(--surface-subtle);
}

.clipboard__button {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent-fill);
  border-radius: 0.375rem;
  /* White needs the 700 step behind it: the brand accent (vital-500) measures
     2.99:1 under white, a body-size AA failure. The fill token clears it in both. */
  background: var(--accent-fill);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.clipboard[data-state="copied"] .clipboard__button {
  background: var(--leaf-500);
  border-color: var(--leaf-500);
}

.clipboard[data-state="error"] .clipboard__button {
  background: var(--danger-500);
  border-color: var(--danger-500);
}

.clipboard__feedback {
  flex-basis: 100%;
  min-height: 1.25rem;
  font-size: 0.875rem;
  color: var(--leaf-500);
}

.clipboard[data-state="error"] .clipboard__feedback {
  color: var(--danger-500);
}

// Consumer-side JS for the clipboard demo (optional).
// The library fires stimeo--clipboard:copy on every copy attempt with
// detail { success, text }. The consumer subscribes to add its own behavior
// (analytics, a toast, etc.) — here just a simple log.
document.addEventListener("stimeo--clipboard:copy", (event) => {
  const { success, text } = event.detail;
  console.log(`[clipboard] success=${success} text=${text}`);
});