From 9f7d65d5f8a56874b8f8dda861049c22bbdcb4dc Mon Sep 17 00:00:00 2001
From: Malik-Jouda <1999.malik.jouda@gmail.com>
Date: Sat, 7 Dec 2024 15:45:39 +0200
Subject: [PATCH 1/2] fix(ColorPicker): handle RTL mode

---
 src/theme/color-picker.ts                     |  4 +-
 .../ColorPicker-vue.spec.ts.snap              | 52 +++++++++----------
 .../__snapshots__/ColorPicker.spec.ts.snap    | 52 +++++++++----------
 3 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/theme/color-picker.ts b/src/theme/color-picker.ts
index 00e1638220..963e816dbb 100644
--- a/src/theme/color-picker.ts
+++ b/src/theme/color-picker.ts
@@ -4,9 +4,9 @@ export default {
     picker: 'flex gap-4',
     selector: 'rounded-[calc(var(--ui-radius)*1.5)]',
     selectorBackground: 'w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]',
-    selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
+    selectorThumb: '-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
     track: 'w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]',
-    trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed'
+    trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed'
   },
   variants: {
     size: {
diff --git a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
index d457a02aab..a2f1c691c3 100644
--- a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
@@ -5,11 +5,11 @@ exports[`ColorPicker > renders with as correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </section>"
@@ -20,11 +20,11 @@ exports[`ColorPicker > renders with class correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -35,11 +35,11 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
 </div>"
@@ -50,11 +50,11 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
     </div>
   </div>
 </div>"
@@ -65,11 +65,11 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
 </div>"
@@ -80,11 +80,11 @@ exports[`ColorPicker > renders with format hwb correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF80;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF80; top: 41.666666666666664%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF80; top: 41.666666666666664%;"></div>
     </div>
   </div>
 </div>"
@@ -95,11 +95,11 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
     </div>
   </div>
 </div>"
@@ -110,11 +110,11 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -125,11 +125,11 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -140,11 +140,11 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -155,11 +155,11 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -170,11 +170,11 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -185,11 +185,11 @@ exports[`ColorPicker > renders with ui correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-8">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
diff --git a/test/components/__snapshots__/ColorPicker.spec.ts.snap b/test/components/__snapshots__/ColorPicker.spec.ts.snap
index ac012573de..b02f975ba0 100644
--- a/test/components/__snapshots__/ColorPicker.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker.spec.ts.snap
@@ -5,11 +5,11 @@ exports[`ColorPicker > renders with as correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </section>"
@@ -20,11 +20,11 @@ exports[`ColorPicker > renders with class correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -35,11 +35,11 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
 </div>"
@@ -50,11 +50,11 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
     </div>
   </div>
 </div>"
@@ -65,11 +65,11 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
 </div>"
@@ -80,11 +80,11 @@ exports[`ColorPicker > renders with format hwb correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF80;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF80; top: 41.666666666666664%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF80; top: 41.666666666666664%;"></div>
     </div>
   </div>
 </div>"
@@ -95,11 +95,11 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
     </div>
   </div>
 </div>"
@@ -110,11 +110,11 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -125,11 +125,11 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -140,11 +140,11 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -155,11 +155,11 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -170,11 +170,11 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -185,11 +185,11 @@ exports[`ColorPicker > renders with ui correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-8">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"

From c07be285c7529590e03b78cde6e54e1a7c45cf99 Mon Sep 17 00:00:00 2001
From: Malik-Jouda <1999.malik.jouda@gmail.com>
Date: Sat, 7 Dec 2024 15:54:53 +0200
Subject: [PATCH 2/2] up

---
 src/theme/color-picker.ts                     |  2 +-
 .../ColorPicker-vue.spec.ts.snap              | 26 +++++++++----------
 .../__snapshots__/ColorPicker.spec.ts.snap    | 26 +++++++++----------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/theme/color-picker.ts b/src/theme/color-picker.ts
index 963e816dbb..840b2938ca 100644
--- a/src/theme/color-picker.ts
+++ b/src/theme/color-picker.ts
@@ -4,7 +4,7 @@ export default {
     picker: 'flex gap-4',
     selector: 'rounded-[calc(var(--ui-radius)*1.5)]',
     selectorBackground: 'w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]',
-    selectorThumb: '-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
+    selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
     track: 'w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]',
     trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed'
   },
diff --git a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
index a2f1c691c3..186b3c890f 100644
--- a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`ColorPicker > renders with as correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -20,7 +20,7 @@ exports[`ColorPicker > renders with class correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -35,7 +35,7 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -50,7 +50,7 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -65,7 +65,7 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -80,7 +80,7 @@ exports[`ColorPicker > renders with format hwb correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF80;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -95,7 +95,7 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -110,7 +110,7 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
@@ -125,7 +125,7 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -140,7 +140,7 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
@@ -155,7 +155,7 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
@@ -170,7 +170,7 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
@@ -185,7 +185,7 @@ exports[`ColorPicker > renders with ui correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-8">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
diff --git a/test/components/__snapshots__/ColorPicker.spec.ts.snap b/test/components/__snapshots__/ColorPicker.spec.ts.snap
index b02f975ba0..927fbbc91c 100644
--- a/test/components/__snapshots__/ColorPicker.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`ColorPicker > renders with as correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -20,7 +20,7 @@ exports[`ColorPicker > renders with class correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -35,7 +35,7 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -50,7 +50,7 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -65,7 +65,7 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -80,7 +80,7 @@ exports[`ColorPicker > renders with format hwb correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF80;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -95,7 +95,7 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -110,7 +110,7 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
@@ -125,7 +125,7 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
@@ -140,7 +140,7 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
@@ -155,7 +155,7 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
@@ -170,7 +170,7 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
@@ -185,7 +185,7 @@ exports[`ColorPicker > renders with ui correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-8">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 rtl:translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">