data-trust

Content trust indicators for declaring authorship provenance. CSS-only trust badges for human, AI-assisted, AI-generated, editor-reviewed, and draft content.

Overview

The data-trust attribute declares content provenance on any block element. It provides CSS-only visual indicators that communicate how content was produced and what review it received.

Trust levels can be applied at the page level (on <article>) or scoped to individual sections. Compound values support content that has been both generated and reviewed.

Trust Tokens

Token	Meaning	Visual Treatment
`human`	Written entirely by a human	No indicator (the default assumption)
`ai-assisted`	Human-written with AI tooling	Subtle border accent
`ai-generated`	Primarily AI-generated content	Background tint + border accent
`editor-reviewed`	Reviewed and approved by editor	Green border accent
`draft`	Unreviewed work in progress	Dashed border + muted opacity

Labeled Badges

Add the labeled class to show a visible text badge via ::before. Without this class, trust indicators are purely structural (border and background only).

Compound Values

Space-separated tokens allow composable trust declarations. The ~= CSS selector matches individual tokens within the compound value.

With Change Tracking

Trust indicators and <ins>/<del> change tracking are complementary. data-trust declares the authorship model; inline edits show specific changes, including when a human corrects an AI suggestion.

CSS Tokens

Trust indicator colors are exposed as custom properties that themes can override.

JavaScript API

No JavaScript is needed for trust indicators. The data-trust attribute is queryable via standard DOM methods.

<section>
  <h2>Why <code>data-trust</code> Instead of a Class</h2>
  <ul>
    <li><strong>Queryable.</strong> <code>document.querySelectorAll('[data-trust~="ai-generated"]')</code> finds all AI content</li>
    <li><strong>Composable.</strong> Space-separated tokens matched by the <code>~=</code> selector</li>
    <li><strong>Semantic.</strong> Data attributes declare <em>what the content is</em>, not <em>how it looks</em></li>
    <li><strong>Machine-readable.</strong> Crawlers and tools can extract trust signals without understanding CSS classes</li>
  </ul>
</section>

<section>
  <h2>Accessibility</h2>
  <ul>
    <li>Trust indicators are visual-only decorations; the DOM content and ARIA attributes are unaffected</li>
    <li>The <code>.labeled</code> badges use <code>::before</code> pseudo-elements. Screen readers may or may not announce pseudo-element content depending on the browser</li>
    <li>For critical trust disclosure, include the trust level in visible text content (e.g., in a <code><page-meta></code> or <code><page-info></code> component)</li>
  </ul>
</section>