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.
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.
Basic usage
<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.
Static views
<!-- Server-rendered final view (no JS needed) --><change-set view="final"> <p> <del>Old API endpoint</del> <ins>New API endpoint</ins> is now live. </p></change-set> <!-- Original view --><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.
Multiple changes
<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
Events and programmatic control
{ console.log(e.detail.view); // 'tracking' | 'final' | 'original'}); // Programmatic controlconst cs = document.querySelector('change-set');cs.view = 'final'; // Show only insertionscs.view = 'original'; // Show only deletionscs.view = 'tracking'; // Show both/code-blockEvents
| Event | Detail | Description |
|---|---|---|
change-set:view |
{ view: string } |
Fired when the view mode changes. Bubbles. |
Accessibility
- Toggle buttons use
aria-pressedto indicate the active view - The controls
<nav>hasaria-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