From 2ee1c5ac2e20ab9ce2f4037a8e8c64e561b0428b Mon Sep 17 00:00:00 2001
From: J-Michalek <71264422+J-Michalek@users.noreply.github.com>
Date: Mon, 26 May 2025 17:48:30 +0200
Subject: [PATCH] feat(Carousel): allow customization of active dot color
 (#4229)

---
 src/runtime/components/Carousel.vue | 1 +
 src/theme/carousel.ts               | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index 15e64f7f..d483a6a4 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -336,6 +336,7 @@ defineExpose({
           <button
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :data-state="selectedIndex === index ? 'active' : undefined"
             @click="scrollTo(index)"
           />
         </template>
diff --git a/src/theme/carousel.ts b/src/theme/carousel.ts
index aa36e386..2a249518 100644
--- a/src/theme/carousel.ts
+++ b/src/theme/carousel.ts
@@ -30,7 +30,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     active: {
       true: {
-        dot: 'bg-inverted'
+        dot: 'data-[state=active]:bg-inverted'
       }
     }
   }