PWA update toast

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

The “new version available” toast for “Kestrel”, a task-list PWA, shown when a service worker has installed a fresh build and is waiting to activate. A light toast rises from just above the bottom nav: lime download tile, “New version available / v2.4.1 · fixes offline sync”, a dark “Reload” button and a dismiss × wrapped in a 36px countdown ring that empties over 10s before auto-dismissing. Reload hides the toast and sweeps a full-screen lime panel up from the bottom, holds “v2.4.1” for 900ms, then sweeps it off the top to reveal the same page with its version pill updated. The detail worth copying is the countdown ring: an SVG circle’s stroke-dashoffset animated once over exactly the auto-dismiss duration, restarted by reflow whenever the toast is re-shown.

Reference behaviour

1. Initial state: dark task list (7 tasks, 2 done) with a “v2.4.0” outline pill in the header; bottom nav with “Today” current in lime; the toast is already visible at bottom:112px and its ring is counting down from full.
2. The ring (r=16, circumference 100.5) animates stroke-dashoffset 0 → 100.5 over 10s linear. At 10s the toast drops 24px and fades over 240ms cubic-bezier(.4,0,1,1).
3. Tap × or press Esc: same exit, immediately.
4. Tap Reload: toast exits; body.wiping — the lime panel translates from 100% to 0 over 520ms cubic-bezier(.2,0,0,1); at 300ms into that, the 56px “v2.4.1” label and “Kestrel · updated” line fade/rise in (200ms/300ms).
5. At 1420ms after Reload: the header pill text becomes “v2.4.1” and turns lime; wiping is swapped for unwiping — the panel translates from 0 to −100% over 520ms cubic-bezier(.4,0,1,1), revealing the page.
6. At 2000ms unwiping is removed; the panel is parked below the viewport again.
7. Tap Simulate update (40px outline button, bottom-left, visible once the toast has gone): version pill resets to “v2.4.0”, the toast re-enters (rise from 24px, 420ms cubic-bezier(.16,1,.3,1); opacity 200ms) and a fresh 10s countdown starts.
8. Task rows toggle their checkbox (lime fill, strikethrough, “done” label) on tap; the nav switches its current item. Neither affects the toast.

Structure

390 × 844
┌────────────────────────────────────┐
│ (54px clearance)                   │
│ Kestrel                  (v2.4.0)  │  h1 28px/800 · version pill
│ Tuesday · 5 open, 2 done           │
│ ┌────────────────────────────────┐ │
│ │ ☑ Ship release notes…    done  │ │  task rows 56px, 14px radius
│ │ ☑ Reply to Loam Studio…  done  │ │
│ │ ☐ Review the drawer scrim 10:30│ │
│ │ ☐ Book dentist…          today │ │
│ │ ...                            │ │
│ └────────────────────────────────┘ │
│ ╭────────────────────────────────╮ │
│ │ ▣ New version available        │ │  toast, bottom 112, 16px radius
│ │   v2.4.1 · fixes offline sync  │ │  [Reload] 36px · (×) ring 36px
│ ╰────────────────────────────────╯ │
│ ✓ Today  ▦ Upcoming  ≡ Lists  ⚙ Settings │  nav 64px
│ (34px clearance)                   │
└────────────────────────────────────┘
      wipe: full-screen lime panel, "v2.4.1" 56px centred

• <header class="top"> — <h1> + .ver pill. <p class="sub"> line.
• <ul class="tasks"> — <li><button role="checkbox" aria-checked> with .box (22px), label span, <small> time.
• <button class="again"> — absolute, left:16px; bottom:112px.
• <div class="toast" role="status" aria-live="polite"> — padding 12px 6px 12px 14px, 10px gaps; .ic tile 36px, .txt (<b> + <small>), <button class="act">Reload, <button class="dis"> containing an SVG ring (.tr track + .pr progress) and a 14px × glyph.
• <div class="wipe" aria-hidden> — absolute inset:0, z-index 5, <b> version and <small> caption.
• <nav class="nav" aria-label="Primary"> — four buttons.

Tokens

