Clipboard

<%# Markup for the clipboard (copy & completion feedback) demo.
    Copies via navigator.clipboard and announces completion in a role="status" live
    region. For localization the completion messages are passed via the copied-label /
    error-label 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') %>">
  <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"
    role="status"
    aria-live="polite"
    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.
 */

.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);
  border-radius: 0.375rem;
  background: var(--accent);
  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}`);
});