Sync status

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<span class="tui-sync" role="status" data-state="saved">
  <span class="tui-lamp" data-on aria-hidden="true"></span>
  <span class="tui-sync__text">Saved</span>
  <span class="tui-sync__detail">2 min ago</span>
</span>

<!-- Change data-state to "saving" or "offline" and the words with it. -->

import { setSync, syncText } from '/kit/kit.mjs';

const legend = document.querySelector('.tui-sync');
setSync(legend, 'saving');                     // lamp amber and blinking, "Saving…"
await save();
setSync(legend, 'saved', 'just now');          // lamp green, "Saved just now"
setSync(legend, 'offline', 'changes kept on this device');

syncText('offline');                            // 'Offline'

Needs kit.css only, no script. How to install the kit.

• It is role="status", a polite live region, so a screen reader says “Saving…”, then “Saved”, as the words change, without moving the focus or interrupting what it is reading.
• The state is the word. The lamp is hidden from a screen reader and agrees with the words; amber, green and red are never the only sign, and the three words differ in their first letter and length.
• The blink while it saves is the kit’s lamp blink, 1.2 seconds a step; it stops under reduced motion and the lamp stays lit amber.
• Say Saved only when the work is kept, and Offline as soon as it cannot be. The words are the primary ink and the small print the secondary, both above 4.5:1 on the plate.
• It is not a control and takes no focus; on a phone it is the same size and sits in the line of the thing it describes.

The status line the kit already has, with its lamp, drawn as a legend whose colour comes from one attribute. The lamp is the kit’s own, so every finish draws it as it draws any lamp, and the blink for saving is the lamp’s own blink. The words are changed by the page, and the script does no more than change the attribute and the words together.