feat: make Sidenav support RTL

Author: lazd

components/sidenav/index.css

@@ -25,7 +25,8 @@ governing permissions and limitations under the License.
 .spectrum-SideNav-item {
   list-style-type: none;
 
-  margin: var(--spectrum-sidenav-item-gap) 0;
+  margin-block: var(--spectrum-sidenav-item-gap);
+  margin-inline: 0;
 }
 
 .spectrum-SideNav-itemLink {
@@ -35,10 +36,11 @@ governing permissions and limitations under the License.
   justify-content: left;
   box-sizing: border-box;
 
-  width: 100%;
-  min-height: var(--spectrum-sidenav-item-height);
+  inline-size: 100%;
+  min-block-size: var(--spectrum-sidenav-item-height);
 
-  padding: var(--spectrum-sidenav-item-padding-y) var(--spectrum-sidenav-item-padding-x);
+  padding-inline: var(--spectrum-sidenav-item-padding-x);
+  padding-block: var(--spectrum-sidenav-item-padding-y);
 
   border-radius: var(--spectrum-sidenav-item-border-radius);
 
@@ -62,27 +64,31 @@ governing permissions and limitations under the License.
   &:focus-ring::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
 
-    border: var(--spectrum-tabs-focus-ring-size) solid transparent;
+    border-block: var(--spectrum-tabs-focus-ring-size) solid transparent;
     border-radius: var(--spectrum-sidenav-item-border-radius);
   }
 
   .spectrum-SideNav-itemIcon {
-    margin-right: var(--spectrum-sidenav-icon-gap);
+    margin-inline-end: var(--spectrum-sidenav-icon-gap);
   }
 }
 
 
 .spectrum-SideNav-heading {
-  height: var(--spectrum-sidenav-header-height);
+  block-size: var(--spectrum-sidenav-header-height);
   line-height: var(--spectrum-sidenav-header-height);
 
-  margin: var(--spectrum-sidenav-header-gap-top) 0 var(--spectrum-sidenav-header-gap-bottom) 0;
-  padding: 0 var(--spectrum-sidenav-header-padding-x);
+  margin-block-start: var(--spectrum-sidenav-header-gap-top);
+  margin-inline-end: 0;
+  margin-block-end: var(--spectrum-sidenav-header-gap-bottom);
+  margin-inline-start: 0;
+  padding-block: 0;
+  padding-inline: var(--spectrum-sidenav-header-padding-x);
 
   border-radius: var(--spectrum-sidenav-header-border-radius);
 
@@ -106,12 +112,12 @@ governing permissions and limitations under the License.
     .spectrum-SideNav-itemLink {
       font-weight: var(--spectrum-sidenav-item-font-weight);
 
-      padding-left: calc(var(--spectrum-sidenav-multilevel-item-indentation-level1) + var(--spectrum-sidenav-item-padding-x));
+      padding-inline-start: calc(var(--spectrum-sidenav-multilevel-item-indentation-level1) + var(--spectrum-sidenav-item-padding-x));
     }
 
     .spectrum-SideNav {
       .spectrum-SideNav-itemLink {
-        padding-left: calc(var(--spectrum-sidenav-multilevel-item-indentation-level2) + var(--spectrum-sidenav-item-padding-x));
+        padding-inline-start: calc(var(--spectrum-sidenav-multilevel-item-indentation-level2) + var(--spectrum-sidenav-item-padding-x));
       }
     }
   }