Compare and diff

Preview Available in release assets

Compare two authored versions while preserving reading order and expressing removals and additions with native HTML rather than color alone.

Compare and diff in context

<figure class="thin-compare-diff" aria-labelledby="policy-change-caption">
  <figcaption id="policy-change-caption">Shipping policy change</figcaption>
  <div class="thin-compare-grid">
    <section aria-labelledby="before-title">
      <h3 id="before-title">Before</h3>
      <p>Orders ship in <del>five to seven business days</del>.</p>
    </section>
    <section aria-labelledby="after-title">
      <h3 id="after-title">After</h3>
      <p>Orders ship in <ins>two to four business days, excluding regional holidays and unusually long customs inspections</ins>.</p>
    </section>
  </div>
  <p class="thin-diff-summary">
    <strong>Summary:</strong> The estimated shipping window changed from five–seven to two–four business days; regional holidays and customs inspections are now explicit exclusions.</p>
  </figure>

Show code

<figure class="thin-compare-diff" aria-labelledby="policy-change-caption">
  <figcaption id="policy-change-caption">Shipping policy change</figcaption>
  <div class="thin-compare-grid">
    <section aria-labelledby="before-title">
      <h3 id="before-title">Before</h3>
      <p>Orders ship in <del>five to seven business days</del>.</p>
    </section>
    <section aria-labelledby="after-title">
      <h3 id="after-title">After</h3>
      <p>Orders ship in <ins>two to four business days, excluding regional holidays and unusually long customs inspections</ins>.</p>
    </section>
  </div>
  <p class="thin-diff-summary">
    <strong>Summary:</strong> The estimated shipping window changed from five–seven to two–four business days; regional holidays and customs inspections are now explicit exclusions.</p>
  </figure>

Anatomy

Figure
Comparison caption
Before and after labelled sections
Native del and ins changes
Plain-language summary

Variants and sizes

Side-by-side comparison
Stacked narrow comparison
Inline prose diff
Long change summary

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Narrow container
Wide container
Uneven content lengths
Long unbroken content
No changes stated in text
Right-to-left content
Forced colors
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Compare and diff is static. Links and controls in either version retain native behavior; interactive acceptance or editing belongs to a separate application workflow.

Accessibility

Use explicit Before and After headings, native del and ins elements, and a concise text summary of the material change. Do not rely on red, green, strike-through, columns, or source order alone to identify meaning.

Contract

COMPOSE

Basis

Native headings, lists, time, and table/content relationships; no APG widget

Evidence

tests/unit/library/content-patterns.test.ts

API

Use figure.thin-compare-diff with a figcaption, a .thin-compare-grid containing labelled semantic sections, native del and ins elements, and a .thin-diff-summary. --thin-compare-min tunes when columns fit intrinsically.

Behavior tier: native

Custom properties

PropertyDefaultDescription

--thin-compare-min18remMinimum comparison column size used by the intrinsic grid.

Fallback

Caption, Before and After headings, native insertion and deletion semantics, and the plain-language summary remain understandable without CSS or JavaScript.

Assets and dependencies

/components.css

Dependencies: None

Source: packages/ui/src/items/compare-diff/style.ts