feat(Carousel): allow customization of active dot color (#4229)

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>

src/theme/carousel.ts

@@ -30,7 +30,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     active: {
       true: {
-        dot: 'bg-inverted'
+        dot: 'data-[state=active]:bg-inverted'
       }
     }
   }