feat: make ButtonGroup support RTL

Author: lazd

components/buttongroup/index.css

@@ -24,20 +24,20 @@ governing permissions and limitations under the License.
   }
 
   > .spectrum-Rule--vertical {
-    height: auto;
+    block-size: auto;
     align-self: stretch;
   }
 
   .spectrum-Button + .spectrum-Button {
-    margin-left: var(--spectrum-buttongroup-button-gap-x);
+    margin-inline-start: var(--spectrum-buttongroup-button-gap-x);
   }
 
   .spectrum-ActionButton + .spectrum-ActionButton {
-    margin-left: var(--spectrum-actionbuttongroup-text-button-gap-x);
+    margin-inline-start: var(--spectrum-actionbuttongroup-text-button-gap-x);
   }
 
   .spectrum-Tool + .spectrum-Tool {
-    margin-left: var(--spectrum-toolgroup-text-button-gap-x);
+    margin-inline-start: var(--spectrum-toolgroup-text-button-gap-x);
   }
 }
 
@@ -47,21 +47,21 @@ governing permissions and limitations under the License.
 
   .spectrum-ActionButton-label {
     flex-grow: 1;
-    text-align: left;
+    text-align: start;
   }
 
   .spectrum-Button + .spectrum-Button {
-    margin-top: var(--spectrum-buttongroup-button-gap-y);
-    margin-left: var(--spectrum-buttongroup-button-gap-reset);
+    margin-block-start: var(--spectrum-buttongroup-button-gap-y);
+    margin-inline-start: var(--spectrum-buttongroup-button-gap-reset);
   }
 
   .spectrum-ActionButton + .spectrum-ActionButton {
-    margin-top: var(--spectrum-actionbuttongroup-text-button-gap-y);
-    margin-left: var(--spectrum-buttongroup-button-gap-reset);
+    margin-block-start: var(--spectrum-actionbuttongroup-text-button-gap-y);
+    margin-inline-start: var(--spectrum-buttongroup-button-gap-reset);
   }
 
   .spectrum-Tool + .spectrum-Tool {
-    margin-top: var(--spectrum-toolgroup-text-button-gap-y);
-    margin-left: var(--spectrum-buttongroup-button-gap-reset);
+    margin-block-start: var(--spectrum-toolgroup-text-button-gap-y);
+    margin-inline-start: var(--spectrum-buttongroup-button-gap-reset);
   }
 }