feat(RTL): implement RTL

Using RTLCSS directives, renaming things to use logical names and following best practices.

5 files changed, 27 insertions, 28 deletions

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 9dad43543..930940a15 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -90,9 +90,9 @@
 
           <div class="btn-group">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-              This dropdown's menu is right-aligned
+              This dropdown's menu is end-aligned
             </button>
-            <div class="dropdown-menu dropdown-menu-right">
+            <div class="dropdown-menu dropdown-menu-end">
               <button class="dropdown-item" type="button">Action</button>
               <button class="dropdown-item" type="button">Another action</button>
               <button class="dropdown-item" type="button">Something else here</button>
@@ -102,19 +102,19 @@
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup" role="group">
-            <a href="#" class="btn btn-secondary">Dropup split align right</a>
+            <a href="#" class="btn btn-secondary">Dropup split align end</a>
             <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
-            <div class="dropdown-menu dropdown-menu-right">
+            <div class="dropdown-menu dropdown-menu-end">
               <button class="dropdown-item" type="button">Action</button>
               <button class="dropdown-item" type="button">Another action</button>
               <button class="dropdown-item" type="button">Something else here with a long text</button>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align right</button>
-            <div class="dropdown-menu dropdown-menu-right">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align end</button>
+            <div class="dropdown-menu dropdown-menu-end">
               <button class="dropdown-item" type="button">Action</button>
               <button class="dropdown-item" type="button">Another action</button>
               <button class="dropdown-item" type="button">Something else here with a long text</button>
@@ -123,8 +123,8 @@
         </div>
 
         <div class="col-sm-12 mt-4">
-          <div class="btn-group dropright" role="group">
-            <a href="#" class="btn btn-secondary">Dropright split</a>
+          <div class="btn-group dropend" role="group">
+            <a href="#" class="btn btn-secondary">Dropend split</a>
             <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
@@ -134,9 +134,9 @@
               <button class="dropdown-item" type="button">Something else here with a long text</button>
             </div>
           </div>
-          <div class="btn-group dropright">
+          <div class="btn-group dropend">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false">
-              Dropright
+              Dropend
             </button>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
               <button class="dropdown-item" type="button">Action</button>
@@ -144,9 +144,9 @@
               <button class="dropdown-item" type="button">Something else here</button>
             </div>
           </div>
-          <!-- dropleft -->
-          <div class="btn-group dropleft" role="group">
-            <a href="#" class="btn btn-secondary">Dropleft split</a>
+          <!-- dropstart -->
+          <div class="btn-group dropstart" role="group">
+            <a href="#" class="btn btn-secondary">Dropstart split</a>
             <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
@@ -156,11 +156,11 @@
               <button class="dropdown-item" type="button">Something else here with a long text</button>
             </div>
           </div>
-          <div class="btn-group dropleft">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-bs-toggle="dropdown" aria-expanded="false">
-              Dropleft
+          <div class="btn-group dropstart">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenu" data-bs-toggle="dropdown" aria-expanded="false">
+              Dropstart
             </button>
-            <div class="dropdown-menu" aria-labelledby="dropleftMenu">
+            <div class="dropdown-menu" aria-labelledby="dropstartMenu">
               <button class="dropdown-item" type="button">Action</button>
               <button class="dropdown-item" type="button">Another action</button>
               <button class="dropdown-item" type="button">Something else here</button>
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index e33de5f0b..c75825396 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -19,7 +19,7 @@
       </button>
 
       <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
-        Popover on right
+        Popover on end
       </button>
 
       <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
@@ -27,7 +27,7 @@
       </button>
 
       <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
-        Popover on left
+        Popover on start
       </button>
     </div>
 
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index c86927d99..7b07932eb 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -16,7 +16,7 @@
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="navbar-collapse collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav mr-auto">
+        <ul class="navbar-nav me-auto">
           <li class="nav-item">
             <a class="nav-link" href="#fat">@fat</a>
           </li>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index c26278d94..4765026f3 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -28,8 +28,8 @@
     <div class="notifications">
       <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span>
-          <strong class="mr-auto">Bootstrap</strong>
+          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
+          <strong class="me-auto">Bootstrap</strong>
           <small>11 mins ago</small>
         </div>
         <div class="toast-body">
@@ -39,10 +39,10 @@
 
       <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span>
-          <strong class="mr-auto">Bootstrap</strong>
+          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
+          <strong class="me-auto">Bootstrap</strong>
           <small class="text-muted">2 seconds ago</small>
-          <button type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 93536a044..bade26a6c 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -10,7 +10,6 @@
         border: 1px solid;
         width: 100px;
         height: 50px;
-        border: 1px solid;
         margin-left: 50px;
         transform: rotate(270deg);
         margin-top: 100px;
@@ -34,13 +33,13 @@
             Tooltip on top
           </button>
           <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
-            Tooltip on right
+            Tooltip on end
           </button>
           <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
             Tooltip on bottom
           </button>
           <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
-            Tooltip on left
+            Tooltip on start
           </button>
         </p>
       </div>