Toast

HTML

<!-- Basic toast -->
<div class="caat-toast toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="caat-toast__header toast-header">
    <i class="bi bi-bell caat-toast__icon" aria-hidden="true"></i>
    <span class="caat-toast__title">Notification</span>
    <small class="caat-toast__meta">Just now</small>
    <button type="button" class="caat-toast__close"
            data-bs-dismiss="toast" aria-label="Close">
      <i class="bi bi-x" aria-hidden="true"></i>
    </button>
  </div>
  <div class="caat-toast__body">
    Your contribution statement is now available.
  </div>
</div>

<!-- Colour variant -->
<div class="caat-toast caat-toast--success toast" role="alert" ...>
  ...
</div>

<!-- Toast with action -->
<div class="caat-toast__body">
  Item removed.
  <a href="#" class="caat-toast__action">Undo</a>
</div>

<!-- Stacked container -->
<div class="caat-toast-container" aria-live="polite">
  <!-- Multiple .caat-toast elements -->
</div>

HTL / Markup contract

<!-- Single toast -->
<div class="caat-toast caat-toast--{variant} toast"
     role="alert" aria-live="assertive" aria-atomic="true"
     data-bs-autohide="{autohide}" data-bs-delay="{delay}">
  <div class="caat-toast__header toast-header">
    <i class="bi bi-{icon} caat-toast__icon" aria-hidden="true"></i>
    <span class="caat-toast__title">{title}</span>
    <small class="caat-toast__meta">{timestamp}</small>
    <button type="button" class="caat-toast__close"
            data-bs-dismiss="toast" aria-label="Close">
      <i class="bi bi-x" aria-hidden="true"></i>
    </button>
  </div>
  <div class="caat-toast__body">
    {body}
    <a href="{actionUrl}" class="caat-toast__action">{actionLabel}</a>
  </div>
</div>

<!-- Stacked toast container -->
<div class="caat-toast-container" aria-live="polite">
  <!-- Individual .caat-toast elements injected here -->
</div>

.caat-toast {
  font-family: var(--caat-font-primary, 'Libre Franklin', sans-serif);
  border-radius: var(--caat-radius, 0.375rem);
  border-left: 4px solid var(--caat-blue-700, #004a99);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  background-color: #fff;
  color: var(--caat-ink, #212529);
  animation: caat-toast-slide-in 0.3s ease-out;
}

.caat-toast--success { border-left-color: var(--caat-green, #198754); }
.caat-toast--warning { border-left-color: #ffc107; }
.caat-toast--error   { border-left-color: #dc3545; }
.caat-toast--info    { border-left-color: var(--caat-blue-700, #004a99); }

.caat-toast__close:focus-visible {
  outline: 2px solid var(--caat-focus, #005fcc);
  outline-offset: 2px;
}

.caat-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 350px;
}

@keyframes caat-toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

title: Toast
description: Lightweight non-blocking notification for member feedback.
fields:
  - name: title
    label: Title
    type: textfield
    required: true
    maxLength: 60
    helpText: Short header text (e.g., "Success", "Session Expiring").

  - name: body
    label: Body
    type: textarea
    required: true
    maxLength: 200
    helpText: Notification message. Keep concise and actionable.

  - name: variant
    label: Variant
    type: select
    required: true
    options:
      - value: default
        label: Default (Blue)
      - value: success
        label: Success (Green)
      - value: warning
        label: Warning (Amber)
      - value: error
        label: Error (Red)
      - value: info
        label: Info (Blue)
    helpText: Determines accent colour and header background.

  - name: icon
    label: Icon
    type: iconpicker
    required: false
    helpText: Bootstrap Icon for the header (e.g., bi-check-circle-fill).

  - name: actionLabel
    label: Action Label
    type: textfield
    required: false
    maxLength: 30
    helpText: Optional action link text (e.g., "Undo", "View").

  - name: actionUrl
    label: Action URL
    type: pathpicker
    required: false
    helpText: Destination for the action link. Required if Action Label is set.

  - name: autohide
    label: Auto-dismiss
    type: checkbox
    required: false
    defaultValue: true
    helpText: Automatically hide the toast after the configured delay.

  - name: delay
    label: Dismiss Delay (ms)
    type: numberfield
    required: false
    defaultValue: 5000
    min: 3000
    helpText: Time before auto-dismiss. Minimum 3000 ms.