:root {
  /* charcoal neutrals */
  --bg: #191a1c;
  --panel: #212326;        /* task rows, nav */
  --panel-2: #2a2d31;      /* row hover */
  --line: #33373c;
  --ink: #f1f0ec;
  --ink-2: #a9aaa4;
  --ink-3: #6f716c;        /* idle nav, checkbox border, times */

  /* accent — lime */
  --lime: #c8f04c;         /* checkbox fill, current nav, toast tile, wipe panel */
  --lime-ink: #1b2400;

  /* toast is light on dark */
  --toast: #f1f0ec;
  --toast-ink: #191a1c;
  --toast-sub: #5f615c;
  --ring-track: rgba(25,26,28,.12);

  /* type */
  --font: "Bricolage Grotesque", system-ui, sans-serif;   /* opsz 12..96, wght 400/600/800 */
  --fs-h1: 28px; --fs-wipe: 56px; --fs-body: 15px; --fs-toast: 14px; --fs-btn: 13px; --fs-meta: 12px; --fs-nav: 11px;

  /* layout */
  --nav-h: 64px;
  --bottom-clear: 34px;
  --toast-bottom: 112px;   /* 34 + 64 + 14 */
  --r-toast: 16px;
  --r-btn: 10px;
  --r-row: 14px;
  --r-box: 7px;
  --ring: 36px; --ring-r: 16; --ring-c: 100.5;

  /* elevation */
  --shadow-toast: 0 12px 32px rgba(0,0,0,.45);

  /* motion */
  --t-micro: 160ms;
  --t-toast: 420ms;
  --t-exit: 240ms;
  --t-count: 10s;
  --t-wipe: 520ms;
  --t-hold: 900ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-emph: cubic-bezier(.2, 0, 0, 1);
}

Typography

Role	Family	Size	Weight	Line-height	Tracking	Case
App title	Bricolage Grotesque	28px	800	1	−0.02em	sentence
Wipe version	Bricolage Grotesque	56px	800	1	−0.04em	as is
Toast title	Bricolage Grotesque	14px	600	1.2	0	sentence, nowrap
Toast subline	Bricolage Grotesque	12px	400	1.4	0	sentence
Reload button	Bricolage Grotesque	13px	600	1	0	sentence
Task label	Bricolage Grotesque	15px	400	1.4	0	sentence
Task time	Bricolage Grotesque	12px	600	1	0	lowercase
Version pill	Bricolage Grotesque	12px	600	1	0	as is
Nav label	Bricolage Grotesque	11px	600	1	0	sentence

Motion

Element	Trigger	Property	From → To	Duration	Easing	Delay
.toast	show	translateY, opacity	24px, 0 → 0, 1	420 / 200ms	--ease-out / linear	0
.toast	hide	translateY, opacity	0, 1 → 24px, 0	240ms	--ease-in	0
.ring .pr	show	stroke-dashoffset	0 → 100.5	10s	linear	0, forwards
.wipe	reload	translateY	100% → 0	520ms	--ease-emph	0
.wipe b/small	reload	opacity, translateY	0, 10px → 1, 0	200 / 300ms	--ease-out	300ms
.wipe	unwipe	translateY	0 → −100%	520ms	--ease-in	1420ms after reload (JS)
.ver	unwipe	color, border-color	ink-3 → lime	160ms	linear	at 1420ms
.box	toggle	background, border	transparent → lime	160ms	linear	0
.act:active	press	scale	1 → .97	0	—	instant

Reduced motion: transitions and animations 1ms; the ring shows full (no countdown drawing) but the 10s auto-dismiss timer still runs; the wipe still cuts to lime and back on the same JS timings.

States

• Toast shown: .toast.on — interactive, ring animating, auto timer armed.
• Toast hidden: no .on — pointer-events:none, “Simulate update” reachable.
• Wiping / unwiping: body.wiping then body.unwiping; the panel is aria-hidden and pointer-events:none throughout.
• Version pill updated: .ver.new — lime text and border.
• Task checked: aria-checked="true", box filled lime with dark check, label strikethrough in --ink-3, time reads “done”.
• Nav current: aria-current="page", lime.
• Row hover: --panel-2.
• Focus-visible: 3px lime outline, 2px offset, on all buttons.

