\n```\n\n2. navigate to /lucky-draw/leaderboard\n3. the leaderboard breadcrumb item should be now in active state, but it's not working\n\n### Description\n\nThe leaderboard should be in active state but it's not, the last item always in active state\n\n\u003Cimg width=\"1142\" height=\"1314\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6eb64e3c-e25d-403a-9124-bc118a463f40\" />\n\n\u003Cimg width=\"1382\" height=\"538\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a5447b9b-f38c-4cb4-8957-5d8a69937690\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3134,3137,3140],{"name":3135,"color":3136},"bug","d73a4a",{"name":3138,"color":3139},"v3","49DCB8",{"name":3141,"color":3142},"triage","ffffff",4771,"nuxt","ui","open","[Bug] breadcrumb's active state not working","2025-08-17T04:15:26Z","https://github.com/nuxt/ui/issues/4771",0.6986178,{"description":3152,"labels":3153,"number":3159,"owner":3144,"repository":3145,"state":3160,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### 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_",[3154,3157,3158],{"name":3155,"color":3156},"enhancement","a2eeef",{"name":3138,"color":3139},{"name":3141,"color":3142},4403,"closed","UCarousel selected dot has no attribute","2025-07-07T10:09:58Z","https://github.com/nuxt/ui/issues/4403",0.690854,{"description":3166,"labels":3167,"number":3175,"owner":3144,"repository":3145,"state":3160,"title":3176,"updated_at":3177,"url":3178,"score":3179},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.4\r\n- Builder: -\r\n- User Config: devtools, app, nitro, runtimeConfig, modules, svgoOptions, security, routeRules, vercel, colorMode, ui, i18n, maxDuration \r\n- Runtime Modules: nuxt-security@1.3.2, nuxt-svgo@4.0.2, @nuxt/ui@2.18.3, nuxt-zod-i18n@1.9.0, @nuxtjs/i18n@8.3.3, @nuxt/icon@1.4.4\r\n- Build Modules: -\n\n### Version\n\n2.18.3\n\n### Reproduction\n\n- no need\n\n### Description\n\nthe color attribute is not connected by any mean to the off state icon. even if you change the off state in `nuxt.config.ts` `ui` config to: \r\n```js \r\n ui:{\r\n toggle:{\r\n icon:{\r\n off:'text-{color}-400 dark:text-{color}-500'\r\n },\r\n default:{\r\n color: '{color ? color: primary}'\r\n }\r\n }\r\n },\r\n ```\r\nit will still be applying this to the \"on\" icon and not the off one, which is useless\r\n\r\ncurrent solution is to add your class in the off icon as such:\r\n\r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded text-yellow-500\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n\r\nSuggestions: \r\n* connect to color attribute to both icons so it can be done like this: \r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded\"\r\n :class=\"enabled ? 'bg-black fill-gray-50' : 'bg-orange-50'\"\r\n :color=\"enabled ? 'red' : 'yellow'\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n* or just add another one\r\n\r\n\r\nOn a side note: \r\nthere should be a place to edit the circle as well at least the color, preferably the ability to just add classes\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3168,3169,3170,3173],{"name":3135,"color":3136},{"name":3141,"color":3142},{"name":3171,"color":3172},"closed-by-bot","ededed",{"name":3174,"color":3172},"stale",2013,"UToggle Color attribute not connected to off Icon","2025-06-19T02:12:11Z","https://github.com/nuxt/ui/issues/2013",0.6958389,{"description":3181,"labels":3182,"number":3185,"owner":3144,"repository":3145,"state":3160,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.17.1\n- Nuxt Version: 4.0.2\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@11.5.2\n- Builder: -\n- User Config: compatibilityDate, site, modules, supabase, devtools, css, content, nitro, icon, devServer, runtimeConfig, llms, routeRules\n- Runtime Modules: @nuxt/image@1.11.0, @nuxt/ui-pro@3.3.0, @nuxt/content@3.6.3, nuxt-og-image@5.1.9, nuxt-llms@0.1.3, @nuxtjs/supabase@1.6.0, @pinia/nuxt@0.11.2, pinia-plugin-persistedstate/nuxt@4.4.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv4.0.2\n\n### Reproduction\n\n/\n\n### Description\n\npassing \n\n```ts\n\u003CLazyUContentSearch\n :ui=\"{ modal: 'test-class' }\"\n>\n```\n\nis not working\n\nbut the following does work\n\n```ts\nexport default defineAppConfig({\n uiPro: {\n contentSearch: {\n slots: {\n modal: 'test-class',\n },\n },\n },\n})\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3183,3184],{"name":3135,"color":3136},{"name":3138,"color":3139},4673,"ui prop not working for UContentSearch","2025-08-07T09:35:15Z","https://github.com/nuxt/ui/issues/4673",0.70010656,{"description":3191,"labels":3192,"number":3198,"owner":3144,"repository":3145,"state":3160,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/angry-moon-grlpp3\n\n### Description\n\nThe borders of UCard will be hidden in the UCollapsible\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3193,3194,3195,3196,3197],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3171,"color":3172},{"name":3174,"color":3172},4383,"Borders of UCard in UCollapsible are hidden","2025-08-31T02:09:21Z","https://github.com/nuxt/ui/issues/4383",0.70144665,{"description":3204,"labels":3205,"number":3212,"owner":3144,"repository":3144,"state":3160,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.11.0\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: npm@10.2.4\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-xwmppm?file=pages%2Findex.vue\n\n### Describe the bug\n\n`\u003Cbutton :class=\"{ 'active': activeTab === 0 }\">Button 0\u003C/button>` - class active is working as expected with `npm run dev`, but `npm run generate` and `npm run preview` with `localhost:3000?active=0` its not working \n\n### Additional context\n\nCode like this:\r\n```\r\nconst route = useRoute()\r\nactiveTab.value = route.query?.active\r\n```\r\nClass change its not working with prerender static website \n\n### Logs\n\n_No response_",[3206,3209],{"name":3207,"color":3208},"3.x","29bc7f",{"name":3210,"color":3211},"pending triage","E99695",26331,"Inconsistency in Nuxt's behavior with and without server: useRoute","2024-03-18T13:48:24Z","https://github.com/nuxt/nuxt/issues/26331",0.7026815,{"description":3218,"labels":3219,"number":3222,"owner":3144,"repository":3145,"state":3160,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3220,3221],{"name":3135,"color":3136},{"name":3138,"color":3139},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.704091,{"description":3228,"labels":3229,"number":3233,"owner":3144,"repository":3145,"state":3160,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/eslint@1.3.0, @nuxtjs/device@3.2.4, @nuxtjs/i18n@9.5.3, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, nuxt-lodash@2.5.3\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/vigorous-cerf-pnrc3g\n\n// app.config.ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'emerald',\n neutral: 'zinc',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n green: 'green',\n blue: 'blue',\n purple: 'purple',\n gray: 'gray',\n },\n }\n}\n\n// nuxt.config.ts\n\nui: {\n theme: {\n colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],\n },\n },\n\n### Description\n\nYesterday everything was working fine, no code was changed, after the upgrade it broke.\nFor example:\n```html\n\u003Cdiv class=\"bg-(--ui-orange)\">\n```\nOr\n```html\n\u003Cdiv class=\"bg-orange\">\n```\nBoth not work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3230,3231,3232],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.70567554,{"description":3239,"labels":3240,"number":3249,"owner":3144,"repository":3144,"state":3160,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nYou can use my old preproduction from #23051 https://stackblitz.com/edit/github-ydxe3t?file=pages%2Findex.vue\r\n\r\nSee that the scoped style (margin) applies to the component. However, if you update Nuxt to 3.7.3, the style no longer applies, since the data-v attribute was removed. \n\n### Describe the bug\n\nThe issue #23051 was fixed in #23095.\r\n\r\nHowever, this prevented scoped style from being applied to the component. \r\n\n\n### Additional context\n\nSorry for the delayed feedback. As I noted in https://github.com/nuxt/nuxt/pull/23095#issuecomment-1712583276 the removal of data-v attribute entirely lead to styles not being reproduced. I already debugged the issue and I'm going to create a PR with a simple suggested fix.\r\n\r\nThis PR will revert the expected behavior of scoped styles as in 3.7.1 while keeping @huang-julien 's fix for 404 on soft navigation due to different component hash.\n\n### Logs\n\n_No response_",[3241,3242,3243,3246],{"name":3207,"color":3208},{"name":3135,"color":3136},{"name":3244,"color":3245},"🔨 p3-minor","FBCA04",{"name":3247,"color":3248},"server components","839413",23385,"Fix for #23051 broke scoped styles in server components","2023-09-28T07:36:15Z","https://github.com/nuxt/nuxt/issues/23385",0.7066276,{"description":3255,"labels":3256,"number":3259,"owner":3144,"repository":3144,"state":3160,"title":3260,"updated_at":3261,"url":3262,"score":3263},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-19up3f?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nThis issue only occurs in the development mode using `nuxt@3.9.2`.\r\n\r\nUnscoped styles are not working on the server side - there are no `style` or `link rel=\"stylesheet\"` elements in the `head`.\r\n`css` option from the `nuxt.config` doesn't work too. Styles are loaded only on the client side so everything flickers.\r\n\r\nScoped styles are working fine.\r\nIf we build the application everything works fine.\r\n\r\n### Additional context\r\n\r\nMaybe [this](https://github.com/nuxt/nuxt/commit/20e88bb171b34a749f5468238815b022163e262e#diff-db3a4ecfe5a4e5a379ed2f515a315f812ddc26b48ce80dd3f2cada3b75c06c12R369) could be a reason for the issue but I'm not 100% sure.\r\n\r\n### Logs\r\n\r\n_No response_",[3257,3258],{"name":3207,"color":3208},{"name":3210,"color":3211},25258,"(3.9.2) Unscoped styles are not working on the server side - only in development","2024-01-17T14:01:48Z","https://github.com/nuxt/nuxt/issues/25258",0.70703846,["Reactive",3265],{},["Set"],["ShallowReactive",3268],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_FjdDasLUCBDD9bCDa83W55pRjAelfhNq4snwAXAkes":-1},"/nuxt/ui/4312"]