Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-provenance
Declare how content was made — human, AI-assisted, AI-generated, translated, synthesized, or migrated. CSS-only indicators for authorship provenance.
Overview
The data-provenance attribute declares how content was produced. It answers how was this made? — not who wrote this edit? (that's data-author) and not is this rendering verified? (that's data-trust, scoped to <page-info> badges).
Trust levels can be applied at the page level (on <html> or <article>) or scoped to individual sections. Extension tokens compose with a core value via space-separation.
Basic usage
<!-- Whole-page authorship declaration --><article data-provenance="ai-assisted"> <h1>Migration Guide</h1> <p>This guide was written with AI assistance.</p></article> <!-- Section-level provenance override --><article data-provenance="ai-assisted"> <section data-provenance="human"> <h2>When to Migrate</h2> <p>Written from direct experience...</p> </section> <section data-provenance="ai-generated"> <h2>API Reference</h2> <p>Auto-generated from the OpenAPI spec...</p> </section></article>Core Tokens
Pick exactly one core token as the primary authorship declaration.
| Token | Meaning | Visual Treatment |
|---|---|---|
human |
Written entirely by a person | No indicator (the default assumption) |
ai-assisted |
Human wrote with AI tooling | Subtle border accent |
ai-generated |
Primarily AI-generated content | Background tint + border accent |
Extension Tokens
Compose one or more extension tokens alongside a core value with space-separation. Useful for content that has been translated, synthesized from sources, or migrated from another system.
| Token | Meaning |
|---|---|
translated |
Derived from another language |
synthesized |
Aggregated or summarized from cited sources |
migrated |
Moved from another system; may have been reformatted |
Composed tokens
<!-- AI-generated then translated from English to French --><section data-provenance="ai-generated translated"> <h2>Guide d'installation</h2> <p>Contenu généré puis traduit.</p></section>Related attributes
The three attributes below are orthogonal — each answers a separate question. Use them together as needed.
| Attribute | Answers | Vocabulary |
|---|---|---|
data-provenance |
How was this content made? | human, ai-assisted, ai-generated, translated, synthesized, migrated |
data-review |
What review did it receive? | unreviewed, fact-checked, editor-reviewed |
data-status |
What's its publication state? | draft, published, archived |
All three together
<article data-provenance="ai-assisted" data-review="editor-reviewed" data-status="published"> <h1>Migration Guide</h1> <p>AI-drafted content that an editor reviewed and approved.</p></article>Labeled Badges
Add the labeled class to show a visible text badge via ::before. Without this class, provenance indicators are purely structural.
Labeled badges
<section data-provenance="ai-assisted" class="labeled"> <h2>Getting Started</h2> <p>AI-assisted content with a visible badge.</p></section> <section data-provenance="ai-generated" class="labeled"> <h2>API Reference</h2> <p>AI-generated content with a visible badge.</p></section> <section data-status="draft" class="labeled"> <h2>Roadmap</h2> <p>Work in progress.</p></section>With Change Tracking
Provenance and <ins>/<del> change tracking are complementary. data-provenance declares the authorship model for the whole element; inline edits show specific changes, with data-author identifying who made each edit.
Provenance + change tracking
<article data-provenance="ai-assisted"> <p> The migration requires <del datetime="2026-02-15" data-author="claude" data-reason="correction"> Node.js 16 </del> <ins datetime="2026-02-15" data-author="tpowell" data-reason="review"> Node.js 20 LTS </ins> or later. </p></article>CSS Tokens
Provenance and review colors are exposed as custom properties that themes can override.
Theme-overridable tokens
/* Theme-overridable provenance / review / status colors */[data-provenance] { --provenance-color-ai-assisted: oklch(65% 0.15 250); --provenance-color-ai-generated: oklch(65% 0.18 290); --provenance-color-translated: oklch(65% 0.14 200); --provenance-color-synthesized: oklch(65% 0.14 170); --provenance-color-migrated: oklch(65% 0.10 50);} [data-review] { --review-color-fact-checked: oklch(60% 0.15 160); --review-color-editor-reviewed: oklch(60% 0.18 145);} [data-status] { --status-color-draft: oklch(70% 0.15 75);}JavaScript API
No JavaScript is needed. The attribute is queryable via standard DOM methods.
Querying provenance
<section> <h2>Meta-tag contract</h2> <p>The page-level provenance declaration also appears as <code><meta name="vb:provenance"></code> in the document head. See <a href="/docs/specs/meta-tag-contract/">the meta-tag contract</a> for the full mapping between DOM attributes, <code><meta></code> tags, and Schema.org JSON-LD.</p></section> <section> <h2>Accessibility</h2> <ul> <li>Provenance 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 provenance level in visible text content via <a href="/docs/elements/web-components/page-info/"><code><page-info></code></a>.</li> </ul></section>