From 2e75edbbd69a5e0d046242201042345d67ab815f Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Mon, 28 Nov 2022 12:33:08 +0100
Subject: [PATCH 01/12] Modal: removed Bootstrap classes

---
 demo/sites/bs/modal.html | 266 ++++++++++++++++++++++++++-------------
 src/js/bs/src/modal.js   |  52 +++++---
 2 files changed, 217 insertions(+), 101 deletions(-)

diff --git a/demo/sites/bs/modal.html b/demo/sites/bs/modal.html
index f55c744a0..f4268e538 100644
--- a/demo/sites/bs/modal.html
+++ b/demo/sites/bs/modal.html
@@ -31,7 +31,7 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="modal"
+        data-te-toggle="modal"
         data-bs-target="#exampleModal"
       >
         Launch demo modal
@@ -39,32 +39,48 @@
 
       <!-- Modal -->
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-ref="true"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModal"
         tabindex="-1"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true"
       >
-        <div class="modal-dialog relative w-auto pointer-events-none">
+        <!-- animate-fadeIn -->
+        <!-- data-[et-te-modal-open=true]:animate-fadeIn -->
+        <!-- translate-y-[-50px] transition-all duration-300 ease-in-out   -->
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
                 Modal title
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div class="flex-auto relative p-4" data-te-modal-body-ref>
+              Modal body text goes here.
             </div>
-            <div class="modal-body relative p-4">Modal body text goes here.</div>
             <div
-              class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
             >
               <button
                 type="button"
@@ -92,7 +108,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="modal"
+        data-te-toggle="modal"
         data-bs-target="#staticBackdrop"
       >
         Launch static backdrop modal
@@ -100,7 +116,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
 
       <!-- Modal -->
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="staticBackdrop"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
@@ -108,26 +124,36 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         aria-labelledby="staticBackdropLabel"
         aria-hidden="true"
       >
-        <div class="modal-dialog relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
                 Modal title
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4">...</div>
+            <div data-te-modal-body-ref class="relative p-4">...</div>
             <div
-              class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
             >
               <button
                 type="button"
@@ -155,7 +181,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="modal"
+        data-te-toggle="modal"
         data-bs-target="#exampleModalLong"
       >
         Launch demo modal long
@@ -163,18 +189,22 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
 
       <!-- Modal -->
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalLong"
         tabindex="-1"
         aria-labelledby="exampleModalLongLabel"
         aria-hidden="true"
       >
-        <div class="modal-dialog relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5
                 class="text-xl font-medium leading-normal text-gray-800"
@@ -184,12 +214,18 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4" style="min-height: 1500px">
+            <div class="relative p-4" style="min-height: 1500px">
               This is some placeholder content to show the scrolling behavior for modals. Instead of
               repeating the text the modal, we use an inline style set a minimum height, thereby
               extending the length of the overall modal and demonstrating the overflow scrolling.
@@ -197,7 +233,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               modal as needed.
             </div>
             <div
-              class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
             >
               <button
                 type="button"
@@ -225,7 +261,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="modal"
+        data-te-toggle="modal"
         data-bs-target="#exampleModalScrollable"
       >
         Launch demo modal dialog scrollable
@@ -233,18 +269,22 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
 
       <!-- Modal -->
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalScrollable"
         tabindex="-1"
         aria-labelledby="exampleModalScrollableLabel"
         aria-hidden="true"
       >
-        <div class="modal-dialog modal-dialog-scrollable relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:h-[calc(100%-3.5rem)]"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="max-h-[100%] overflow-hidden border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5
                 class="text-xl font-medium leading-normal text-gray-800"
@@ -254,12 +294,18 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4">
+            <div class="overflow-y-auto relative p-4">
               <p>
                 This is some placeholder content to show the scrolling behavior for modals. We use
                 repeated line breaks to demonstrate how content can exceed minimum inner height,
@@ -298,7 +344,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         <button
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-          data-bs-toggle="modal"
+          data-te-toggle="modal"
           data-bs-target="#exampleModalCenter"
         >
           Vertically centered modal
@@ -306,7 +352,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         <button
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-          data-bs-toggle="modal"
+          data-te-toggle="modal"
           data-bs-target="#exampleModalCenteredScrollable"
         >
           Vertically centered scrollable modal
@@ -314,19 +360,23 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       </div>
 
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalCenter"
         tabindex="-1"
         aria-labelledby="exampleModalCenterTitle"
         aria-modal="true"
         role="dialog"
       >
-        <div class="modal-dialog modal-dialog-centered relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="flex items-center min-h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:min-h-[calc(100%-3.5rem)]"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5
                 class="text-xl font-medium leading-normal text-gray-800"
@@ -336,16 +386,22 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4">
+            <div class="relative p-4">
               <p>This is a vertically centered modal.</p>
             </div>
             <div
-              class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
             >
               <button
                 type="button"
@@ -366,7 +422,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       </div>
 
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalCenteredScrollable"
         tabindex="-1"
         aria-labelledby="exampleModalCenteredScrollable"
@@ -374,13 +430,15 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         role="dialog"
       >
         <div
-          class="modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none"
+          data-te-modal-dialog-ref
+          class="flex items-center min-h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:min-h-[calc(100%-3.5rem)]"
+          data-te-fade
         >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5
                 class="text-xl font-medium leading-normal text-gray-800"
@@ -390,12 +448,18 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4">
+            <div class="relative p-4">
               <p>
                 This is some placeholder content to show a vertically centered modal. We've added
                 some extra copy here to show how vertically centering the modal works when combined
@@ -408,7 +472,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <p>Just like that.</p>
             </div>
             <div
-              class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
             >
               <button
                 type="button"
@@ -436,7 +500,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         <button
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-          data-bs-toggle="modal"
+          data-te-toggle="modal"
           data-bs-target="#exampleModalXl"
         >
           Extra large modal
@@ -444,7 +508,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         <button
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-          data-bs-toggle="modal"
+          data-te-toggle="modal"
           data-bs-target="#exampleModalLg"
         >
           Large modal
@@ -452,7 +516,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         <button
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-          data-bs-toggle="modal"
+          data-te-toggle="modal"
           data-bs-target="#exampleModalSm"
         >
           Small modal
@@ -460,91 +524,121 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       </div>
 
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalXl"
         tabindex="-1"
         aria-labelledby="exampleModalXlLabel"
         aria-modal="true"
         role="dialog"
       >
-        <div class="modal-dialog modal-xl relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="min-[1200px]:max-w-[1140px] min-[992px]:max-w-[800px] relative w-auto pointer-events-none translate-y-[-50px] transition-all duration-300 ease-in-out min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalXlLabel">
                 Extra large modal
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4">...</div>
+            <div class="relative p-4">...</div>
           </div>
         </div>
       </div>
 
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalLg"
         tabindex="-1"
         aria-labelledby="exampleModalLgLabel"
         aria-modal="true"
         role="dialog"
       >
-        <div class="modal-dialog modal-lg relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="min-[992px]:max-w-[800px] relative w-auto pointer-events-none translate-y-[-50px] transition-all duration-300 ease-in-out min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLgLabel">
                 Large modal
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4">...</div>
+            <div class="relative p-4">...</div>
           </div>
         </div>
       </div>
 
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalSm"
         tabindex="-1"
         aria-labelledby="exampleModalSmLabel"
         aria-modal="true"
         role="dialog"
       >
-        <div class="modal-dialog modal-sm relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none translate-y-[-50px] transition-all duration-300 ease-in-out min-[576px]:max-w-[300px] min-[576px]:my-7 min-[576px]:mx-auto"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmLabel">
                 Small modal
               </h5>
               <button
                 type="button"
-                class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-              ></button>
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
             </div>
-            <div class="modal-body relative p-4">...</div>
+            <div class="relative p-4">...</div>
           </div>
         </div>
       </div>
@@ -557,7 +651,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="modal"
+        data-te-toggle="modal"
         data-bs-target="#exampleModalFullscreen"
       >
         Launch demo modal full screen
@@ -565,18 +659,22 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
 
       <!-- Modal -->
       <div
-        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalFullscreen"
         tabindex="-1"
         aria-labelledby="exampleModalFullscreenLabel"
         aria-hidden="true"
       >
-        <div class="modal-dialog modal-fullscreen relative w-auto pointer-events-none">
+        <div
+          data-te-modal-dialog-ref
+          class="min-[0px]:h-full min-[0px]:max-w-none min-[0px]:m-0 relative w-auto pointer-events-none"
+          data-te-fade
+        >
           <div
-            class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
+            class="min-[0px]:h-full min-[0px]:border-0 min-[0px]:rounded-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
           >
             <div
-              class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+              class="min-[0px]:rounded-none flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
             >
               <h5
                 class="text-xl font-medium leading-normal text-gray-800"
@@ -591,9 +689,9 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
                 aria-label="Close"
               ></button>
             </div>
-            <div class="modal-body relative p-4">...</div>
+            <div class="min-[0px]:overflow-y-auto relative p-4">...</div>
             <div
-              class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+              class="min-[0px]:rounded-none flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
             >
               <button
                 type="button"
diff --git a/src/js/bs/src/modal.js b/src/js/bs/src/modal.js
index 8627130b9..2ffcbe3c4 100644
--- a/src/js/bs/src/modal.js
+++ b/src/js/bs/src/modal.js
@@ -29,7 +29,7 @@ import { enableDismissTrigger } from './util/component-functions';
  */
 
 const NAME = 'modal';
-const DATA_KEY = 'bs.modal';
+const DATA_KEY = 'te.modal';
 const EVENT_KEY = `.${DATA_KEY}`;
 const DATA_API_KEY = '.data-api';
 const ESCAPE_KEY = 'Escape';
