diff --git a/src/theme/carousel.ts b/src/theme/carousel.ts
index c3caff47..2e42c676 100644
--- a/src/theme/carousel.ts
+++ b/src/theme/carousel.ts
@@ -18,14 +18,14 @@ export default (options: Required<ModuleOptions>) => ({
       vertical: {
         container: 'flex-col -mt-4',
         item: 'pt-4',
-        prev: '-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90',
-        next: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90'
+        prev: 'top-4 sm:-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90',
+        next: 'bottom-4 sm:-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90'
       },
       horizontal: {
         container: 'flex-row -ms-4',
         item: 'ps-4',
-        prev: '-start-12 top-1/2 -translate-y-1/2',
-        next: '-end-12 top-1/2 -translate-y-1/2'
+        prev: 'start-4 sm:-start-12 top-1/2 -translate-y-1/2',
+        next: 'end-4 sm:-end-12 top-1/2 -translate-y-1/2'
       }
     },
     active: {
diff --git a/test/components/__snapshots__/Carousel-vue.spec.ts.snap b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
index 2978c401..56a3bfa9 100644
--- a/test/components/__snapshots__/Carousel-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
@@ -13,10 +13,10 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -105,10 +105,10 @@ exports[`Carousel > renders with next correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -130,10 +130,10 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -171,10 +171,10 @@ exports[`Carousel > renders with prev correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -196,10 +196,10 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
         <!--v-if-->
         <!--v-if-->
       </button></div>
diff --git a/test/components/__snapshots__/Carousel.spec.ts.snap b/test/components/__snapshots__/Carousel.spec.ts.snap
index 5ef2bcc2..d7e6e2b9 100644
--- a/test/components/__snapshots__/Carousel.spec.ts.snap
+++ b/test/components/__snapshots__/Carousel.spec.ts.snap
@@ -13,10 +13,10 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -105,10 +105,10 @@ exports[`Carousel > renders with next correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -130,10 +130,10 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -171,10 +171,10 @@ exports[`Carousel > renders with prev correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -196,10 +196,10 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full start-4 sm:-start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
-      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full end-4 sm:-end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>