feat(RTL): implement RTL

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

1 files changed, 17 insertions, 17 deletions

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 9dad43543e..930940a157 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>