From d668591d6eea5d6aa211e9192537ee5ce4887754 Mon Sep 17 00:00:00 2001
From: Mateusz Kalinowski <mateuszkalin1@gmail.com>
Date: Wed, 7 May 2025 16:30:03 +0200
Subject: [PATCH] fix(ColorPicker): make thumbs touch draggable

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

diff --git a/src/theme/color-picker.ts b/src/theme/color-picker.ts
index 33c4e7e69a..2943fdc16d 100644
--- a/src/theme/color-picker.ts
+++ b/src/theme/color-picker.ts
@@ -2,10 +2,10 @@ export default {
   slots: {
     root: 'data-[disabled]:opacity-75',
     picker: 'flex gap-4',
-    selector: 'rounded-md',
+    selector: 'rounded-md touch-none',
     selectorBackground: 'w-full h-full relative rounded-md',
     selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
-    track: 'w-[8px] relative rounded-md',
+    track: 'w-[8px] relative rounded-md touch-none',
     trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
   },
   variants: {
diff --git a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
index 23223b78f1..715bde87d9 100644
--- a/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
@@ -3,12 +3,12 @@
 exports[`ColorPicker > renders with as correctly 1`] = `
 "<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
 exports[`ColorPicker > renders with class correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75 w-96">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
 exports[`ColorPicker > renders with disabled correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75" data-disabled="true">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
 exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
     </div>
   </div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 exports[`ColorPicker > renders with format hex correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
 exports[`ColorPicker > renders with format hsl correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
 exports[`ColorPicker > renders with format lab correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
     </div>
   </div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
 exports[`ColorPicker > renders with format rgb correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
 exports[`ColorPicker > renders with size lg correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-44" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
 exports[`ColorPicker > renders with size md correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
 exports[`ColorPicker > renders with size sm correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-40" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
 exports[`ColorPicker > renders with size xl correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-46" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
 exports[`ColorPicker > renders with size xs correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-38" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
 exports[`ColorPicker > renders with ui correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
   <div data-v-c9a043d6="" class="flex gap-8">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/ColorPicker.spec.ts.snap b/test/components/__snapshots__/ColorPicker.spec.ts.snap
index 8a24a0b13c..0ca8242e24 100644
--- a/test/components/__snapshots__/ColorPicker.spec.ts.snap
+++ b/test/components/__snapshots__/ColorPicker.spec.ts.snap
@@ -3,12 +3,12 @@
 exports[`ColorPicker > renders with as correctly 1`] = `
 "<section data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
 exports[`ColorPicker > renders with class correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75 w-96">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
 exports[`ColorPicker > renders with disabled correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75" data-disabled="true">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
 exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
     </div>
   </div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 exports[`ColorPicker > renders with format hex correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
 exports[`ColorPicker > renders with format hsl correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
 exports[`ColorPicker > renders with format lab correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
     </div>
   </div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
 exports[`ColorPicker > renders with format rgb correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
 exports[`ColorPicker > renders with size lg correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-44" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
 exports[`ColorPicker > renders with size md correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
 exports[`ColorPicker > renders with size sm correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-40" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
 exports[`ColorPicker > renders with size xl correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-46" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
 exports[`ColorPicker > renders with size xs correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-38" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
 exports[`ColorPicker > renders with ui correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
   <div data-v-d6f23756="" class="flex gap-8">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
         <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--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-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
       <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-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>