Archive and Trash Patterns

Archive Summary

A static archive action summary shows Invoice question, Archive action, Archive folder destination, and Ready to move status.

Program

Archive summaries should show what will move and where it will go before any live item move.

archive_action_summary.html
Visuals: captured from real browser rendering
<section class="archive-summary" aria-labelledby="archive-summary-title"><h2 id="archive-summary-title">Archive action summary</h2><dl>
  <div><dt>Item</dt><dd>Invoice question</dd></div>
  <div><dt>Action</dt><dd>Archive</dd></div><div><dt>Destination</dt><dd>Archive folder</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Ready to move</span></dd></div></dl>
  <p class="check">Learner check: the archive destination is visible before any item moves.</p>
  <p class="note">Static archive action summary only; no archive service, trash service, deletion service, restore service, storage, route, API, network, script, event listener, form submit, input, checkbox, analytics, timer, object URL, download, service worker, undo service, account service, session mutation, or live item move runs.</p></section>
<style>
  .archive-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .archive-summary dl { display: grid; gap: 8px; margin: 0; }
  .archive-summary dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .archive-summary dt { color: #475569; }
  .archive-summary dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the archive summary.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show item row.

    The item is exact pinned data.
    The item is exact pinned data.

  3. Show action and destination rows.

    The action and destination are exact pinned data.
    The action and destination are exact pinned data.

  4. Render ready-to-move status.

    The status badge says the item is ready to move.
    The status badge says the item is ready to move.

  5. Check archive readback.

    The check says the archive destination is visible before any item moves.
    The check says the archive destination is visible before any item moves.

  6. Check archive honesty.

    Item, action, destination, status, and no live item move.
    Item, action, destination, status, and no live item move.
step flow step(1) labels the source, step(2) shows the item, step(3) shows action and destination rows, step(4) shows ready-to-move status, step(5) checks the archive readback, and step(6) checks the honesty note.
archive readback The section heading names the archive action summary surface.
archive rows Item, Action, Destination, and Status values are exact pinned data.
no live item move The lesson should not imply archive services, trash services, deletion services, restore services, storage, routes, APIs, networks, scripts, event listeners, form submits, inputs, checkboxes, analytics, timers, object URLs, downloads, service workers, undo services, account services, session mutations, or live item moves.