COMPONENTS / TOAST
Toast
Transient confirmation, bottom-right, gone in a few seconds. It reports what already happened ("Published") — it never asks a question. Anything needing a decision is a modal; anything needing to stay visible is inline.
01 / LIVE INSTANCES — ALL STATES
FIRST SPECIMEN IS LIVE — FIRE IT
LIVE DEMO — APPEARS BOTTOM-RIGHT, SELF-DISMISSES
STATIC SPECIMENS
THEME PUBLISHED — LIVE AT /THEMES/PAPER
PUBLISH FAILED — STRIPE KEY MISSING. RETRY FROM SETTINGS.
DRAFT SAVED
SUCCESS DOT: --accent. ERROR DOT: --accent-ink + LONGER TIMEOUT + DISMISS BUTTON. HOVER: TIMER PAUSES. STACK: NEWEST AT BOTTOM, MAX 3 — OLDEST DROPS.
02 / ANATOMY — EXPLODED VIEW
01 REGION
FIXED · BOTTOM/RIGHT --s6 · COLUMN, GAP --s3 · Z 100
FIXED · BOTTOM/RIGHT --s6 · COLUMN, GAP --s3 · Z 100
02 PANEL
--bg-raised · --line-strong · --r1 · PAD --s3/--s4
--bg-raised · --line-strong · --r1 · PAD --s3/--s4
03 STATUS DOT
--s2 CIRCLE · --accent OK · --accent-ink ERROR
--s2 CIRCLE · --accent OK · --accent-ink ERROR
THEME PUBLISHED
04 MESSAGE
--font-mono · --t1 · PAST TENSE, ONE LINE
--font-mono · --t1 · PAST TENSE, ONE LINE
FIG. TO-01 — ENTRY: --d2 RISE + FADE, DISABLED UNDER PREFERS-REDUCED-MOTION.
03 / TOKENS CONSUMED
PROPERTYTOKENVALUE
FONT--font-mono / --t112PX
SURFACE--bg-raisedRAISED
BORDER--line-strong1PX
RADIUS--r12PX
PADDING--s3 / --s412 / 16PX
DOT / SUCCESS--accent#EF4E0B
DOT / ERROR--accent-ink#BF3D06
MOTION--d2 / --ease220MS RISE
04 / CODE — COPY-READY
<div class="toast-region" role="status"
aria-live="polite"></div>
<template id="toast-tpl">
<div class="toast">
<span class="toast__dot"></span>
<span class="toast__msg"></span>
</div>
</template>
<script>
function toast(msg, error) {
const region = document.querySelector('.toast-region');
const el = document.getElementById('toast-tpl')
.content.firstElementChild.cloneNode(true);
el.querySelector('.toast__msg').textContent = msg;
if (error) el.classList.add('toast--error');
region.append(el);
setTimeout(() => el.remove(), error ? 8000 : 4000);
}
</script>
/* CSS — components.css / TOAST */
05 / RESPONSIVE BEHAVIOUR
≥1024BOTTOM-RIGHT, AUTO WIDTH, MAX 44CH.
640–1023UNCHANGED.
<640FULL-WIDTH STRIP ABOVE THE BOTTOM EDGE, INSET --s4.
06 / ACCESSIBILITY
ELEMENTREGION: ROLE="STATUS" + ARIA-LIVE="POLITE" — READ WITHOUT STEALING FOCUS.
ARIAERRORS THAT DEMAND ACTION DO NOT TOAST — THEY RENDER INLINE.
FOCUSNEVER MOVED TO A TOAST. DISMISS × IS TABBABLE WHILE PRESENT.
CONTRASTTEXT 18.2:1 AAA · STATE CARRIED BY DOT + WORDING, NEVER COLOR ALONE.