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

Provenance Vocabulary

The vb:provenance meta tag and data-provenance attribute use the controlled vocabulary defined in data-provenance. Core tokens describe how the content was produced; extension tokens compose with a core value.

Token	Type	Display Label
`human`	core	Human written
`ai-assisted`	core	AI-assisted
`ai-generated`	core	AI-generated
`translated`	extension	Translated
`synthesized`	extension	Synthesized from sources
`migrated`	extension	Migrated content

Review level is declared separately via data-review; publication state via data-status.

Verification Tiers

The badge data-trust attribute indicates the runtime verification tier. The component sets it based on whether a cryptographic signature is present and whether the rendered content matches it. See data-trust.

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.

Granularity

The author chooses what to expose by varying the content inside <page-info>. A minimal usage with only an author and date renders a compact trust bar; a fully-populated panel surfaces every metadata section. Same component, different depths — matching how photo EXIF data has a small always-present core (date, format) and expands from there.

The auto attribute renders the entire component from the <meta> tags in the document head, useful when the same metadata is needed for SEO and the visible disclosure panel.

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