Structure
Class Description
.mdst-toast-group Fixed container for stacking multiple toasts
.mdst-toast Individual toast notification, use with <output> for accessibility
.mdst-toast-close Dismiss button inside a toast
States
Data Attribute Description
data-state="visible" Toast is shown (opacity 1, visible)
data-state="hidden" Toast is hidden (opacity 0, visibility hidden)
Variants
Default toast — no variant info — something noteworthy happened. success — your changes have been saved. error — something went wrong. warning — please review before continuing.
Interactive Demo

This demo uses vanilla JS to toggle data-state attributes. The JavaScript below is not part of modest-ui — it’s here to show how the CSS responds to state changes. Bring whatever JS you want.

Demo source 
const group = document.querySelector("#demo-toast-group");
const messages = {
  "":        "Something happened.",
  info:      "Here\u2019s something you should know.",
  success:   "Your changes have been saved.",
  error:     "Something went wrong.",
  warning:   "Please review before continuing.",
};

function showToast(variant) {
  const toast = document.createElement("output");
  toast.className = "mdst-toast";
  toast.setAttribute("data-state", "visible");
  if (variant) toast.setAttribute("data-variant", variant);
  toast.textContent = messages[variant] + " ";

  const close = document.createElement("button");
  close.className = "mdst-toast-close";
  close.setAttribute("aria-label", "Dismiss");
  close.textContent = "\u2715";
  close.addEventListener("click", () => dismiss(toast));
  toast.appendChild(close);

  group.appendChild(toast);
  setTimeout(() => dismiss(toast), 3000);
}

function dismiss(toast) {
  toast.setAttribute("data-state", "hidden");
  toast.addEventListener("transitionend", () => toast.remove(), { once: true });
}
Usage
<!-- Toast group (fixed container) -->
<div class="mdst-toast-group">

  <!-- A visible success toast -->
  <output class="mdst-toast" data-state="visible" data-variant="success">
    Your changes have been saved.
    <button class="mdst-toast-close" aria-label="Dismiss">✕</button>
  </output>

  <!-- A hidden toast (waiting to be shown) -->
  <output class="mdst-toast" data-state="hidden" data-variant="error">
    Something went wrong.
    <button class="mdst-toast-close" aria-label="Dismiss">✕</button>
  </output>

</div>

<!-- Example JS -->
<script>
  function showToast(el) {
    el.setAttribute("data-state", "visible");
  }
  function hideToast(el) {
    el.setAttribute("data-state", "hidden");
  }
</script>