Accessibility

• Toast is role="status" aria-live="polite" so “New version available v2.4.1 · fixes offline sync” is announced once; it does not steal focus.
• Dismiss button label: “Dismiss, auto-closes in 10 seconds”. Esc also dismisses.
• Reload is a plain <button>; in production it posts SKIP_WAITING to the waiting worker and calls location.reload() on controllerchange.
• The wipe panel is aria-hidden decoration; the version pill text change is the accessible signal of the update.
• Tasks are role="checkbox" buttons; the time cell text (“done”) updates with the state.
• Contrast: --toast-sub on --toast 5.6:1; --ink-2 on --bg 8.3:1; --lime-ink on --lime 13.4:1; --ink-3 on --panel 4.5:1.
• Hit targets: Reload 36px tall (give it a 44px ::after hit area on touch), dismiss 36px visual within a 44px row, tasks 56px, nav ≥ 88×52.

Responsive rules

• 390 wide: as specified.
• 360 wide: toast subline may truncate — set white-space:nowrap; overflow:hidden; text-overflow:ellipsis on .txt small.
• ≥ 600 wide: toast caps at max-width:420px, anchored bottom-left of the content column at 24px insets; the wipe stays full-viewport.
• Tablet with a left rail: --toast-bottom becomes 24px (no bottom nav to clear).

Acceptance checklist

• Toast is #F1F0EC on the dark page, 16px radius, at bottom:112px with 16px side insets, casting 0 12px 32px rgba(0,0,0,.45).
• Toast enters over 420ms cubic-bezier(.16,1,.3,1) from 24px below; exits over 240ms cubic-bezier(.4,0,1,1).
• Countdown ring is a 36px SVG (r=16) whose stroke-dashoffset goes 0 → 100.5 over exactly 10s, and the toast auto-dismisses at 10s.
• Re-showing the toast restarts the ring from full (forced reflow between class removal and re-add).
• × and Esc dismiss immediately.
• Reload sweeps a #C8F04C panel up over 520ms cubic-bezier(.2,0,0,1), shows “v2.4.1” at 56px/800, holds 900ms, then sweeps off the top over 520ms.
• The header version pill reads “v2.4.0” before and “v2.4.1” in lime after the wipe.
• “Simulate update” resets the pill to v2.4.0 and re-shows the toast with a new countdown.
• Toast has role="status"; dismiss button label mentions the auto-close.
• Task checkboxes toggle with lime fill and strikethrough; nav current item is lime.
• Focus rings visible on every button.
• Reduced motion keeps the 10s timer and the reload sequence but removes drawn motion.

Implementation notes

Countdown ring — one circle, dasharray equal to the circumference, offset animated over the dismiss duration:

.ring { position:absolute; inset:0; width:36px; height:36px; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:2; }
.ring .pr { stroke:var(--toast-ink); stroke-dasharray:100.5; stroke-dashoffset:0; stroke-linecap:round; }
.toast.on .ring .pr { animation: count 10s linear forwards; }
@keyframes count { to { stroke-dashoffset:100.5 } }

Restart the ring on re-show by forcing a reflow between removing and re-adding the class:

function show() {
  clearTimeout(auto);
  toast.classList.remove('on'); void toast.offsetWidth; toast.classList.add('on');
  auto = setTimeout(hide, 10000);
}

Two-phase wipe with keyframes, not transitions, so the exit direction differs from the entry:

.wipe { position:absolute; inset:0; background:var(--lime); transform:translateY(100%); z-index:5; pointer-events:none; }
.wiping   .wipe { animation: wipe 520ms var(--ease-emph) forwards; }
.unwiping .wipe { transform:none; animation: unwipe 520ms var(--ease-in) forwards; }
@keyframes wipe   { to { transform:none } }
@keyframes unwipe { to { transform:translateY(-100%) } }

Common mistakes: placing the toast over the nav instead of above it; animating the ring with JS intervals (drift, and it fights reduced-motion); forgetting forwards so the ring snaps back to full at 10s just before the toast disappears.