@@ -58,15 +58,14 @@ const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`;
 const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`;
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
 
-const CLASS_NAME_OPEN = 'modal-open';
-const CLASS_NAME_FADE = 'fade';
-const CLASS_NAME_SHOW = 'show';
-const CLASS_NAME_STATIC = 'modal-static';
+const OPEN_SELECTOR_BODY = 'data-te-modal-open';
+const CLASS_NAME_SHOW = 'transform-none';
+const CLASS_NAME_STATIC = 'scale-[1.02]';
 
-const OPEN_SELECTOR = '.modal.show';
-const SELECTOR_DIALOG = '.modal-dialog';
-const SELECTOR_MODAL_BODY = '.modal-body';
-const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]';
+const OPEN_SELECTOR = 'data-te-open';
+const SELECTOR_DIALOG = '[data-te-modal-dialog-ref]';
+const SELECTOR_MODAL_BODY = '[data-te-modal-body-ref]';
+const SELECTOR_DATA_TOGGLE = '[data-te-toggle="modal"]';
 
 /**
  * ------------------------------------------------------------------------
@@ -125,7 +124,7 @@ class Modal extends BaseComponent {
 
     this._scrollBar.hide();
 
-    document.body.classList.add(CLASS_NAME_OPEN);
+    document.body.setAttribute(OPEN_SELECTOR_BODY, 'true');
 
     this._adjustDialog();
 
@@ -141,13 +140,20 @@ class Modal extends BaseComponent {
     });
 
     this._showBackdrop(() => this._showElement(relatedTarget));
+
+    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+    modalDialog.classList.add('translate-y-[-50px]');
+    modalDialog.classList.add('opacity-100');
+    modalDialog.classList.add('transition-all');
+    modalDialog.classList.add('duration-300');
+    modalDialog.classList.add('ease-in-out');
+    modalDialog.classList.remove('opacity-0');
   }
 
   hide() {
     if (!this._isShown || this._isTransitioning) {
       return;
     }
-
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE);
 
     if (hideEvent.defaultPrevented) {
@@ -166,12 +172,14 @@ class Modal extends BaseComponent {
 
     this._focustrap.deactivate();
 
-    this._element.classList.remove(CLASS_NAME_SHOW);
+    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+    modalDialog.classList.remove(CLASS_NAME_SHOW);
 
     EventHandler.off(this._element, EVENT_CLICK_DISMISS);
     EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
 
     this._queueCallback(() => this._hideModal(), this._element, isAnimated);
+    this._element.removeAttribute(OPEN_SELECTOR);
   }
 
   dispose() {
@@ -224,6 +232,7 @@ class Modal extends BaseComponent {
     this._element.removeAttribute('aria-hidden');
     this._element.setAttribute('aria-modal', true);
     this._element.setAttribute('role', 'dialog');
+    this._element.setAttribute(`${OPEN_SELECTOR}`, 'true');
     this._element.scrollTop = 0;
 
     if (modalBody) {
@@ -234,8 +243,6 @@ class Modal extends BaseComponent {
       reflow(this._element);
     }
 
-    this._element.classList.add(CLASS_NAME_SHOW);
-
     const transitionComplete = () => {
       if (this._config.focus) {
         this._focustrap.activate();
@@ -248,6 +255,10 @@ class Modal extends BaseComponent {
     };
 
     this._queueCallback(transitionComplete, this._dialog, isAnimated);
+
+    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+    modalDialog.classList.add(CLASS_NAME_SHOW);
+    modalDialog.classList.add('opacity-50');
   }
 
   _setEscapeEvent() {
@@ -280,11 +291,14 @@ class Modal extends BaseComponent {
     this._element.removeAttribute('role');
     this._isTransitioning = false;
     this._backdrop.hide(() => {
-      document.body.classList.remove(CLASS_NAME_OPEN);
+      document.body.removeAttribute(OPEN_SELECTOR_BODY);
       this._resetAdjustments();
       this._scrollBar.reset();
       EventHandler.trigger(this._element, EVENT_HIDDEN);
     });
+
+    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+    modalDialog.classList.remove(CLASS_NAME_SHOW);
   }
 
   _showBackdrop(callback) {
@@ -309,7 +323,8 @@ class Modal extends BaseComponent {
   }
 
   _isAnimated() {
-    return this._element.classList.contains(CLASS_NAME_FADE);
+    const animate = SelectorEngine.findOne('[data-te-fade]', this._element);
+    return !!animate;
   }
 
   _triggerBackdropTransition() {
@@ -334,6 +349,9 @@ class Modal extends BaseComponent {
     }
 
     classList.add(CLASS_NAME_STATIC);
+    classList.add('transition-scale');
+    classList.add('duration-300');
+    classList.add('ease-in-out');
     this._queueCallback(() => {
       classList.remove(CLASS_NAME_STATIC);
       if (!isModalOverflowing) {
@@ -421,7 +439,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   });
 
   // avoid conflict when clicking moddal toggler while another one is open
-  const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR);
+  const allReadyOpen = SelectorEngine.findOne(`[${OPEN_SELECTOR}="true"]`);
   if (allReadyOpen) {
     Modal.getInstance(allReadyOpen).hide();
   }

From b8076cd003aeb30ffb4dba0647801fee01ec3769 Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Mon, 28 Nov 2022 12:48:58 +0100
Subject: [PATCH 02/12] Backdrop: removed Bootstrap classes

---
 src/js/bs/src/util/backdrop.js | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/js/bs/src/util/backdrop.js b/src/js/bs/src/util/backdrop.js
index 0d1cc9d30..afce95d0f 100644
--- a/src/js/bs/src/util/backdrop.js
+++ b/src/js/bs/src/util/backdrop.js
@@ -9,7 +9,6 @@ import EventHandler from '../dom/event-handler';
 import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index';
 
 const Default = {
-  className: 'modal-backdrop',
   isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
   isAnimated: false,
   rootElement: 'body', // give the choice to place backdrop under different elements
@@ -17,17 +16,14 @@ const Default = {
 };
 
 const DefaultType = {
-  className: 'string',
   isVisible: 'boolean',
   isAnimated: 'boolean',
   rootElement: '(element|string)',
   clickCallback: '(function|null)',
 };
 const NAME = 'backdrop';
-const CLASS_NAME_FADE = 'fade';
-const CLASS_NAME_SHOW = 'show';
 
-const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`;
+const EVENT_MOUSEDOWN = `mousedown.te.${NAME}`;
 
 class Backdrop {
   constructor(config) {
@@ -47,8 +43,19 @@ class Backdrop {
     if (this._config.isAnimated) {
       reflow(this._getElement());
     }
-
-    this._getElement().classList.add(CLASS_NAME_SHOW);
+    this._getElement().classList.add('opacity-50');
+    this._getElement().classList.add('transition-all');
+    this._getElement().classList.add('duration-300');
+    this._getElement().classList.add('ease-in-out');
+    this._getElement().classList.add('fixed');
+    this._getElement().classList.add('top-0');
+    this._getElement().classList.add('left-0');
+    this._getElement().classList.add('z-[1050]');
+    this._getElement().classList.add('bg-[#000]');
+    this._getElement().classList.add('w-[100vw]');
+    this._getElement().classList.add('h-[100vh]');
+
+    this._getElement().classList.remove('opacity-0');
 
     this._emulateAnimation(() => {
       execute(callback);
@@ -61,7 +68,8 @@ class Backdrop {
       return;
     }
 
-    this._getElement().classList.remove(CLASS_NAME_SHOW);
+    this._getElement().classList.add('opacity-0');
+    this._getElement().classList.remove('opacity-50');
 
     this._emulateAnimation(() => {
       this.dispose();
@@ -76,7 +84,8 @@ class Backdrop {
       const backdrop = document.createElement('div');
       backdrop.className = this._config.className;
       if (this._config.isAnimated) {
-        backdrop.classList.add(CLASS_NAME_FADE);
+        // backdrop.classList.add(CLASS_NAME_FADE);
+        backdrop.classList.add('opacity-50');
       }
 
       this._element = backdrop;

From 3a0e0c2fa70bd4c3b42056f72df6a24267e602ca Mon Sep 17 00:00:00 2001
From: "m.trochonowicz" <m.trochonowicz@mdbootstrap.com>
Date: Mon, 28 Nov 2022 14:36:48 +0100
Subject: [PATCH 03/12] Stepper: removed Bootstrap classes

---
 demo/sites/mdb/stepper.html |  64 +++++++--------
 src/js/mdb/stepper.js       | 157 +++++++++++++++++++++---------------
 2 files changed, 126 insertions(+), 95 deletions(-)

diff --git a/demo/sites/mdb/stepper.html b/demo/sites/mdb/stepper.html
index 93369468c..7a55f14e5 100644
--- a/demo/sites/mdb/stepper.html
+++ b/demo/sites/mdb/stepper.html
@@ -28,31 +28,31 @@
     <br />
 
     <p class="mb-4">Basic example</p>
-    <ul class="stepper" data-mdb-stepper="stepper">
-      <li class="stepper-step stepper-active">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 1 </span>
-          <span class="stepper-head-text"> step1 </span>
+    <ul data-te-stepper-init class="flex justify-between relative p-0 m-0 w-100 list-none overflow-hidden transition-[height] duration-200 ease-in-out">
+      <li data-te-stepper-step-ref class="flex-auto w-[4.5rem]">
+        <div data-te-stepper-head-ref class="pl-2 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none after:flex-1 after:h-px after:w-100 after:ml-2 after:content-[''] after:bg-[#0000001a]">
+          <span data-te-stepper-head-icon-ref class="my-6 mx-2 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 1 </span>
+          <span data-te-stepper-head-text-ref class="font-medium after:flex after:text-[0.8rem] after:content-[data-content]"> step1 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="absolute w-100 p-4 block">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 2 </span>
-          <span class="stepper-head-text"> step2 </span>
+      <li data-te-stepper-step-ref class="flex-auto w-[4.5rem]">
+        <div data-te-stepper-head-ref class="flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none before:flex-1 before:h-px before:w-100 before:mr-2 before:content-[''] before:bg-[#0000001a] after:flex-1 after:h-px after:w-100 after:ml-2 after:content-[''] after:bg-[#0000001a]">
+          <span data-te-stepper-head-icon-ref class="my-6 mx-2 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 2 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content]"> step2 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="absolute w-100 p-4 left-0">
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 3 </span>
-          <span class="stepper-head-text"> step3 </span>
+      <li data-te-stepper-step-ref class="flex-auto w-[4.5rem]">
+        <div data-te-stepper-head-ref class="pr-2 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none before:flex-1 before:h-px before:w-100 before:mr-2 before:content-[''] before:bg-[#0000001a]">
+          <span data-te-stepper-head-icon-ref class="my-6 mx-2 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 3 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content]"> step3 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="absolute w-100 p-4 left-0">
           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </div>
       </li>
@@ -63,32 +63,32 @@
     <br />
 
     <p class="mb-4">Vertical stepper</p>
-    <ul class="stepper" data-mdb-stepper="stepper" data-mdb-stepper-type="vertical">
-      <li class="stepper-step stepper-active">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 1 </span>
-          <span class="stepper-head-text"> step1 </span>
+    <ul class="relative p-0 m-0 w-100 list-none overflow-hidden transition-[height] duration-200 ease-in-out" data-te-stepper-init data-mdb-stepper-type="vertical">
+      <li data-te-stepper-step-ref class="relative h-fit after:absolute after:left-9 after:top-12 after:h-[calc(100%-2.45rem)] after:w-px after:mt-px after:content-[''] after:bg-[#0000001a]">
+        <div data-te-stepper-head-ref class="p-6 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none">
+          <span data-te-stepper-head-icon-ref class="mr-3 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 1 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content] after:absolute"> step1 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="overflow-hidden ps-1 pr-6 pb-6 pl-[3.75rem] transition-[height, margin-bottom, padding-top, padding-bottom] duration-300 ease-in-out left-0">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
           aliqua.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 2 </span>
-          <span class="stepper-head-text"> step2 </span>
+      <li data-te-stepper-step-ref class="relative h-fit after:absolute after:left-9 after:top-12 after:h-[calc(100%-2.45rem)] after:w-px after:mt-px after:content-[''] after:bg-[#0000001a]">
+        <div data-te-stepper-head-ref class="p-6 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none">
+          <span data-te-stepper-head-icon-ref class="mr-3 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 2 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content] after:absolute"> step2 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="overflow-hidden ps-1 pr-6 pb-6 pl-[3.75rem] transition-[height, margin-bottom, padding-top, padding-bottom] duration-300 ease-in-out left-0">
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 3 </span>
-          <span class="stepper-head-text"> step3 </span>
+      <li data-te-stepper-step-ref class="relative h-fit">
+        <div data-te-stepper-head-ref class="p-6 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none">
+          <span data-te-stepper-head-icon-ref class="mr-3 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 3 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content] after:absolute"> step3 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="overflow-hidden ps-1 pr-6 pb-6 pl-[3.75rem] transition-[height, margin-bottom, padding-top, padding-bottom] duration-300 ease-in-out left-0">
           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </div>
       </li>
diff --git a/src/js/mdb/stepper.js b/src/js/mdb/stepper.js
index 5086c98b6..5c894abd2 100644
--- a/src/js/mdb/stepper.js
+++ b/src/js/mdb/stepper.js
@@ -22,9 +22,10 @@ import {
  */
 
 const NAME = 'stepper';
