From 09f48f2d9622e2175711d19f879ca64f02ea61b6 Mon Sep 17 00:00:00 2001
From: Alexandr Shostyr <sashashostyr@gmail.com>
Date: Thu, 10 Oct 2024 11:31:37 +0300
Subject: [PATCH] fix: fix button group rtl styles

---
 .gitignore                                |  1 +
 system/core/src/components/ButtonGroup.ts | 43 ++++++++++++++++++-----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2f4980c32..8455479f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ tsconfig.*.json
 .rollup.cache
 /cache
 /.nx
+.tool-versions
diff --git a/system/core/src/components/ButtonGroup.ts b/system/core/src/components/ButtonGroup.ts
index 26e96742b..e2efb496b 100644
--- a/system/core/src/components/ButtonGroup.ts
+++ b/system/core/src/components/ButtonGroup.ts
@@ -73,32 +73,57 @@ export const fullStyles = css`
     }
 
     &:first-child {
-      border-top-left-radius: var(--border-radius-small);
-      border-bottom-left-radius: var(--border-radius-small);
+      [dir='ltr'] & {
+        border-top-left-radius: var(--border-radius-small);
+        border-bottom-left-radius: var(--border-radius-small);
+      }
+      [dir='rtl'] & {
+        border-top-right-radius: var(--border-radius-small);
+        border-bottom-right-radius: var(--border-radius-small);
+      }
       --tk-button-box-shadow: inset 0 0 0 1px var(--tk-button-border-color);
 
       &[data-pseudo='focus'],
       &:focus-visible {
         &:after {
-          border-top-left-radius: 6px;
-          border-bottom-left-radius: 6px;
+          [dir='ltr'] & {
+            border-top-left-radius: 6px;
+            border-bottom-left-radius: 6px;
+          }
+          [dir='rtl'] & {
+            border-top-right-radius: 6px;
+            border-bottom-right-radius: 6px;
+          }
         }
       }
     }
 
     &:not(:first-child) {
-      margin-left: -1px;
+      margin-inline-start: -1px;
+      -webkit-margin-start: -1px;
     }
 
     &:last-child {
-      border-top-right-radius: var(--border-radius-small);
-      border-bottom-right-radius: var(--border-radius-small);
+      [dir='ltr'] & {
+        border-top-right-radius: var(--border-radius-small);
+        border-bottom-right-radius: var(--border-radius-small);
+      }
+      [dir='rtl'] & {
+        border-top-left-radius: var(--border-radius-small);
+        border-bottom-left-radius: var(--border-radius-small);
+      }
 
       &[data-pseudo='focus'],
       &:focus-visible {
         &:after {
-          border-top-right-radius: 6px;
-          border-bottom-right-radius: 6px;
+          [dir='ltr'] & {
+            border-top-right-radius: 6px;
+            border-bottom-right-radius: 6px;
+          }
+          [dir='rtl'] & {
+            border-top-left-radius: 6px;
+            border-bottom-left-radius: 6px;
+          }
         }
       }
     }