(fix): toast notification class update

Author: monab

src/scss/custom/_demo.scss

@@ -114,6 +114,7 @@
     position: fixed;
     top: 1rem;
     right: 1rem;
+    z-index: 9;
     .toast{
       width: 200px;
     }

src/template-builder/contents/classes/toasts.html

@@ -23,7 +23,7 @@
   }).show()
 })
 -->
-<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast toast-demo" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     <strong class="me-auto">Bootstrap</strong>
     <small>11 mins ago</small>
@@ -49,7 +49,7 @@
   }).show()
 })
 -->
-<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast toast-demo" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-body">
     Hello, world! This is a toast message.
     <div class="mt-2 pt-2 border-top">
@@ -74,7 +74,7 @@
   }).show()
 })
 -->
-<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast toast-demo d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-body">
     Hello, world! This is a toast message.
   </div>

src/template-builder/contents/notification.html

@@ -1,5 +1,5 @@
 <div class="notification">
-  <div class="toast hide d-flex align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast notification-toast hide d-flex align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-body">
       <span>Copied!!! 👍</span>
     </div>