\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3149,3152,3155],{"name":3150,"color":3151},"bug","d73a4a",{"name":3153,"color":3154},"v3","49DCB8",{"name":3156,"color":3157},"triage","ffffff",4530,"ui","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.7058969,{"description":3165,"labels":3166,"number":3170,"owner":3139,"repository":3159,"state":3141,"title":3171,"updated_at":3172,"url":3173,"score":3174},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.17.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.26.4\n- Nitro Version: 2.12.3\n- Package Manager: bun@1.2.18\n- Builder: N/A\n- User Config: nitro, compatibilityDate, devtools, modules, css, vite, icon, runtimeConfig, app, colorMode, eslint\n- Runtime Modules: @nuxt/ui@3.3.0, @nuxt/fonts@0.11.0, @nuxt/eslint@1.2.0, @nuxt/image@1.9.0, @nuxt/content@3.6.3, @vueuse/nuxt@13.0.0, @nuxt/test-utils@3.17.2, nuxt-auth-utils@0.5.16, nuxt-nodemailer@1.1.2, @hebilicious/vue-query-nuxt@0.3.0, nuxt-authorization@0.3.5\n- Build Modules: N/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt (UI)\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/angry-shaw-qkq4tt\n\n### Description\n\n`UInputNumber` snaps to \"0.0\" on blur when using \"percent\" in `format-options` (inconsistent with e.g. \"currency\").\n\n### Additional context\n\nI can't seem to get a `\"percent\"`-formatted `UInputNumber` to clear after the user backspaces the value out without a workaround--the value snaps to 0. I'm a bit confused, as e.g. `\"currency\"`-formatted `UInputNumber`s clear just fine. If this is intentional or a misconfiguration on my part, please disregard--I will say I hope it's a bug (for my own sanity)! \n\nThe same issue previewed in the repro sandbox is present in the [docs](https://ui.nuxt.com/components/input-number#with-percentage-format).\n\n### Logs\n\n```shell-script\n\n```",[3167,3168,3169],{"name":3150,"color":3151},{"name":3153,"color":3154},{"name":3156,"color":3157},4646,"UInputNumber snaps to \"0.0\" on blur when using \"percent\" in format-options (inconsistent with other styles, e.g. \"currency\")","2025-08-01T22:41:10Z","https://github.com/nuxt/ui/issues/4646",0.7087012,{"description":3176,"labels":3177,"number":3181,"owner":3139,"repository":3159,"state":3182,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### 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```",[3178,3179,3180],{"name":3150,"color":3151},{"name":3153,"color":3154},{"name":3156,"color":3157},3977,"closed","Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.69384784,{"description":3188,"labels":3189,"number":3197,"owner":3139,"repository":3159,"state":3182,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.18.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@4.1.1\n- Builder: -\n- User Config: devtools, app, modules, ui, colorMode, i18n, content, vite, nitro, runtimeConfig, compatibilityDate\n- Runtime Modules: @pinia/nuxt@0.9.0, @nuxtjs/i18n@9.2.1, @nuxt/ui@2.21.0, @nuxt/content@3.2.0, @nuxt/scripts@0.10.4, @nuxt/eslint@1.1.0\n- Build Modules: -\n------------------------------\n\n### Version\n\nv2.20\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-akynjpkx?file=app.vue\n\n### Description\n\nMissing Color (`neutral`, `gray`, `slate`) type (`ProgressColor`) for `\u003CUProgress />` component.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Invalid prop: custom validator check failed for prop \"color\". \n at \u003CProgress key=1 color=\"neutral\" size=\"xl\" ... > \n```",[3190,3191,3192,3195],{"name":3150,"color":3151},{"name":3156,"color":3157},{"name":3193,"color":3194},"closed-by-bot","ededed",{"name":3196,"color":3194},"stale",3407,"UProgress missing color type","2025-06-18T09:01:52Z","https://github.com/nuxt/ui/issues/3407",0.6953621,{"description":3203,"labels":3204,"number":3205,"owner":3139,"repository":3140,"state":3182,"title":3206,"updated_at":3207,"url":3208,"score":3209},"`\u003CIcon name=\"uil:github\" color=\"red\" />`\r\nreturns\r\n\r\n**App.config.ts**\r\n```\r\n// https://github.com/nuxt-modules/icon#configuration-%EF%B8%8F\r\nexport default defineAppConfig({\r\n icon: {\r\n size: \"300%\", // default \u003CIcon> size applied\r\n class: \"icon\", // default \u003CIcon> class applied\r\n mode: \"css\", // svg || css\r\n aliases: {\r\n nuxt: \"logos:nuxt-icon\",\r\n },\r\n },\r\n})\r\n```\r\n",[],176,"Add universal support for color attribute (similar to CSS icons)","2024-07-15T16:06:31Z","https://github.com/nuxt/icon/issues/176",0.699296,{"description":3211,"labels":3212,"number":3222,"owner":3139,"repository":3139,"state":3182,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.2.0`\r\n- Nitro Version: `2.2.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `app`, `typescript`, `runtimeConfig`, `modules`, `colorMode`, `tailwindcss`\r\n- Runtime Modules: `@nuxtjs/color-mode@3.2.0`, `nuxt-icon@0.1.8`, `@nuxtjs/tailwindcss@6.1.3`, `@pinia/nuxt@0.4.6`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. `yarn upgrade nuxt --latest`\r\n2. `yarn dev`\r\n```\r\n ERROR Cannot start nuxt: Cannot find module 'postcss-custom-properties'\r\n```\r\n3. Open `nuxt.config.ts` will see this on the `colorMode` property.\r\n```\r\nArgument of type '{ app: { head: { link: { rel: \"icon\"; type: \"image/svg+xml\"; href: string; }[]; }; }; typescript: { shim: false; strict: true; }; runtimeConfig: { apiSecret: string; public: { apiBase: string; }; }; modules: (string | [...])[]; colorMode: { ...; }; tailwindcss: { ...; }; }' is not assignable to parameter of type 'NuxtConfig'.\r\n Object literal may only specify known properties, and 'colorMode' does not exist in type 'NuxtConfig'.\r\n```\n\n### Describe the bug\n\nAfter upgrading nuxt `3.0.0` to `3.2.0`, will see the problems.\r\n\r\n1. `colorMode` module option in nuxt `3.0.0` shows the type as\r\n```\r\n(property) NuxtConfig['colorMode']?: Partial\u003CModuleOptions> | undefined\r\n```\r\nbut shows error in nuxt `3.2.0`.\r\n\r\n2. We need to install `postcss-custom-properties` in nuxt `3.2.0`, didn't need it in nuxt `3.0.0`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3213,3216,3219],{"name":3214,"color":3215},"3.x","29bc7f",{"name":3217,"color":3218},"upstream","E8A36D",{"name":3220,"color":3221},"needs reproduction","FBCA04",18933,"After upgrading Nuxt 3.0.0 to 3.2.0 problem","2024-01-09T06:07:13Z","https://github.com/nuxt/nuxt/issues/18933",0.70508534,{"description":3228,"labels":3229,"number":3234,"owner":3139,"repository":3159,"state":3182,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.21.1`\n- Nitro Version: `2.10.4`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `devtools`, `extends`, `runtimeConfig`, `css`, `build`, `modules`, `piniaPluginPersistedstate`, `googleFonts`, `colorMode`, `site`, `robots`, `gtag`, `routeRules`, `icon`, `compatibilityDate`\n- Runtime Modules: `@nuxtjs/google-fonts@3.2.0`, `@nuxt/eslint@1.0.1`, `@vueuse/nuxt@12.7.0`, `@pinia/nuxt@0.10.1`, `pinia-plugin-persistedstate/nuxt@4.2.0`, `@nuxt/image@1.9.0`, `@nuxt/ui@2.21.0`, `nuxt-gtag@3.0.2`, `@nuxtjs/robots@5.2.2`, `@nuxtjs/sitemap@7.2.5`, `@nuxt/content@3.1.1`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.4\n\n### Reproduction\n\nI don't know how to reproduce this since it works in my local environment, however, this is the website: https://www.storysprout.me/\n\nI did try adding:\n```ts\n icon: {\n clientBundle: {\n scan: true,\n }\n },\n```\nto the `nuxt.config.ts` file, but that didn't help.\n\nI also installed the packages for the icons:\n\n```json\n \"dependencies\": {\n \"@iconify-json/fluent-emoji-high-contrast\": \"^1.2.3\",\n \"@iconify-json/heroicons\": \"^1.2.2\",\n }\n```\n\n### Description\n\nHi, \n\nSince I deployed to Vercel yesterday, I have encountered issues with the icons on my website.\n\nSome of them load correctly, while others do not work at all. I get a few console and network errors when loading the icons.\n\nFor example, I am using the component `UColorModeButton` and then I see this error:\n```\n[Icon] failed to load icon `heroicons:moon-20-solid`\n```\n\nIt happens similarly with other icons I have added for example when using the `items` prop to some of the other components like `UDropDown`.\n\nThe Network Error is a 404 on:\n`https://www.storysprout.me/api/_nuxt_icon/heroicons.json?icons=moon-20-solid`\n\nThank you!\n\n### Additional context\n\nI can provide any additional context if necessary.\n\n### Logs\n\n```shell-script\n\n```",[3230,3231,3232],{"name":3150,"color":3151},{"name":3153,"color":3154},{"name":3217,"color":3233},"78bddb",3347,"failed to load icon `heroicons:moon-20-solid` on Vercel deployment","2025-08-07T11:29:01Z","https://github.com/nuxt/ui/issues/3347",0.70512927,{"description":3240,"labels":3241,"number":3245,"owner":3139,"repository":3159,"state":3182,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Environment\n\n```\n Operating System: Linux\n Node Version: v18.19.1\n Nuxt Version: 3.16.0\n CLI Version: 3.23.0\n Nitro Version: 2.11.6\n Package Manager: npm@10.2.4\n Builder: -\n User Config: compatibilityDate, devtools, colorMode, modules, css, i18n, runtimeConfig\n Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/ui@3.1.3, @nuxt/test-utils@3.17.2, @nuxt/icon@1.13.0, @nuxtjs/i18n@9.3.1 @pinia/nuxt@0.10.1, @nuxt/image@1.10.0\n Build Modules: -\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.16.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/goofy-yalow-xftq2n\n\n### Description\n\nI've set value of `--ui-text-dimmed` to red. If I use `text-dimmed` on paragraph its text color is red. However input's placeholder color is not affected (even though it has placeholder:text-dimmed class by default)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3242,3243,3244],{"name":3150,"color":3151},{"name":3153,"color":3154},{"name":3156,"color":3157},4301,"Input's placeholder doesn't respect value of `--ui-text-dimmed`","2025-08-07T13:34:03Z","https://github.com/nuxt/ui/issues/4301",0.70561093,{"description":3251,"labels":3252,"number":3257,"owner":3139,"repository":3159,"state":3182,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\n- Operating System: \"linux/ubuntu 24.04\"\n- Node Version: \"22.15.1\"\n- Nuxt Version: \"3.17.6\"\n- Package Manager: \"10.9.2\"\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.6\n\n### Reproduction\n\nhttps://github.com/pbartyla/nuxt_color_mode_bug\n\n### Description\n\nWhen using [useColorMode](https://ui.nuxt.com/getting-started/color-mode/nuxt), if a user manually selects a theme mode (light or dark) that differs from their system preference, and then refreshes the page, the stored mode is correctly applied, and isDark returns the expected value immediately.\n\nHowever, UI elements that rely on isDark for conditional rendering (e.g., toggling an icon) do not update on initial load. The component renders with an incorrect icon, despite isDark being correct.\n\n1. Visit a Nuxt UI page using useColorMode and a toggle button like:\n\n`\u003CUButton :icon=\"isDark ? 'i-lucide-moon' : 'i-lucide-sun'\" color=\"neutral\" variant=\"ghost\"`\n\n2. Manually toggle to \"dark\" mode (while system is set to \"light\").\n\n3. Refresh the page.\n\n4. isDark is true, the theme is applied as dark — but the icon still shows as \"moon\" (suggesting light mode).\n\nExpected behavior:\n\nSince isDark is correct immediately, the icon should render correctly ('sun' in dark mode). It seems like the initial render uses stale/default data or runs before the reactive state is fully respected by the component.\n\n### Additional context\n\nManually toggling the mode after page load causes the icon to update correctly.\n\nLikely related to hydration or timing of when isDark is reactive in relation to rendering the component.\n\nVideo recording of the issue is available for reference — showing the incorrect icon on initial page load despite the correct theme and isDark value.\n\nhttps://github.com/user-attachments/assets/8c2bac86-f7f9-4bc0-8e11-64d107c60a18\n\n\n### Logs\n\n```shell-script\n\n```",[3253,3254,3255,3256],{"name":3150,"color":3151},{"name":3153,"color":3154},{"name":3156,"color":3157},{"name":3196,"color":3194},4459,"useColorMode does not respect storage value on initial load (icon mismatch)","2025-09-07T15:11:52Z","https://github.com/nuxt/ui/issues/4459",0.70656985,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fEiX__Ug7M08fBY4laIyicXtXNgUzvXCZtvuie79Oytg":-1},"/nuxt/ui/4525"]