From 887f2ded02e396387aed2340b492a1314d6234a1 Mon Sep 17 00:00:00 2001
From: Haithm EL-Watany <h.elwatany@gmail.com>
Date: Mon, 30 Dec 2024 21:24:37 +0200
Subject: [PATCH 1/2] fix(slider): fix slider validation layout shift
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 🐛 `_slider.mdx`: Set fixed width for the slider container.
- 🐛 `_slider.mdx`: Set a minimum height and always display the error container.

Closes: #3
---
 .../docs/guides/fields/_partials/_slider.mdx       | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/content/docs/guides/fields/_partials/_slider.mdx b/src/content/docs/guides/fields/_partials/_slider.mdx
index 2f132d7..3f53e92 100644
--- a/src/content/docs/guides/fields/_partials/_slider.mdx
+++ b/src/content/docs/guides/fields/_partials/_slider.mdx
@@ -25,8 +25,8 @@ const thumbData = useThumbMetadata(0);
       <Thumb />
     </div>
 
-    <div v-if="errorMessage" v-bind="errorMessageProps" class="error">
-      {{ errorMessage }}
+    <div v-bind="errorMessageProps" class="error">
+      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
     </div>
   </div>
 </template>
@@ -36,6 +36,7 @@ const thumbData = useThumbMetadata(0);
   --color-text: #333;
   --color-error: #f00;
   display: flex;
+  width: 300px;
   align-items: center;
   gap: 6px 14px;
   flex-wrap: wrap;
@@ -65,18 +66,13 @@ const thumbData = useThumbMetadata(0);
   }
 
   .error {
-    display: none;
+    display: block;
+    min-height: 18px;
     font-size: 13px;
     color: #f00;
     width: 100%;
   }
 
-  &:has([aria-invalid='true']) {
-    .error {
-      display: block;
-    }
-  }
-
   &:has([aria-orientation='vertical']) {
     .track {
       flex-direction: column;

From fd81a7da927e2169453e737234223f74600ed603 Mon Sep 17 00:00:00 2001
From: Haithm EL-Watany <h.elwatany@gmail.com>
Date: Tue, 31 Dec 2024 17:08:40 +0200
Subject: [PATCH 2/2] chore(slider): remove the inner error message div
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 🐛 `_slider.mdx`: Remove the inner error message container
---
 src/content/docs/guides/fields/_partials/_slider.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/guides/fields/_partials/_slider.mdx b/src/content/docs/guides/fields/_partials/_slider.mdx
index 3f53e92..3e3f2c6 100644
--- a/src/content/docs/guides/fields/_partials/_slider.mdx
+++ b/src/content/docs/guides/fields/_partials/_slider.mdx
@@ -26,7 +26,7 @@ const thumbData = useThumbMetadata(0);
     </div>
 
     <div v-bind="errorMessageProps" class="error">
-      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
+      {{ errorMessage }}
     </div>
   </div>
 </template>