Toasts

<section class="row g-4">
      <div class="col-xl-7">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Live Demo</span>
          <h2 class="h4">Toast Notifications</h2>
          <p class="text-secondary">Use toasts for short, non-blocking confirmations. Critical errors should remain visible as alerts or inline messages.</p>
          <div class="d-flex flex-wrap gap-2">
            <button class="btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-athena-toast>Show Default Toast</button>
            <button class="btn btn-outline-secondary" type="button" data-athena-toast>Show Polite Update</button>
          </div>
        </article>
      </div>
      <div class="col-xl-5">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Best Practice</span>
          <h2 class="h5">When To Use Toasts</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use for confirmations such as saved, copied, queued, or sent.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Do not use for information the user must remember or fix.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Keep text short and avoid stacking too many messages.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-info mb-3">Preview</span>
          <h2 class="h5">Toast Anatomy</h2>
          <div class="toast show position-static" role="status" aria-live="polite" aria-atomic="true">
            <div class="toast-header">
              <strong class="me-auto">Athena UI</strong>
              <small>Now</small>
              <button type="button" class="btn-close ms-2 mb-1" aria-label="Close preview toast"></button>
            </div>
            <div class="toast-body">Settings saved. The workspace has been updated.</div>
          </div>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-warning mb-3">Placement</span>
          <h2 class="h5">Screen Position</h2>
          <p class="text-secondary">Place toasts away from primary navigation and form controls. Keep them reachable and dismissible.</p>
          <div class="athena-demo-frame">
            <div class="athena-demo-box">Bottom end container</div>
          </div>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-secondary mb-3">Limits</span>
          <h2 class="h5">Assurance Note</h2>
          <p class="text-secondary mb-0">Toast live-region behaviour still needs manual keyboard, screen reader, zoom, contrast, and target-size testing in the integrated product. Backend security controls remain outside the static template.</p>
        </article>
      </div>
    </section>