change-set

Interactive change tracking group that wraps related ins and del elements with toggle controls for tracking, final, and original views.

Overview

The <change-set> element groups related <ins> and <del> elements into a reviewable unit. Users can toggle between three views: tracked changes (both visible), final text (only insertions), or original text (only deletions).

The view states are CSS-only via the view attribute. JavaScript adds interactive toggle buttons.

<change-set datetime="2026-02-20" author="tpowell"> <p> Send requests to <del>/api/v1/upload</del> <ins>/api/v2/ingest</ins> with a <del>Content-Type: application/xml</del> <ins>Content-Type: application/json</ins> header. </p> </change-set>

View States

State	What's Visible	How to Set
Tracking (default)	Both `<ins>` and `<del>`	No `view` attribute
Final	Only `<ins>` content	`view="final"`
Original	Only `<del>` content	`view="original"`

Static View (No JS)

Set view directly in markup for server-rendered or static pages. No JavaScript is needed for the visual states.

<change-set view="final"> <p> <del>Old API endpoint</del> <ins>New API endpoint</ins> is now live. </p> </change-set>  <change-set view="original"> <p> <del>Old API endpoint</del> <ins>New API endpoint</ins> is now live. </p> </change-set>

Multiple Changes

A single <change-set> can group changes across multiple sections. All <ins> and <del> descendants are toggled together.

<change-set datetime="2026-03-01"> <section> <h3>Endpoint</h3> <p> <del>POST /api/v1/upload</del> <ins>POST /api/v2/ingest</ins> </p> </section> <section> <h3>Content Type</h3> <p> <del>application/xml</del> <ins>application/json</ins> </p> </section> <section> <h3>Response</h3> <p> <del>Plain text status message</del> <ins>Structured JSON with status, data, and errors</ins> </p> </section> </change-set>

Attributes

Attribute	Values	Default	Description
`view`	`final`, `original`	Omitted (tracking)	Controls which content is visible
`datetime`	ISO 8601 date	—	Date of the change set
`author`	String	—	Author of the changes

JavaScript API

// Listen for view changes document.addEventListener('change-set:view', (e) => { console.log(e.detail.view); // 'tracking' | 'final' | 'original' }); // Programmatic control const cs = document.querySelector('change-set'); cs.view = 'final'; // Show only insertions cs.view = 'original'; // Show only deletions cs.view = 'tracking'; // Show both

Events

Event	Detail	Description
`change-set:view`	`{ view: string }`	Fired when the view mode changes. Bubbles.

Accessibility

Toggle buttons use aria-pressed to indicate the active view
The controls <nav> has aria-label="Change view controls"
In final and original views, hidden content uses display: none — it is removed from both the visual and accessibility trees
Without JavaScript, all content is visible in tracking view