-const DATA_KEY = 'mdb.stepper';
-const SELECTOR_EXPAND = '[data-mdb-stepper="stepper"]';
+const DATA_KEY = 'te.stepper';
 const EVENT_KEY = `.${DATA_KEY}`;
+const REF = `data-te-${NAME}`;
+const SELECTOR_EXPAND = `[${REF}-init]`;
 
 const STEPPER_HORIZONTAL = 'horizontal';
 const STEPPER_VERTICAL = 'vertical';
@@ -61,23 +62,18 @@ const EVENT_KEYUP = `keyup${EVENT_KEY}`;
 const EVENT_RESIZE = `resize${EVENT_KEY}`;
 const EVENT_ANIMATIONEND = 'animationend';
 
-const STEP_CLASS = `${NAME}-step`;
-const HEAD_CLASS = `${NAME}-head`;
-const CONTENT_CLASS = `${NAME}-content`;
-const ACTIVE_CLASS = `${NAME}-active`;
-const COMPLETED_CLASS = `${NAME}-completed`;
-const INVALID_CLASS = `${NAME}-invalid`;
-const DISABLED_CLASS = `${NAME}-disabled`;
-const VERTICAL_CLASS = `${NAME}-${STEPPER_VERTICAL}`;
-const CONTENT_HIDE_CLASS = `${NAME}-content-hide`;
-const HORIZONTAL_CLASS = `${NAME}-${STEPPER_HORIZONTAL}`;
+const STEP_REF = `[${REF}-step-ref]`;
+const HEAD_REF = `[${REF}-head-ref]`;
+const HEAD_TEXT_REF = `[${REF}-head-text-ref]`;
+const HEAD_ICON_REF = `[${REF}-head-icon-ref]`;
+const CONTENT_REF = `[${REF}-content-ref]`;
 
 class Stepper {
   constructor(element, options) {
     this._element = element;
     this._options = this._getConfig(options);
     this._elementHeight = 0;
-    this._steps = SelectorEngine.find(`.${STEP_CLASS}`, this._element);
+    this._steps = SelectorEngine.find(`${STEP_REF}`, this._element);
     this._currentView = '';
     this._activeStepIndex = 0;
     this._verticalStepperStyles = [];
@@ -129,13 +125,22 @@ class Stepper {
 
   // Private
   _init() {
-    const activeStep = SelectorEngine.findOne(`.${ACTIVE_CLASS}`, this._element);
+    const activeStep = SelectorEngine.find(`${STEP_REF}`, this._element)[this._activeStepIndex].setAttribute('data-et', 'active-step');
+    const stepperContent = SelectorEngine.find(`${CONTENT_REF}`, this._element);
+    const stepperHeadText = SelectorEngine.find(`${HEAD_TEXT_REF}`, this._element);
+    const stepperHeadIcon = SelectorEngine.find(`${HEAD_ICON_REF}`, this._element);
 
     if (activeStep) {
       this._activeStepIndex = this._steps.indexOf(activeStep);
       this._toggleStepClass(this._activeStepIndex, 'add', this._options.stepperActive);
+
+      stepperContent[this._activeStepIndex].classList.add('block');
+      stepperHeadText[this._activeStepIndex].classList.add('font-medium')
+      stepperHeadIcon[this._activeStepIndex].classList.add('bg-[#0d6efd]')
     } else {
-      this._toggleStepClass(this._activeStepIndex, 'add', ACTIVE_CLASS);
+      stepperContent[this._activeStepIndex].classList.add('block');
+      stepperHeadText[this._activeStepIndex].classList.add('font-medium')
+      stepperHeadIcon[this._activeStepIndex].classList.add('bg-[#0d6efd]')
       this._toggleStepClass(this._activeStepIndex, 'add', this._options.stepperActive);
     }
 
@@ -174,10 +179,10 @@ class Stepper {
 
   _bindMouseDown() {
     this._steps.forEach((el) => {
-      const stepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, el);
+      const stepHead = SelectorEngine.findOne(`${HEAD_REF}`, el);
 
       EventHandler.on(stepHead, EVENT_MOUSEDOWN, (e) => {
-        const step = SelectorEngine.parents(e.target, `.${STEP_CLASS}`)[0];
+        const step = SelectorEngine.parents(e.target, `${STEP_REF}`)[0];
         const stepIndex = this._steps.indexOf(step);
 
         e.preventDefault();
@@ -213,7 +218,7 @@ class Stepper {
 
     if (shouldBeVertical && !shouldBeMobile && this._currentView !== STEPPER_VERTICAL) {
       this._steps.forEach((el) => {
-        const stepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, el);
+        const stepContent = SelectorEngine.findOne(`${CONTENT_REF}`, el);
 
         this._resetStepperHeight();
         this._showElement(stepContent);
@@ -232,7 +237,7 @@ class Stepper {
       this._toggleDisabled();
     }
 
-    this._showElement(SelectorEngine.findOne(`.${CONTENT_CLASS}`, this._steps[index]));
+    this._showElement(SelectorEngine.findOne(`${CONTENT_REF}`, this._steps[index]));
     this._toggleActive(index);
 
     if (index > this._activeStepIndex) {
@@ -247,11 +252,18 @@ class Stepper {
     }
 
     this._toggleStepTabIndex(
-      SelectorEngine.findOne(`.${HEAD_CLASS}`, this.activeStep),
-      SelectorEngine.findOne(`.${HEAD_CLASS}`, this._steps[index])
+      SelectorEngine.findOne(`${HEAD_REF}`, this.activeStep),
+      SelectorEngine.findOne(`${HEAD_REF}`, this._steps[index])
     );
 
     this._activeStepIndex = index;
+
+    this._steps[this._activeStepIndex].setAttribute('data-et', 'active-step');
+    this._steps.forEach((step, index) => {
+      if (step[this._activeStepIndex] !== index) {
+        step.removeAttribute('data-et')
+      }
+    })
   }
 
   _resetStepperHeight() {
@@ -260,7 +272,7 @@ class Stepper {
 
   _setStepsHeight() {
     this._steps.forEach((el) => {
-      const stepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, el);
+      const stepContent = SelectorEngine.findOne(`${CONTENT_REF}`, el);
       const stepComputed = window.getComputedStyle(stepContent);
       this._verticalStepperStyles.push({
         paddingTop: parseFloat(stepComputed.paddingTop),
@@ -272,7 +284,7 @@ class Stepper {
   }
 
   _setSingleStepHeight(step) {
-    const stepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, step);
+    const stepContent = SelectorEngine.findOne(`${CONTENT_REF}`, step);
     const isActiveStep = this.activeStep === step;
     const stepIndex = this._steps.indexOf(step);
     let stepContentHeight;
@@ -293,7 +305,6 @@ class Stepper {
   _toggleVertical() {
     this._currentView = STEPPER_VERTICAL;
 
-    this._toggleStepperClass(VERTICAL_CLASS);
     this._setStepsHeight();
     this._hideInactiveSteps();
   }
@@ -301,18 +312,18 @@ class Stepper {
   _toggleHorizontal() {
     this._currentView = STEPPER_HORIZONTAL;
 
-    this._toggleStepperClass(HORIZONTAL_CLASS);
     this._setHeight(this.activeStep);
     this._hideInactiveSteps();
   }
 
-  _toggleStepperClass(className) {
-    this._element.classList.remove(HORIZONTAL_CLASS, VERTICAL_CLASS);
-    this._element.classList.add(className);
+  _toggleStepperClass() {
+    const vertical = SelectorEngine.findOne('[data-mdb-stepper-type]', this._element);
 
-    if (className !== VERTICAL_CLASS) {
+    if (vertical !== null) {
       this._steps.forEach((el) => {
-        SelectorEngine.findOne(`.${CONTENT_CLASS}`, el).classList.remove(CONTENT_HIDE_CLASS);
+        SelectorEngine.findOne(`${CONTENT_REF}`, el).classList.remove('!my-0');
+        SelectorEngine.findOne(`${CONTENT_REF}`, el).classList.remove('!py-0');
+        SelectorEngine.findOne(`${CONTENT_REF}`, el).classList.remove('!h-0');
       });
     }
   }
@@ -325,26 +336,26 @@ class Stepper {
   }
 
   _bindKeysNavigation() {
-    this._toggleStepTabIndex(false, SelectorEngine.findOne(`.${HEAD_CLASS}`, this.activeStep));
+    this._toggleStepTabIndex(false, SelectorEngine.findOne(`${HEAD_REF}`, this.activeStep));
 
     this._steps.forEach((el) => {
-      const stepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, el);
+      const stepHead = SelectorEngine.findOne(`${HEAD_REF}`, el);
 
       EventHandler.on(stepHead, EVENT_KEYDOWN, (e) => {
-        const focusedStep = SelectorEngine.parents(e.currentTarget, `.${STEP_CLASS}`)[0];
-        const nextStep = SelectorEngine.next(focusedStep, `.${STEP_CLASS}`)[0];
-        const prevStep = SelectorEngine.prev(focusedStep, `.${STEP_CLASS}`)[0];
-        const focusedStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, focusedStep);
-        const activeStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, this.activeStep);
+        const focusedStep = SelectorEngine.parents(e.currentTarget, `${STEP_REF}`)[0];
+        const nextStep = SelectorEngine.next(focusedStep, `${STEP_REF}`)[0];
+        const prevStep = SelectorEngine.prev(focusedStep, `${STEP_REF}`)[0];
+        const focusedStepHead = SelectorEngine.findOne(`${HEAD_REF}`, focusedStep);
+        const activeStepHead = SelectorEngine.findOne(`${HEAD_REF}`, this.activeStep);
         let nextStepHead = null;
         let prevStepHead = null;
 
         if (nextStep) {
-          nextStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, nextStep);
+          nextStepHead = SelectorEngine.findOne(`${HEAD_REF}`, nextStep);
         }
 
         if (prevStep) {
-          prevStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, prevStep);
+          prevStepHead = SelectorEngine.findOne(`${HEAD_REF}`, prevStep);
         }
 
         if (e.keyCode === LEFT_ARROW && this._currentView !== STEPPER_VERTICAL) {
@@ -398,7 +409,7 @@ class Stepper {
         }
 
         if (e.keyCode === HOME) {
-          const firstStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, this._steps[0]);
+          const firstStepHead = SelectorEngine.findOne(`${HEAD_REF}`, this._steps[0]);
 
           this._toggleStepTabIndex(focusedStepHead, firstStepHead);
           this._toggleOutlineStyles(focusedStepHead, firstStepHead);
@@ -408,7 +419,7 @@ class Stepper {
 
         if (e.keyCode === END) {
           const lastStep = this._steps[this._steps.length - 1];
-          const lastStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, lastStep);
+          const lastStepHead = SelectorEngine.findOne(`${HEAD_REF}`, lastStep);
           this._toggleStepTabIndex(focusedStepHead, lastStepHead);
           this._toggleOutlineStyles(focusedStepHead, lastStepHead);
 
@@ -430,9 +441,9 @@ class Stepper {
       });
 
       EventHandler.on(stepHead, EVENT_KEYUP, (e) => {
-        const focusedStep = SelectorEngine.parents(e.currentTarget, `.${STEP_CLASS}`)[0];
-        const focusedStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, focusedStep);
-        const activeStepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, this.activeStep);
+        const focusedStep = SelectorEngine.parents(e.currentTarget, `${STEP_REF}`)[0];
+        const focusedStepHead = SelectorEngine.findOne(`${HEAD_REF}`, focusedStep);
+        const activeStepHead = SelectorEngine.findOne(`${HEAD_REF}`, this.activeStep);
 
         if (e.keyCode === TAB) {
           this._toggleStepTabIndex(focusedStepHead, activeStepHead);
@@ -465,36 +476,54 @@ class Stepper {
   }
 
   _toggleDisabled() {
-    this._toggleStepClass(this._activeStepIndex, 'add', DISABLED_CLASS);
+    const stepperHead = SelectorEngine.find(`${HEAD_REF}`, this._element);
+    const stepperHeadIcon = SelectorEngine.find(`${HEAD_ICON_REF}`, this._element);
+
+    stepperHead[this._activeStepIndex].classList.add('color-[#858585]');
+    stepperHead[this._activeStepIndex].classList.add('cursor-default');
+    stepperHeadIcon[this._activeStepIndex].classList.add('bg-[#858585]');
     this._toggleStepClass(this._activeStepIndex, 'add', this._options.stepperDisabled);
   }
 
   _toggleActive(index) {
-    this._toggleStepClass(index, 'add', ACTIVE_CLASS);
-    this._toggleStepClass(this._activeStepIndex, 'remove', ACTIVE_CLASS);
+    const stepperContent = SelectorEngine.find(`${CONTENT_REF}`, this._element);
+    const stepperHeadText = SelectorEngine.find(`${HEAD_TEXT_REF}`, this._element);
+    const stepperHeadIcon = SelectorEngine.find(`${HEAD_ICON_REF}`, this._element);
+
+    stepperContent[index].classList.add('block');
+    stepperHeadText[index].classList.add('font-medium');
+    stepperHeadIcon[index].classList.add('bg-[#0d6efd]');
+    stepperHeadIcon[index].classList.remove('bg-[#198754]');
+
+    stepperContent[this._activeStepIndex].classList.remove('block');
+    stepperHeadText[this._activeStepIndex].classList.remove('font-medium');
+    stepperHeadIcon[this._activeStepIndex].classList.remove('bg-[#0d6efd]');
+
     this._toggleStepClass(index, 'add', this._options.stepperActive);
     this._toggleStepClass(this._activeStepIndex, 'remove', this._options.stepperActive);
   }
 
   _toggleCompleted(index) {
-    this._toggleStepClass(index, 'add', COMPLETED_CLASS);
-    this._toggleStepClass(index, 'remove', INVALID_CLASS);
+    const stepperHeadIcon = SelectorEngine.find(`${HEAD_ICON_REF}`, this._element);
+    stepperHeadIcon[index].classList.add('bg-[#198754]');
+    stepperHeadIcon[index].classList.remove('bg-[#dc3545]');
+
     this._toggleStepClass(index, 'add', this._options.stepperCompleted);
     this._toggleStepClass(index, 'remove', this._options.stepperInvalid);
   }
 
   _hideInactiveSteps() {
     this._steps.forEach((el) => {
-      if (!el.classList.contains(ACTIVE_CLASS)) {
-        this._hideElement(SelectorEngine.findOne(`.${CONTENT_CLASS}`, el));
+      if (!el.getAttribute('data-et')) {
+        this._hideElement(SelectorEngine.findOne(`${CONTENT_REF}`, el));
       }
     });
   }
 
   _setHeight(stepElement) {
-    const stepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, stepElement);
+    const stepContent = SelectorEngine.findOne(`${CONTENT_REF}`, stepElement);
     const contentStyle = getComputedStyle(stepContent);
-    const stepHead = SelectorEngine.findOne(`.${HEAD_CLASS}`, stepElement);
+    const stepHead = SelectorEngine.findOne(`${HEAD_REF}`, stepElement);
 
     const headStyle = getComputedStyle(stepHead);
     const stepContentHeight =
@@ -509,21 +538,23 @@ class Stepper {
   }
 
   _hideElement(stepContent) {
-    const isActive = SelectorEngine.parents(stepContent, `.${STEP_CLASS}`)[0].classList.contains(
-      ACTIVE_CLASS
-    );
+    const isActive = SelectorEngine.parents(stepContent, `${STEP_REF}`)[0].getAttribute('data-et');
 
     // prevent hiding during a quick step change
     if (!isActive && this._currentView !== STEPPER_VERTICAL) {
       stepContent.style.display = 'none';
     } else {
-      stepContent.classList.add(CONTENT_HIDE_CLASS);
+      stepContent.classList.add('!my-0');
+      stepContent.classList.add('!py-0');
+      stepContent.classList.add('!h-0');
     }
   }
 
   _showElement(stepContent) {
     if (this._currentView === STEPPER_VERTICAL) {
-      stepContent.classList.remove(CONTENT_HIDE_CLASS);
+      stepContent.classList.remove('!my-0');
+      stepContent.classList.remove('!py-0');
+      stepContent.classList.remove('!h-0');
     } else {
       stepContent.style.display = 'block';
     }
@@ -531,14 +562,14 @@ class Stepper {
 
   _animateHorizontalStep(index) {
     const isForward = index > this._activeStepIndex;
-    const nextStepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, this._steps[index]);
-    const activeStepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, this.activeStep);
+    const nextStepContent = SelectorEngine.findOne(`${CONTENT_REF}`, this._steps[index]);
+    const activeStepContent = SelectorEngine.findOne(`${CONTENT_REF}`, this.activeStep);
 
     let nextStepAnimation;
     let activeStepAnimation;
 
     this._steps.forEach((el, i) => {
-      const stepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, el);
+      const stepContent = SelectorEngine.findOne(`${CONTENT_REF}`, el);
 
       this._clearStepAnimation(stepContent);
 
@@ -571,8 +602,8 @@ class Stepper {
   }
 
   _animateVerticalStep(index) {
-    const nextStepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, this._steps[index]);
-    const activeStepContent = SelectorEngine.findOne(`.${CONTENT_CLASS}`, this.activeStep);
+    const nextStepContent = SelectorEngine.findOne(`${CONTENT_REF}`, this._steps[index]);
+    const activeStepContent = SelectorEngine.findOne(`${CONTENT_REF}`, this.activeStep);
 
     this._hideElement(activeStepContent);
     this._showElement(nextStepContent);

From 7998fc3820dc26e5e5cdad53ecaa6f2b58164309 Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Tue, 29 Nov 2022 15:14:52 +0100
Subject: [PATCH 04/12] Modal: rename bs components and fix animations

---
 demo/sites/bs/modal.html | 124 +++++++++++++++++++--------------------
 src/js/bs/src/modal.js   |  40 +++++++------
 2 files changed, 83 insertions(+), 81 deletions(-)

diff --git a/demo/sites/bs/modal.html b/demo/sites/bs/modal.html
index 65d9d36b9..8a61a3a02 100644
--- a/demo/sites/bs/modal.html
+++ b/demo/sites/bs/modal.html
@@ -32,27 +32,23 @@
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
         data-te-toggle="modal"
-        data-bs-target="#exampleModal"
+        data-te-target="#exampleModal"
       >
         Launch demo modal
       </button>
 
       <!-- Modal -->
       <div
-        data-te-modal-ref="true"
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModal"
         tabindex="-1"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true"
       >
-        <!-- animate-fadeIn -->
-        <!-- data-[et-te-modal-open=true]:animate-fadeIn -->
-        <!-- translate-y-[-50px] transition-all duration-300 ease-in-out   -->
         <div
           data-te-modal-dialog-ref
-          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
-          data-te-fade
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
@@ -66,7 +62,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -85,7 +81,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
               >
                 Close
               </button>
@@ -109,25 +105,25 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
         data-te-toggle="modal"
-        data-bs-target="#staticBackdrop"
+        data-te-target="#staticBackdrop"
       >
         Launch static backdrop modal
       </button>
 
       <!-- Modal -->
       <div
+        data-te-modal-init
         class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="staticBackdrop"
-        data-bs-backdrop="static"
-        data-bs-keyboard="false"
+        data-te-backdrop="static"
+        data-te-keyboard="false"
         tabindex="-1"
         aria-labelledby="staticBackdropLabel"
         aria-hidden="true"
       >
         <div
           data-te-modal-dialog-ref
-          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
-          data-te-fade
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
@@ -141,7 +137,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -158,7 +154,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
               >
                 Close
               </button>
@@ -182,14 +178,15 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
         data-te-toggle="modal"
-        data-bs-target="#exampleModalLong"
+        data-te-target="#exampleModalLong"
       >
         Launch demo modal long
       </button>
 
       <!-- Modal -->
       <div
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalLong"
         tabindex="-1"
         aria-labelledby="exampleModalLongLabel"
@@ -197,8 +194,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       >
         <div
           data-te-modal-dialog-ref
-          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
-          data-te-fade
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
@@ -215,7 +211,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -238,7 +234,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
               >
                 Close
               </button>
@@ -262,14 +258,15 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
         data-te-toggle="modal"
-        data-bs-target="#exampleModalScrollable"
+        data-te-target="#exampleModalScrollable"
       >
         Launch demo modal dialog scrollable
       </button>
 
       <!-- Modal -->
       <div
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalScrollable"
         tabindex="-1"
         aria-labelledby="exampleModalScrollableLabel"
@@ -277,8 +274,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       >
         <div
           data-te-modal-dialog-ref
-          class="h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:h-[calc(100%-3.5rem)]"
-          data-te-fade
+          class="h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:h-[calc(100%-3.5rem)] opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="max-h-[100%] overflow-hidden border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
@@ -295,7 +291,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -316,12 +312,12 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <p>This content should appear at the bottom after you scroll.</p>
             </div>
             <div
-              class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
             >
               <button
                 type="button"
                 class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
               >
                 Close
               </button>
@@ -340,12 +336,12 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       <br />
       <br />
 
-      <div class="">
+      <div>
         <button
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
           data-te-toggle="modal"
-          data-bs-target="#exampleModalCenter"
+          data-te-target="#exampleModalCenter"
         >
           Vertically centered modal
         </button>
@@ -353,14 +349,15 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
           data-te-toggle="modal"
-          data-bs-target="#exampleModalCenteredScrollable"
+          data-te-target="#exampleModalCenteredScrollable"
         >
           Vertically centered scrollable modal
         </button>
       </div>
 
       <div
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalCenter"
         tabindex="-1"
         aria-labelledby="exampleModalCenterTitle"
@@ -369,8 +366,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       >
         <div
           data-te-modal-dialog-ref
-          class="flex items-center min-h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:min-h-[calc(100%-3.5rem)]"
-          data-te-fade
+          class="flex items-center min-h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:min-h-[calc(100%-3.5rem)] opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
@@ -387,7 +383,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -406,7 +402,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
               >
                 Close
               </button>
@@ -422,7 +418,8 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       </div>
 
       <div
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalCenteredScrollable"
         tabindex="-1"
         aria-labelledby="exampleModalCenteredScrollable"
@@ -431,8 +428,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       >
         <div
           data-te-modal-dialog-ref
-          class="flex items-center min-h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:min-h-[calc(100%-3.5rem)]"
-          data-te-fade
+          class="flex items-center min-h-[calc(100%-1rem)] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto min-[576px]:min-h-[calc(100%-3.5rem)] opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
@@ -449,7 +445,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -477,7 +473,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
               <button
                 type="button"
                 class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
               >
                 Close
               </button>
@@ -496,12 +492,12 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       <br />
       <br />
 
-      <div class="">
+      <div>
         <button
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
           data-te-toggle="modal"
-          data-bs-target="#exampleModalXl"
+          data-te-target="#exampleModalXl"
         >
           Extra large modal
         </button>
@@ -509,7 +505,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
           data-te-toggle="modal"
-          data-bs-target="#exampleModalLg"
+          data-te-target="#exampleModalLg"
         >
           Large modal
         </button>
@@ -517,14 +513,15 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
           type="button"
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
           data-te-toggle="modal"
-          data-bs-target="#exampleModalSm"
+          data-te-target="#exampleModalSm"
         >
           Small modal
         </button>
       </div>
 
       <div
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalXl"
         tabindex="-1"
         aria-labelledby="exampleModalXlLabel"
@@ -533,8 +530,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLab
       >
         <div
           data-te-modal-dialog-ref
-          class="min-[1200px]:max-w-[1140px] min-[992px]:max-w-[800px] relative w-auto pointer-events-none translate-y-[-50px] transition-all duration-300 ease-in-out min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
-          data-te-fade
+          class="min-[1200px]:max-w-[1140px] min-[992px]:max-w-[800px] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
@@ -548,7 +544,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalXlL
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -564,7 +560,8 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalXlL
       </div>
 
       <div
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalLg"
         tabindex="-1"
         aria-labelledby="exampleModalLgLabel"
@@ -573,8 +570,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalXlL
       >
         <div
           data-te-modal-dialog-ref
-          class="min-[992px]:max-w-[800px] relative w-auto pointer-events-none translate-y-[-50px] transition-all duration-300 ease-in-out min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto"
-          data-te-fade
+          class="min-[992px]:max-w-[800px] relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
@@ -588,7 +584,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLgL
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -604,7 +600,8 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLgL
       </div>
 
       <div
-        class="modal z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        data-te-modal-init
+        class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalSm"
         tabindex="-1"
         aria-labelledby="exampleModalSmLabel"
@@ -613,8 +610,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLgL
       >
         <div
           data-te-modal-dialog-ref
-          class="relative w-auto pointer-events-none translate-y-[-50px] transition-all duration-300 ease-in-out min-[576px]:max-w-[300px] min-[576px]:my-7 min-[576px]:mx-auto"
-          data-te-fade
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[300px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
@@ -628,7 +624,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
               <button
                 type="button"
                 class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
@@ -652,13 +648,14 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
         data-te-toggle="modal"
-        data-bs-target="#exampleModalFullscreen"
+        data-te-target="#exampleModalFullscreen"
       >
         Launch demo modal full screen
       </button>
 
       <!-- Modal -->
       <div
+        data-te-modal-init
         class="z-[1055] fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
         id="exampleModalFullscreen"
         tabindex="-1"
@@ -667,8 +664,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
       >
         <div
           data-te-modal-dialog-ref
-          class="min-[0px]:h-full min-[0px]:max-w-none min-[0px]:m-0 relative w-auto pointer-events-none"
-          data-te-fade
+          class="min-[0px]:h-full min-[0px]:max-w-none min-[0px]:m-0 relative w-auto pointer-events-none opacity-0 translate-y-[-50px] transition-all duration-300 ease-in-out"
         >
           <div
             class="min-[0px]:h-full min-[0px]:border-0 min-[0px]:rounded-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current"
@@ -685,7 +681,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
               <button
                 type="button"
                 class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
                 aria-label="Close"
               ></button>
             </div>
@@ -696,7 +692,7 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
               <button
                 type="button"
                 class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                data-bs-dismiss="modal"
+                data-te-modal-dismiss
               >
                 Close
               </button>
diff --git a/src/js/bs/src/modal.js b/src/js/bs/src/modal.js
index 2ffcbe3c4..32eef89d1 100644
--- a/src/js/bs/src/modal.js
+++ b/src/js/bs/src/modal.js
@@ -140,14 +140,6 @@ class Modal extends BaseComponent {
     });
 
     this._showBackdrop(() => this._showElement(relatedTarget));
-
-    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
-    modalDialog.classList.add('translate-y-[-50px]');
-    modalDialog.classList.add('opacity-100');
-    modalDialog.classList.add('transition-all');
-    modalDialog.classList.add('duration-300');
-    modalDialog.classList.add('ease-in-out');
-    modalDialog.classList.remove('opacity-0');
   }
 
   hide() {
@@ -229,12 +221,18 @@ class Modal extends BaseComponent {
     }
 
     this._element.style.display = 'block';
+    this._element.classList.remove('hidden');
     this._element.removeAttribute('aria-hidden');
     this._element.setAttribute('aria-modal', true);
     this._element.setAttribute('role', 'dialog');
     this._element.setAttribute(`${OPEN_SELECTOR}`, 'true');
     this._element.scrollTop = 0;
 
+    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+    modalDialog.classList.add(CLASS_NAME_SHOW);
+    modalDialog.classList.remove('opacity-0');
+    modalDialog.classList.add('opacity-100');
+
     if (modalBody) {
       modalBody.scrollTop = 0;
     }
@@ -255,10 +253,6 @@ class Modal extends BaseComponent {
     };
 
     this._queueCallback(transitionComplete, this._dialog, isAnimated);
-
-    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
-    modalDialog.classList.add(CLASS_NAME_SHOW);
-    modalDialog.classList.add('opacity-50');
   }
 
   _setEscapeEvent() {
@@ -285,7 +279,15 @@ class Modal extends BaseComponent {
   }
 
   _hideModal() {
-    this._element.style.display = 'none';
+    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
+    modalDialog.classList.remove(CLASS_NAME_SHOW);
+    modalDialog.classList.remove('opacity-100');
+    modalDialog.classList.add('opacity-0');
+
+    setTimeout(() => {
+      this._element.style.display = 'none';
+    }, '300');
+
     this._element.setAttribute('aria-hidden', true);
     this._element.removeAttribute('aria-modal');
     this._element.removeAttribute('role');
@@ -296,9 +298,6 @@ class Modal extends BaseComponent {
       this._scrollBar.reset();
       EventHandler.trigger(this._element, EVENT_HIDDEN);
     });
-
-    const modalDialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
-    modalDialog.classList.remove(CLASS_NAME_SHOW);
   }
 
   _showBackdrop(callback) {
@@ -323,7 +322,7 @@ class Modal extends BaseComponent {
   }
 
   _isAnimated() {
-    const animate = SelectorEngine.findOne('[data-te-fade]', this._element);
+    const animate = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
     return !!animate;
   }
 
@@ -354,6 +353,13 @@ class Modal extends BaseComponent {
     classList.add('ease-in-out');
     this._queueCallback(() => {
       classList.remove(CLASS_NAME_STATIC);
+
+      setTimeout(() => {
+        classList.remove('transition-scale');
+        classList.remove('duration-300');
+        classList.remove('ease-in-out');
+      }, '300');
+
       if (!isModalOverflowing) {
         this._queueCallback(() => {
           style.overflowY = '';

From 0144143c62ef2927634fc739c58e18944d8744f3 Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 12:06:56 +0100
Subject: [PATCH 05/12] Tooltip: added Tailwind animations and fix font

---
 demo/sites/bs/tooltip.html | 30 +++++++++++-----------
 src/js/bs/src/tooltip.js   | 51 +++++++++++++++++++++++++-------------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/demo/sites/bs/tooltip.html b/demo/sites/bs/tooltip.html
index 473fc82f8..ca78b4e70 100644
--- a/demo/sites/bs/tooltip.html
+++ b/demo/sites/bs/tooltip.html
@@ -7,9 +7,9 @@
     <meta name="author" content="Tailwind Elements" />
     <title>Album example · Bootstrap v5.1</title>
 
-    <!-- Inter font -->
+    <!-- Roboto font -->
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
       rel="stylesheet"
     />
     <!-- Tailwind -->
@@ -31,7 +31,7 @@
         <a
           href="#"
           class="text-blue-600 hover:text-blue-700 transition duration-150 ease-in-out"
-          data-bs-toggle="tooltip"
+          data-te-toggle="tooltip"
           title="Hi! I'm tooltip"
           >tooltip</a
         >
@@ -44,8 +44,8 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
+        data-te-toggle="tooltip"
+        data-te-placement="top"
         title="Tooltip on top"
       >
         Tooltip on top
@@ -53,8 +53,8 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="right"
+        data-te-toggle="tooltip"
+        data-te-placement="right"
         title="Tooltip on right"
       >
         Tooltip on right
@@ -62,8 +62,8 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="bottom"
+        data-te-toggle="tooltip"
+        data-te-placement="bottom"
         title="Tooltip on bottom"
       >
         Tooltip on bottom
@@ -71,8 +71,8 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="left"
+        data-te-toggle="tooltip"
+        data-te-placement="left"
         title="Tooltip on left"
       >
         Tooltip on left
@@ -85,8 +85,8 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-html="true"
+        data-te-toggle="tooltip"
+        data-te-html="true"
         title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
       >
         Tooltip with html
@@ -96,7 +96,7 @@
       <br />
       <br />
 
-      <span class="inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
+      <span class="inline-block" tabindex="0" data-te-toggle="tooltip" title="Disabled tooltip">
         <button
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md focus:outline-none focus:ring-0 transition duration-150 ease-in-out pointer-events-none opacity-60"
           type="button"
@@ -121,7 +121,7 @@
     <!-- Custom scripts -->
     <script type="text/javascript">
       var tooltipTriggerList = [].slice.call(
-        document.querySelectorAll('[data-bs-toggle="tooltip"]')
+        document.querySelectorAll('[data-te-toggle="tooltip"]')
       );
       var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
         return new Tooltip(tooltipTriggerEl);
diff --git a/src/js/bs/src/tooltip.js b/src/js/bs/src/tooltip.js
index c88b9351a..77cab01c0 100644
--- a/src/js/bs/src/tooltip.js
+++ b/src/js/bs/src/tooltip.js
@@ -31,9 +31,9 @@ import BaseComponent from './base-component';
  */
 
 const NAME = 'tooltip';
-const DATA_KEY = 'bs.tooltip';
+const DATA_KEY = 'te.tooltip';
 const EVENT_KEY = `.${DATA_KEY}`;
-const CLASS_PREFIX = 'bs-tooltip';
+const CLASS_PREFIX = 'te-tooltip';
 const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn']);
 
 const DefaultType = {
@@ -67,9 +67,8 @@ const AttachmentMap = {
 const Default = {
   animation: true,
   template:
-    '<div class="tooltip" role="tooltip">' +
-    '<div class="tooltip-arrow"></div>' +
-    '<div class="tooltip-inner"></div>' +
+    '<div class="opacity-0 transition-opacity duration-300 ease-in-out absolute z-[1080] block m-0 text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal" role="tooltip">' +
+    '<div data-et-tooltip-inner-ref class="tooltip-inner max-w-[200px] text-sm py-1.5 px-4 text-white text-center bg-[#6d6d6d] rounded"></div>' +
     '</div>',
   trigger: 'hover focus',
   title: '',
@@ -111,7 +110,7 @@ const HOVER_STATE_OUT = 'out';
 const SELECTOR_TOOLTIP_INNER = '.tooltip-inner';
 const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`;
 
-const EVENT_MODAL_HIDE = 'hide.bs.modal';
+const EVENT_MODAL_HIDE = 'hide.te.modal';
 
 const TRIGGER_HOVER = 'hover';
 const TRIGGER_FOCUS = 'focus';
@@ -240,7 +239,7 @@ class Tooltip extends BaseComponent {
       return;
     }
 
-    // A trick to recreate a tooltip in case a new title is given by using the NOT documented `data-bs-original-title`
+    // A trick to recreate a tooltip in case a new title is given by using the NOT documented `data-te-original-title`
     // This will be removed later in favor of a `setContent` method
     if (
       this.constructor.NAME === 'tooltip' &&
@@ -258,9 +257,12 @@ class Tooltip extends BaseComponent {
     tip.setAttribute('id', tipId);
     this._element.setAttribute('aria-describedby', tipId);
 
-    if (this._config.animation) {
-      tip.classList.add(CLASS_NAME_FADE);
-    }
+    setTimeout(() => {
+      this.tip.classList.add('opacity-100');
+      this.tip.classList.remove('opacity-0');
+    }, 100);
+    // if (this._config.animation) {
+    // }
 
     const placement =
       typeof this._config.placement === 'function'
@@ -284,7 +286,21 @@ class Tooltip extends BaseComponent {
       this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment));
     }
 
-    tip.classList.add(CLASS_NAME_SHOW);
+    switch (placement) {
+      case 'bottom':
+        tip.classList.add('py-[0.4rem]');
+        break;
+      case 'left':
+        tip.classList.add('px-[0.4rem]');
+        break;
+      case 'right':
+        tip.classList.add('px-[0.4rem]');
+        break;
+
+      default:
+        tip.classList.add('py-[0.4rem]');
+        break;
+    }
 
     const customClass = this._resolvePossibleFunction(this._config.customClass);
     if (customClass) {
@@ -312,7 +328,7 @@ class Tooltip extends BaseComponent {
       }
     };
 
-    const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE);
+    const isAnimated = this.tip.classList.contains('transition-opacity');
     this._queueCallback(complete, this.tip, isAnimated);
   }
 
@@ -343,7 +359,8 @@ class Tooltip extends BaseComponent {
       return;
     }
 
-    tip.classList.remove(CLASS_NAME_SHOW);
+    tip.classList.add('opacity-0');
+    tip.classList.remove('opacity-100');
 
     // If this is a touch-enabled device we remove the extra
     // empty mouseover listeners we added for iOS support
@@ -357,7 +374,7 @@ class Tooltip extends BaseComponent {
     this._activeTrigger[TRIGGER_FOCUS] = false;
     this._activeTrigger[TRIGGER_HOVER] = false;
 
-    const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE);
+    const isAnimated = this.tip.classList.contains('opacity-0');
     this._queueCallback(complete, this.tip, isAnimated);
     this._hoverState = '';
   }
@@ -439,7 +456,7 @@ class Tooltip extends BaseComponent {
   }
 
   getTitle() {
-    const title = this._element.getAttribute('data-bs-original-title') || this._config.title;
+    const title = this._element.getAttribute('data-te-original-title') || this._config.title;
 
     return this._resolvePossibleFunction(title);
   }
@@ -598,10 +615,10 @@ class Tooltip extends BaseComponent {
 
   _fixTitle() {
     const title = this._element.getAttribute('title');
-    const originalTitleType = typeof this._element.getAttribute('data-bs-original-title');
+    const originalTitleType = typeof this._element.getAttribute('data-te-original-title');
 
     if (title || originalTitleType !== 'string') {
-      this._element.setAttribute('data-bs-original-title', title || '');
+      this._element.setAttribute('data-te-original-title', title || '');
       if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
         this._element.setAttribute('aria-label', title);
       }

From 8975d5e90a5418a8425e4dcfe7d4b966e3f5f192 Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 12:09:08 +0100
Subject: [PATCH 06/12] Tooltip: fix commented code

---
 src/js/bs/src/tooltip.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/js/bs/src/tooltip.js b/src/js/bs/src/tooltip.js
index 77cab01c0..ae8c3f06e 100644
--- a/src/js/bs/src/tooltip.js
+++ b/src/js/bs/src/tooltip.js
@@ -257,12 +257,12 @@ class Tooltip extends BaseComponent {
     tip.setAttribute('id', tipId);
     this._element.setAttribute('aria-describedby', tipId);
 
-    setTimeout(() => {
-      this.tip.classList.add('opacity-100');
-      this.tip.classList.remove('opacity-0');
-    }, 100);
-    // if (this._config.animation) {
-    // }
+    if (this._config.animation) {
+      setTimeout(() => {
+        this.tip.classList.add('opacity-100');
+        this.tip.classList.remove('opacity-0');
+      }, 100);
+    }
 
     const placement =
       typeof this._config.placement === 'function'

From 5692a29ebe2b69f9894d0ea510061961039e0dde Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 13:40:50 +0100
Subject: [PATCH 07/12] Tooltip: fix for Popover styling

---
 src/js/bs/src/tooltip.js | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/js/bs/src/tooltip.js b/src/js/bs/src/tooltip.js
index ae8c3f06e..9af105325 100644
--- a/src/js/bs/src/tooltip.js
+++ b/src/js/bs/src/tooltip.js
@@ -286,20 +286,23 @@ class Tooltip extends BaseComponent {
       this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment));
     }
 
-    switch (placement) {
-      case 'bottom':
-        tip.classList.add('py-[0.4rem]');
-        break;
-      case 'left':
-        tip.classList.add('px-[0.4rem]');
-        break;
-      case 'right':
-        tip.classList.add('px-[0.4rem]');
-        break;
-
-      default:
-        tip.classList.add('py-[0.4rem]');
-        break;
+    const notPopover = tip.getAttribute('id').includes('tooltip');
+    if (notPopover) {
+      switch (placement) {
+        case 'bottom':
+          tip.classList.add('py-[0.4rem]');
+          break;
+        case 'left':
+          tip.classList.add('px-[0.4rem]');
+          break;
+        case 'right':
+          tip.classList.add('px-[0.4rem]');
+          break;
+
+        default:
+          tip.classList.add('py-[0.4rem]');
+          break;
+      }
     }
 
     const customClass = this._resolvePossibleFunction(this._config.customClass);

From 2af6582724ef3cf857ffbc6ccda350633a58cfdb Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 13:41:15 +0100
Subject: [PATCH 08/12] Popover: remove BS classes

---
 demo/sites/bs/popover.html | 44 +++++++++++++++++++-------------------
 src/js/bs/src/popover.js   | 11 +++++-----
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/demo/sites/bs/popover.html b/demo/sites/bs/popover.html
index 460df6ddf..e16479492 100644
--- a/demo/sites/bs/popover.html
+++ b/demo/sites/bs/popover.html
@@ -30,9 +30,9 @@
       <button
         type="button"
         class="px-7 py-3 bg-red-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-title="Popover title"
-        data-bs-content="And here's some amazing content. It's very engaging. Right?"
+        data-te-toggle="popover"
+        data-te-title="Popover title"
+        data-te-content="And here's some amazing content. It's very engaging. Right?"
       >
         Click to toggle popover
       </button>
@@ -44,36 +44,36 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="top"
-        data-bs-content="Top popover"
+        data-te-toggle="popover"
+        data-te-placement="top"
+        data-te-content="Top popover"
       >
         Popover on top
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="right"
-        data-bs-content="Right popover"
+        data-te-toggle="popover"
+        data-te-placement="right"
+        data-te-content="Right popover"
       >
         Popover on right
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="bottom"
-        data-bs-content="Bottom popover"
+        data-te-toggle="popover"
+        data-te-placement="bottom"
+        data-te-content="Bottom popover"
       >
         Popover on bottom
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="left"
-        data-bs-content="Left popover"
+        data-te-toggle="popover"
+        data-te-placement="left"
+        data-te-content="Left popover"
       >
         Popover on left
       </button>
@@ -86,10 +86,10 @@
         tabindex="0"
         class="px-7 py-3 bg-red-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out"
         role="button"
-        data-bs-toggle="popover"
-        data-bs-trigger="focus"
+        data-te-toggle="popover"
+        data-te-trigger="focus"
         title="Dismissible popover"
-        data-bs-content="And here's some amazing content. It's very engaging. Right?"
+        data-te-content="And here's some amazing content. It's very engaging. Right?"
         >Dismissible popover</a
       >
 
@@ -100,9 +100,9 @@
       <span
         class="inline-block"
         tabindex="0"
-        data-bs-toggle="popover"
-        data-bs-trigger="hover focus"
-        data-bs-content="Disabled popover"
+        data-te-toggle="popover"
+        data-te-trigger="hover focus"
+        data-te-content="Disabled popover"
       >
         <button
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md focus:outline-none focus:ring-0 transition duration-150 ease-in-out pointer-events-none opacity-60"
@@ -126,7 +126,7 @@
     <!-- Custom scripts -->
     <script>
       var popoverTriggerList = [].slice.call(
-        document.querySelectorAll('[data-bs-toggle="popover"]')
+        document.querySelectorAll('[data-te-toggle="popover"]')
       );
       var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
         return new Popover(popoverTriggerEl);
diff --git a/src/js/bs/src/popover.js b/src/js/bs/src/popover.js
index bd1ad46ca..9dea53935 100644
--- a/src/js/bs/src/popover.js
+++ b/src/js/bs/src/popover.js
@@ -15,9 +15,9 @@ import Tooltip from './tooltip';
  */
 
 const NAME = 'popover';
-const DATA_KEY = 'bs.popover';
+const DATA_KEY = 'te.popover';
 const EVENT_KEY = `.${DATA_KEY}`;
-const CLASS_PREFIX = 'bs-popover';
+const CLASS_PREFIX = 'te-popover';
 
 const Default = {
   ...Tooltip.Default,
@@ -26,10 +26,9 @@ const Default = {
   trigger: 'click',
   content: '',
   template:
-    '<div class="popover" role="tooltip">' +
-    '<div class="popover-arrow"></div>' +
-    '<h3 class="popover-header"></h3>' +
-    '<div class="popover-body"></div>' +
+    '<div class="opacity-0 transition-opacity duration-300 ease-in-out absolute top-0 left-0 z-[1070] block max-w-[267px] break-words bg-white bg-clip-padding border-0 rounded-lg shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)] text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal" role="tooltip">' +
+    '<h3 class="popover-header py-2 px-4 mb-0 bg-white border border-solid rounded-t-lg font-medium empty:hidden"></h3>' +
+    '<div class="popover-body p-4 text-[#212529]"></div>' +
     '</div>',
 };
 

From 54aa7727e480ae21e31d4b1bc0683ac7bdae7048 Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 13:44:54 +0100
Subject: [PATCH 09/12] Offcanvas: fix working with Backdrop

---
 src/js/bs/src/offcanvas.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/js/bs/src/offcanvas.js b/src/js/bs/src/offcanvas.js
index 43159f651..ff31b1af3 100644
--- a/src/js/bs/src/offcanvas.js
+++ b/src/js/bs/src/offcanvas.js
@@ -47,8 +47,6 @@ const DefaultType = {
 };
 
 const CLASS_NAME_SHOW = 'show';
-const CLASS_NAME_BACKDROP =
-  'fixed top-0 left-0 z-[1040] w-screen h-screen bg-black [&[data-te-backdrop-show]]:opacity-50';
 const OPEN_SELECTOR = '[data-te-offcanvas-init][data-te-offcanvas-show]';
 
 const EVENT_SHOW = `show${EVENT_KEY}`;
@@ -182,7 +180,6 @@ class Offcanvas extends BaseComponent {
 
   _initializeBackDrop() {
     return new Backdrop({
-      className: CLASS_NAME_BACKDROP,
       isVisible: this._config.backdrop,
       isAnimated: true,
       rootElement: this._element.parentNode,

From fa22ae16ced00273796e8b2fe087df0623361674 Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 14:09:44 +0100
Subject: [PATCH 10/12] Manipulator: add helper function for many classes

---
 src/js/mdb/dom/manipulator.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/js/mdb/dom/manipulator.js b/src/js/mdb/dom/manipulator.js
index 6f6300bca..775551086 100644
--- a/src/js/mdb/dom/manipulator.js
+++ b/src/js/mdb/dom/manipulator.js
@@ -99,6 +99,12 @@ const Manipulator = {
     element.classList.add(className);
   },
 
+  addManyClasses(element, arrayClasses) {
+    arrayClasses.forEach((singleClass) => {
+      element.classList.add(singleClass);
+    })
+  },
+
   addStyle(element, style) {
     Object.keys(style).forEach((property) => {
       element.style[property] = style[property];

From d9df333de450dc3abb01f71ea038106decfc636c Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 14:11:03 +0100
Subject: [PATCH 11/12] Backdrop: add shortcut for adding many classes

---
 src/js/bs/src/util/backdrop.js | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/js/bs/src/util/backdrop.js b/src/js/bs/src/util/backdrop.js
index afce95d0f..21c34bd38 100644
--- a/src/js/bs/src/util/backdrop.js
+++ b/src/js/bs/src/util/backdrop.js
@@ -6,6 +6,7 @@
  */
 
 import EventHandler from '../dom/event-handler';
+import Manipulator from '../../../mdb/dom/manipulator';
 import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index';
 
 const Default = {
@@ -22,7 +23,6 @@ const DefaultType = {
   clickCallback: '(function|null)',
 };
 const NAME = 'backdrop';
-
 const EVENT_MOUSEDOWN = `mousedown.te.${NAME}`;
 
 class Backdrop {
@@ -43,19 +43,22 @@ class Backdrop {
     if (this._config.isAnimated) {
       reflow(this._getElement());
     }
-    this._getElement().classList.add('opacity-50');
-    this._getElement().classList.add('transition-all');
-    this._getElement().classList.add('duration-300');
-    this._getElement().classList.add('ease-in-out');
-    this._getElement().classList.add('fixed');
-    this._getElement().classList.add('top-0');
-    this._getElement().classList.add('left-0');
-    this._getElement().classList.add('z-[1050]');
-    this._getElement().classList.add('bg-[#000]');
-    this._getElement().classList.add('w-[100vw]');
-    this._getElement().classList.add('h-[100vh]');
-
-    this._getElement().classList.remove('opacity-0');
+
+    Manipulator.removeClass(this._getElement(), 'opacity-0');
+    Manipulator.addManyClasses(this._getElement(), [
+      'opacity-50',
+      'transition-all',
+      'duration-300',
+      'ease-in-out',
+      'fixed',
+      'top-0',
+      'left-0',
+      'z-[1040]',
+      'bg-[#000]',
+      'w-[100vw]',
+      'h-[100vh]',
+    ]);
+    this._element.setAttribute('data-te-backdrop-show', '');
 
     this._emulateAnimation(() => {
       execute(callback);
@@ -68,6 +71,7 @@ class Backdrop {
       return;
     }
 
+    this._element.removeAttribute('data-te-backdrop-show');
     this._getElement().classList.add('opacity-0');
     this._getElement().classList.remove('opacity-50');
 
@@ -84,7 +88,6 @@ class Backdrop {
       const backdrop = document.createElement('div');
       backdrop.className = this._config.className;
       if (this._config.isAnimated) {
-        // backdrop.classList.add(CLASS_NAME_FADE);
         backdrop.classList.add('opacity-50');
       }
 

From 6ef623d54b2abfd9b9ad4d0ab6fe3f13f0b3c4db Mon Sep 17 00:00:00 2001
From: Trochonovitz <mat.trochonowicz@gmail.com>
Date: Wed, 30 Nov 2022 16:22:48 +0100
Subject: [PATCH 12/12] Modal: add new postions

---
 demo/sites/bs/modal.html | 288 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 270 insertions(+), 18 deletions(-)

diff --git a/demo/sites/bs/modal.html b/demo/sites/bs/modal.html
index 8a61a3a02..ace235491 100644
--- a/demo/sites/bs/modal.html
+++ b/demo/sites/bs/modal.html
@@ -705,29 +705,281 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
       <br />
       <br />
 
-      <br />
-      <br />
-      <br />
+      <!-- Button trigger modal -->
+      <button
+        type="button"
+        class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
+        data-te-toggle="modal"
+        data-te-target="#leftTopModal"
+      >
+        Launch left top modal
+      </button>
 
-      <br />
-      <br />
-      <br />
+      <!-- Modal -->
+      <div
+        data-te-modal-init
+        class="z-[1055] fixed top-0 right-[25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        id="leftTopModal"
+        tabindex="-1"
+        aria-labelledby="leftTopModalLabel"
+        aria-hidden="true"
+      >
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[-100%] transition-all duration-300 ease-in-out"
+        >
+          <div
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
+          >
+            <div
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+            >
+              <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
+                Modal title
+              </h5>
+              <button
+                type="button"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
+                data-te-modal-dismiss
+                aria-label="Close"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div class="flex-auto relative p-4" data-te-modal-body-ref>
+              Modal body text goes here.
+            </div>
+            <div
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+            >
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
+                data-te-modal-dismiss
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
+              >
+                Save changes
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <br />
-      <br />
-      <br />
+      <!-- Button trigger modal -->
+      <button
+        type="button"
+        class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
+        data-te-toggle="modal"
+        data-te-target="#rightTopModal"
+      >
+        Launch right top modal
+      </button>
 
-      <br />
-      <br />
-      <br />
+      <!-- Modal -->
+      <div
+        data-te-modal-init
+        class="z-[1055] fixed top-0 right-[-25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        id="rightTopModal"
+        tabindex="-1"
+        aria-labelledby="rightTopModalLabel"
+        aria-hidden="true"
+      >
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[100%] transition-all duration-300 ease-in-out"
+        >
+          <div
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
+          >
+            <div
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+            >
+              <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
+                Modal title
+              </h5>
+              <button
+                type="button"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
+                data-te-modal-dismiss
+                aria-label="Close"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div class="flex-auto relative p-4" data-te-modal-body-ref>
+              Modal body text goes here.
+            </div>
+            <div
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+            >
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
+                data-te-modal-dismiss
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
+              >
+                Save changes
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <br />
-      <br />
-      <br />
+      <!-- Button trigger modal -->
+      <button
+        type="button"
+        class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
+        data-te-toggle="modal"
+        data-te-target="#rightBottomModal"
+      >
+        Launch right bottom modal
+      </button>
 
-      <br />
-      <br />
-      <br />
+      <!-- Modal -->
+      <div
+        data-te-modal-init
+        class="z-[1055] fixed top-[65%] right-[-25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        id="rightBottomModal"
+        tabindex="-1"
+        aria-labelledby="rightBottomModalLabel"
+        aria-hidden="true"
+      >
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[100%] transition-all duration-300 ease-in-out"
+        >
+          <div
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
+          >
+            <div
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+            >
+              <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
+                Modal title
+              </h5>
+              <button
+                type="button"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
+                data-te-modal-dismiss
+                aria-label="Close"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div class="flex-auto relative p-4" data-te-modal-body-ref>
+              Modal body text goes here.
+            </div>
+            <div
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+            >
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
+                data-te-modal-dismiss
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
+              >
+                Save changes
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Button trigger modal -->
+      <button
+        type="button"
+        class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
+        data-te-toggle="modal"
+        data-te-target="#leftBottomModal"
+      >
+        Launch left bottom modal
+      </button>
+
+      <!-- Modal -->
+      <div
+        data-te-modal-init
+        class="z-[1055] fixed top-[65%] right-[25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
+        id="leftBottomModal"
+        tabindex="-1"
+        aria-labelledby="leftBottomModalLabel"
+        aria-hidden="true"
+      >
+        <div
+          data-te-modal-dialog-ref
+          class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[-100%] transition-all duration-300 ease-in-out"
+        >
+          <div
+            class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
+          >
+            <div
+              class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
+            >
+              <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
+                Modal title
+              </h5>
+              <button
+                type="button"
+                class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
+                data-te-modal-dismiss
+                aria-label="Close"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
+                  <path
+                    d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div class="flex-auto relative p-4" data-te-modal-body-ref>
+              Modal body text goes here.
+            </div>
+            <div
+              class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
+            >
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
+                data-te-modal-dismiss
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
+              >
+                Save changes
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <br />
       <br />