From 1486b9494f894443ac39b1b6a1103f900b845243 Mon Sep 17 00:00:00 2001
From: Otto Wachter <Otto.Wachter@albertsons.com>
Date: Wed, 9 Oct 2024 10:53:47 -0400
Subject: [PATCH] es4 module

---
 js/modules/es4/toast.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/modules/es4/toast.js b/js/modules/es4/toast.js
index f4655ee3..1da066f7 100644
--- a/js/modules/es4/toast.js
+++ b/js/modules/es4/toast.js
@@ -38,7 +38,7 @@ const toastModule = new function() {
     // Create the container for the toasts
     createContainer(position) {
       const container = document.createElement('div');
-      container.className = `enable-toast enable-toast--${position}`;
+      container.className = `enable-toast__container enable-toast__container--${position}`;
       return container;
     }
 
@@ -57,7 +57,7 @@ const toastModule = new function() {
       toastElement.offsetHeight; // Force reflow to ensure the element is rendered before adding the visible class
 
       setTimeout(() => {
-        toastElement.classList.add('enable-toast--visible');
+        toastElement.classList.add('enable-toast__item--visible');
       }, 100); // Slight delay to ensure screen readers catch the change
 
       // Update the toast rack with the new toast
@@ -66,7 +66,7 @@ const toastModule = new function() {
       this.updateToggleRackButton();
     }
 
-    // Create the individual toast element
+    // Create the individual toast element (Using enable-toast__item)
     createToastElement(toastData) {
       const { message, level, id } = toastData;
       const toast = document.createElement('div');
@@ -98,7 +98,7 @@ const toastModule = new function() {
     dismissToast(toastData) {
       const toastElement = this.container.querySelector(`[data-id="${toastData.id}"]`);
       if (toastElement) {
-        toastElement.classList.add('enable-toast--exit');
+        toastElement.classList.add('enable-toast__item--exit');
         setTimeout(() => {
           toastElement.remove();
           this.visibleQueue = this.visibleQueue.filter(t => t.id !== toastData.id);
@@ -123,9 +123,9 @@ const toastModule = new function() {
       this.visibleQueue.forEach((toast, index) => {
         const toastElement = this.container.querySelector(`[data-id="${toast.id}"]`);
         if (index < this.maxVisible) {
-          toastElement.classList.add('enable-toast--visible');
+          toastElement.classList.add('enable-toast__item--visible');
         } else {
-          toastElement.classList.remove('enable-toast--visible');
+          toastElement.classList.remove('enable-toast__item--visible');
         }
       });
 
@@ -146,7 +146,7 @@ const toastModule = new function() {
       this.toastQueue.forEach(toastData => {
         const { message, level, id } = toastData;
         const toastElement = document.createElement('div');
-        toastElement.className = 'enable-toast__item enable-toast--visible';
+        toastElement.className = 'enable-toast__item enable-toast__item--visible';
         toastElement.style.backgroundColor = this.levels[level]?.color || '#333';
         toastElement.setAttribute('data-id', id);