\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[3020,3023,3026],{"name":3021,"color":3022},"enhancement","a2eeef",{"name":3024,"color":3025},"v3","49DCB8",{"name":3027,"color":3028},"triage","ffffff",3307,"nuxt","ui","open","Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.81082296,{"description":3038,"labels":3039,"number":3043,"owner":3030,"repository":3031,"state":3044,"title":3045,"updated_at":3046,"url":3047,"score":3048},"### Description\n\nhttps://ui.nuxt.com/components/carousel#with-thumbnails\n\nThere are a couple of issues with the current implementation:\n\n1. Swiping via gestures isn't tracked — when switching slides this way, the active thumb doesn't update.\n2. The thumbs list can have more items, so scrolling needs to be handled properly.\n\nHere's my take on fixing both:\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = [\n 'https://picsum.photos/640/640?random=1',\n 'https://picsum.photos/640/640?random=2',\n 'https://picsum.photos/640/640?random=3',\n 'https://picsum.photos/640/640?random=4',\n 'https://picsum.photos/640/640?random=5',\n 'https://picsum.photos/640/640?random=6',\n 'https://picsum.photos/640/640?random=7',\n 'https://picsum.photos/640/640?random=8',\n 'https://picsum.photos/640/640?random=9',\n 'https://picsum.photos/640/640?random=10',\n]\n\nconst carousel = useTemplateRef('carousel')\nconst thumbCarousel = useTemplateRef('thumbCarousel')\nconst activeIndex = ref(0)\n\nfunction onClickPrev() {\n activeIndex.value--\n}\nfunction onClickNext() {\n activeIndex.value++\n}\n\nfunction onSelect(index: number) {\n activeIndex.value = index\n\n thumbCarousel.value?.emblaApi?.scrollTo(index)\n}\n\nfunction onThumbClick(index: number) {\n carousel.value?.emblaApi?.scrollTo(index)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex-1 w-full\">\n \u003CUCarousel\n ref=\"carousel\"\n v-slot=\"{ item }\"\n arrows\n :items=\"items\"\n :prev=\"{ onClick: onClickPrev }\"\n :next=\"{ onClick: onClickNext }\"\n class=\"w-full max-w-xs mx-auto\"\n >\n \u003Cimg :src=\"item\" width=\"320\" height=\"320\" class=\"rounded-lg\">\n \u003C/UCarousel>\n\n \u003Cdiv class=\"pt-4 max-w-xs mx-auto\">\n \u003CUCarousel\n ref=\"thumbCarousel\"\n v-slot=\"{ item, index }\"\n :items=\"items\"\n class=\"w-full\"\n contain-scroll=\"keepSnaps\"\n drag-free\n :ui=\"{ item: 'basis-auto' }\"\n >\n \u003Cimg\n :src=\"item\"\n width=\"44\"\n height=\"44\"\n class=\"size-11 opacity-25 hover:opacity-100 transition-opacity rounded-lg\"\n :class=\"{ 'opacity-100': activeIndex === index }\"\n alt=\"\"\n @click=\"onThumbClick(index)\"\n >\n \u003C/UCarousel>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_",[3040,3041,3042],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4032,"closed","[Carousel] improve thumb example","2025-05-02T09:58:58Z","https://github.com/nuxt/ui/issues/4032",0.7383673,{"description":3050,"labels":3051,"number":3055,"owner":3030,"repository":3031,"state":3044,"title":3056,"updated_at":3057,"url":3058,"score":3059},"### Description\n\nWhen a dot is selected in the UCarousel component, we get no attribute in the element : \n\n- no data-selected\n- no aria-current for accessibility\n\nSince there is no dots/dot slot, we have no possibility to style these dots when selected or not. The only difference is the bg style being either bg-accented or bg-inverted, which is overwritten if we actually style the background.\n\nIs there any way to add these attributes ? At least for accessibility.\n\n### Additional context\n\n_No response_",[3052,3053,3054],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4403,"UCarousel selected dot has no attribute","2025-07-07T10:09:58Z","https://github.com/nuxt/ui/issues/4403",0.74359256,{"description":3061,"labels":3062,"number":3066,"owner":3030,"repository":3031,"state":3044,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### Description\n\nThis is a re-opening of #1484 but for v3. It seems in the transition from v2 to v3, giving the indicators (now \"dots\") ARIA \"tab\" roles was lost. While I did mention it in my original issue, I don't believe my original PR accounted for when multiple items would be displayed at the same time. Perhaps the changes for v3 can take that into account.\n\n### Additional context\n\n_No response_",[3063,3064,3065],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4494,"Carousel component could be made more accessible (v3).","2025-07-10T12:18:41Z","https://github.com/nuxt/ui/issues/4494",0.7538071,{"description":3072,"labels":3073,"number":3081,"owner":3030,"repository":3031,"state":3044,"title":3082,"updated_at":3083,"url":3084,"score":3085},"### Description\n\nI am using the carousel component. Trying to color the dots differently but can't find any documentation on how to achieve this. Is there any doc on the ui property? ",[3074,3077,3078],{"name":3075,"color":3076},"question","d876e3",{"name":3024,"color":3025},{"name":3079,"color":3080},"upstream","78bddb",4372,"Carousel Config Options","2025-06-18T13:56:20Z","https://github.com/nuxt/ui/issues/4372",0.7726198,{"description":3087,"labels":3088,"number":3097,"owner":3030,"repository":3031,"state":3044,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Description\n\nI am using `UCarousel` like\n\n```js\n\u003CLazyUCarousel\n v-slot=\"{ item }\"\n hydrate-on-visible\n :items=\"list\"\n :start-index=\"props.startIndex\"\n>\n```\nBut it is still slow to hydrate when `list` contains thousands of items. It seems that it will dynamically insert a bunch of elements into the DOM on render. Maybe it could only insert 3 and insert the rest after swiping?\n\n### Additional context\n\n_No response_",[3089,3090,3093,3094],{"name":3021,"color":3022},{"name":3091,"color":3092},"needs reproduction","CB47CF",{"name":3027,"color":3028},{"name":3095,"color":3096},"closed-by-bot","ededed",4085,"UCarousel slow when there are thousands of items","2025-05-14T02:09:25Z","https://github.com/nuxt/ui/issues/4085",0.7752385,{"description":3103,"labels":3104,"number":3110,"owner":3030,"repository":3031,"state":3044,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: modules, devtools, supabase, runtimeConfig, security, css, uiPro, routeRules, future, compatibilityDate, nitro, content, eslint\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.3, @nuxt/content@3.6.0, @vueuse/nuxt@13.4.0, nuxt-og-image@5.1.7, @nuxtjs/supabase@1.5.2, nuxt-security@2.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\n## Steps to Reproduce:\n1. Load the StackBlitz demo: https://stackblitz.com/edit/nuxtui-carousel-fade-bug\n2. Click the tabs on the carousel - notice the smooth fade transitions ✅\n3. Navigate to \"Page 2\" using the button\n4. Try clicking tabs on either page - fade transitions no longer work ❌\n5. The carousel now uses slide animations instead of fade\n\n### Description\n\nI noticed that when using page transitions, the `fade` property of the `\u003CUCarousel>` component stops working after navigating between pages. The carousel reverts to slide animations instead of fade transitions. Removing the page transitions restores correct functionality.\n\nI looked into it with the help of Claude and found the bug was caused by VueUse's computedAsync failing during page transitions in Nuxt. I will open a PR to fix this issue!\n\n### Additional context\n\n## Expected Behavior:\nCarousel fade transitions should continue working after page navigation with transitions.\n\n## Actual Behavior:\nCarousel fade transitions stop working and revert to slide animations after navigating between pages that have `pageTransition` configured.\n\n## Workaround:\nRemoving `pageTransition` from `definePageMeta()` restores fade functionality even after navigation.\n\n\n### Logs\n\n```shell-script\n\n```",[3105,3108,3109],{"name":3106,"color":3107},"bug","d73a4a",{"name":3024,"color":3025},{"name":3027,"color":3028},4379,"UCarousel fade transitions break after page navigation with pageTransition","2025-06-30T12:55:09Z","https://github.com/nuxt/ui/issues/4379",0.77636456,{"description":3116,"labels":3117,"number":3118,"owner":3030,"repository":3119,"state":3044,"title":3120,"updated_at":3121,"url":3122,"score":3123},"I setup the Module on newest releases and I could not bring up my font with tailwindcss.\n\nAfter seeing this discussion\nhttps://github.com/tailwindlabs/tailwindcss/discussions/13890\n\n```\n@theme {\n --font-sans: \"Nunito\", sans-serif;\n}\n```\n\nfont-sans seems the way to go and not font-display.\n\nIs that true? i am not into that. If so, we need to change the docs: https://fonts.nuxt.com/get-started/usage#v4 ",[],593,"fonts","Docs may be outdated","2025-04-11T08:37:30Z","https://github.com/nuxt/fonts/issues/593",0.780825,{"description":3125,"labels":3126,"number":3118,"owner":3030,"repository":3129,"state":3044,"title":3130,"updated_at":3131,"url":3132,"score":3123},"Carousel should be bigger",[3127],{"name":3106,"color":3128},"ff281a","nuxt.com","[Docs] Framework v2 improve carousel","2023-02-15T12:30:49Z","https://github.com/nuxt/nuxt.com/issues/593",{"description":3134,"labels":3135,"number":3118,"owner":3030,"repository":3139,"state":3044,"title":3140,"updated_at":3141,"url":3142,"score":3123},"Hello there - I've just been trying out the new version - thanks again for the work gone into this!\r\n\r\nI was trying to get a POC with https://github.com/sidebase/nuxt-auth and `mockNuxtImport` but the actual composable seems to override my mock. \r\nI can't pinpoint whether it's an issue with `nust-vitest` or `sidebase/nuxt-auth` - if with them lemme know and I'll raise it!\r\n\r\n\r\nHere's a minimum repro https://stackblitz.com/edit/nuxt-vitest-wjddxq?file=test%2Fapp.nuxt.spec.ts \r\n\r\nThanks!",[3136],{"name":3137,"color":3138},"vitest-environment","b60205","test-utils","using mockNuxtImport with sidebase/nuxt-auth ","2023-12-05T11:11:32Z","https://github.com/nuxt/test-utils/issues/593",["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdR_ZgvnvPeCW7fUEc_kLgS8nAu5KMCal3I3WdWz9mlU":-1},"/nuxt/ui/4474"]