From 43d281f6d1d8b0017ed61d929c5e311fb5b03447 Mon Sep 17 00:00:00 2001
From: Alireza Alibeiki <alibeikialireza@gmail.com>
Date: Thu, 22 May 2025 16:06:44 +0330
Subject: [PATCH] fix(CheckboxGroup/RadioGroup): variant `table` borders in RTL
 mode (#4192)

---
 src/theme/checkbox-group.ts                                 | 2 +-
 src/theme/radio-group.ts                                    | 2 +-
 .../components/__snapshots__/CheckboxGroup-vue.spec.ts.snap | 6 +++---
 test/components/__snapshots__/CheckboxGroup.spec.ts.snap    | 6 +++---
 test/components/__snapshots__/RadioGroup-vue.spec.ts.snap   | 6 +++---
 test/components/__snapshots__/RadioGroup.spec.ts.snap       | 6 +++---
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/theme/checkbox-group.ts b/src/theme/checkbox-group.ts
index 25611cb8..d6dd5584 100644
--- a/src/theme/checkbox-group.ts
+++ b/src/theme/checkbox-group.ts
@@ -65,7 +65,7 @@ export default (options: Required<ModuleOptions>) => ({
       orientation: 'horizontal',
       variant: 'table',
       class: {
-        item: 'first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
+        item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
         fieldset: 'gap-0 -space-x-px'
       }
     },
diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts
index 3f90b284..bf0cac27 100644
--- a/src/theme/radio-group.ts
+++ b/src/theme/radio-group.ts
@@ -121,7 +121,7 @@ export default (options: Required<ModuleOptions>) => ({
       orientation: 'horizontal',
       variant: 'table',
       class: {
-        item: 'first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
+        item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
         fieldset: 'gap-0 -space-x-px'
       }
     },
diff --git a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
index 1e7b1f8a..ab40c686 100644
--- a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
@@ -360,7 +360,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 "<div tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!---->
         </button></div>
@@ -368,7 +368,7 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0:1" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
@@ -377,7 +377,7 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0:2" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
diff --git a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
index 7c31874a..df25ffa0 100644
--- a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
@@ -360,7 +360,7 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 "<div tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
           <!---->
         </button></div>
@@ -368,7 +368,7 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
@@ -377,7 +377,7 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
diff --git a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
index 34456360..910d97a1 100644
--- a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
@@ -360,7 +360,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
 exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 "<div role="radiogroup" aria-orientation="horizontal" aria-required="false" dir="ltr" tabindex="0" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="horizontal" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
@@ -368,7 +368,7 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0:1" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
@@ -377,7 +377,7 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0:2" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index ac8d652a..f57c67e1 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -360,7 +360,7 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
 exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 "<div role="radiogroup" aria-orientation="horizontal" aria-required="false" dir="ltr" tabindex="0" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    <!--v-if--><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="horizontal" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
@@ -368,7 +368,7 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
@@ -377,7 +377,7 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
         <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+    </label><label class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="horizontal" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->