page-info

Document provenance disclosure panel showing authorship, trust badges, content history, and AI provenance declarations.

Overview

The <page-info> component is a disclosure panel for document provenance. Its trust bar summary shows author, date, and a trust badge at a glance. Clicking expands a detail panel with authorship, history, and AI provenance information.

Without JavaScript, the <details>/<summary> structure provides native expand/collapse behavior. With JS, the component adds relative time rendering and reading time computation.

<page-info>
  <details>
    <summary>
      <span class="page-info-author">
        <a href="/team/jane" rel="author">Jane Doe</a>
      </span>
      <span class="page-info-sep" aria-hidden="true">&middot;</span>
      <time datetime="2026-03-15" data-relative>
        15 March 2026
      </time>
      <span class="page-info-sep" aria-hidden="true">&middot;</span>
      <span class="page-info-badge"
            data-provenance="human-ai-assisted"
            data-trust="declared"
            aria-label="Content provenance: human-written, AI-assisted">
        Human-written, AI-assisted
      </span>
    </summary>
    <nav class="page-info-panel">
      <section>
        <h2 class="page-info-section-heading">Author</h2>
        <ul class="page-info-author-list">
          <li>
            <address>
              <a href="/team/jane" rel="author">Jane Doe</a>
              <span class="page-info-role">Lead author</span>
            </address>
          </li>
        </ul>
      </section>
      <section>
        <h2 class="page-info-section-heading">History</h2>
        <dl>
          <dl-item>
            <dt>Published</dt>
            <dd><time datetime="2026-01-10">January 10, 2026</time></dd>
          </dl-item>
          <dl-item>
            <dt>Last updated</dt>
            <dd>
              <time datetime="2026-03-15" data-relative>
                15 March 2026
              </time>
            </dd>
          </dl-item>
          <dl-item>
            <dt>Version</dt>
            <dd>1.4.0</dd>
          </dl-item>
        </dl>
      </section>
      <section>
        <h2 class="page-info-section-heading">How this was made</h2>
        <dl>
          <dl-item>
            <dt>Authorship</dt>
            <dd>Human-written with AI assistance</dd>
          </dl-item>
          <dl-item>
            <dt>AI tools used</dt>
            <dd>Claude Sonnet 4 &mdash; research and drafting</dd>
          </dl-item>
          <dl-item>
            <dt>Human review</dt>
            <dd>Substantial edit</dd>
          </dl-item>
        </dl>
      </section>
    </nav>
  </details>
</page-info>

Auto Mode

When the CMS cannot easily render the full static markup, auto makes the component self-contained. It reads provenance information from <meta> tags in the page <head> and renders the panel automatically.

Required Meta Tags

AI Provenance Vocabulary

The content-provenance meta tag uses a controlled vocabulary, ordered from most human-controlled to least:

Value	Display Label
`human`	Human written
`human-ai-assisted`	Human-written, AI-assisted
`ai-human-edited`	AI draft, human edited
`ai-human-reviewed`	AI-generated, human-reviewed
`ai-generated`	AI-generated
`synthesized`	Synthesized from sources
`translated`	Translated
`migrated`	Migrated content

Trust Tiers

The badge data-trust attribute indicates the verification level. Currently, only declared is active (cryptographic verification is planned).

Tier	`data-trust`	Badge Style	Meaning
0	`undeclared`	Neutral	No provenance metadata
1	`declared`	Warning	Provenance claimed, not verified
2	`domain-anchored`	Info	Public key reachable at author's domain
3	`verified`	Success	DOM content matches cryptographic signature
—	`failed`	Error	Signature present but content doesn't match

Attributes

Attribute	Values	Default	Description
`auto`	Boolean	—	Render from `<meta>` tags instead of light DOM
`og-preview`	Boolean	—	Show Open Graph social preview card (planned)

Events

Event	Detail	Description
`page-info:verified`	`{ status: string, tier: number }`	Fired when trust assessment completes. Bubbles.

Relationship to `<page-meta>`

<page-meta> is a simpler, composable sub-pattern focused on metadata display and JSON-LD. <page-info> is the full disclosure panel with trust bar, author details, and provenance sections. They can be used independently or together.

Accessibility

<details>/<summary> provides native expand/collapse without JavaScript
Trust badges include aria-label with the full provenance description
Separator dots use aria-hidden="true"
Section headings provide landmarks within the expanded panel
Relative time text replaces the <time> content but the datetime attribute preserves the machine-readable date