クリップボード

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

<%# Second form: hand the result straight to a toast. The copy event carries the
    wording, so `stimeo--clipboard:copy->stimeo--toast#show` is the whole wire — no
    feedback slot and no consumer JS. The announce-* Values are left empty on
    purpose: the toast's message slot is a role="status" live region, so wiring the
    shared announcer as well would read the same result twice. %>
<h3 class="clipboard-toast__heading"><%= t("components.clipboard.demo.toast_heading") %></h3>

<div
  class="clipboard-toast"
  data-controller="stimeo--toast"
  data-stimeo--toast-duration-value="4000"
  data-action="stimeo--clipboard:copy->stimeo--toast#show">
  <div
    class="clipboard"
    data-controller="stimeo--clipboard"
    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/xyz789"
      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>
  </div>

  <div
    role="region"
    aria-label="<%= t("components.clipboard.demo.toast_region_label") %>"
    class="clipboard-toast__region">
    <ol class="clipboard-toast__list" data-stimeo--toast-target="list"></ol>
    <template data-stimeo--toast-target="template">
      <li class="clipboard-toast__item" data-stimeo--toast-target="item" tabindex="0">
        <span role="status" data-toast-slot="message"></span>
      </li>
    </template>
  </div>
</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);
}

/* The second form hands the copy result to a toast instead of the feedback slot. */
.clipboard-toast__heading {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.clipboard-toast {
  display: grid;
  gap: 0.75rem;
}

.clipboard-toast__region {
  min-height: 2.5rem;
}

.clipboard-toast__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clipboard-toast__item {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-surface);
}