\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```",[3018,3021,3024],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.67473805,{"description":3036,"labels":3037,"number":3041,"owner":3028,"repository":3029,"state":3030,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### 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```",[3038,3039,3040],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4301,"Input's placeholder doesn't respect value of `--ui-text-dimmed`","2025-06-06T09:22:24Z","https://github.com/nuxt/ui/issues/4301",0.6937177,{"description":3047,"labels":3048,"number":3052,"owner":3028,"repository":3029,"state":3030,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### 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.1\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\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWe're defining our typography style guide as custom utilities that consist of `font-size` and `font-weight` declarations like so\n\n```css\n/* main.css */\n@import 'tailwindcss'\n@import 'nuxt/ui'\n\n@utility text-display-1 {\n font-size: 54px;\n font-weight: 600;\n}\n\n@utility text-display-2 {\n ...\n}\n```\n\nWhen applying custom utilities to Nuxt UI components, whether globally in `app.config` or individually via the `ui` prop, only one class is applied, and the other is discarded. For example, with the Button component has `text-sm font-medium` applied by default to the `base` slot, passing `text-display-1` to that slot only overrides the size (blue arrow in the screenshot) while the weight still uses the `font-medium` class (red arrows in the screenshot)\n\n\n\nCommenting either one of the classes applies the other correctly. The problem happens only if there are two (or more?) classes\n\n### Additional context\n\nWe workaround this by marking the class as important `!text-display-1`\n\n### Logs\n\n```shell-script\n\n```",[3049,3050,3051],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4303,"Custom utility with 2 or more declarations are not applied correctly","2025-06-09T18:00:28Z","https://github.com/nuxt/ui/issues/4303",0.71047425,{"description":3058,"labels":3059,"number":3062,"owner":3028,"repository":3029,"state":3030,"title":3063,"updated_at":3064,"url":3065,"score":3066},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.0\n- CLI Version: 3.13.1\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.4.1\n- Builder: -\n- User Config: colorMode, modules, devtools, ssr, runtimeConfig, vite, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.12.3, @nuxt/eslint@1.4.1\n- Build Modules: -\n\n\n\n### Version\n\nv2.12.3 (and Documentation Page)\n\n### Reproduction\n\nhttps://ui2.nuxt.com/components/input#icon\n\norange: color is applied to the icon\n\u003Cimg width=\"344\" height=\"137\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/60671830-8cf2-408e-a11f-30966cad4602\" />\n\n\namber: not applied\n\u003Cimg width=\"435\" height=\"134\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b9cffe65-9d2a-41f2-8e9d-b0dcb17ac4f4\" />\n\n### Description\n\n### Describe the bug\n\nWhen using `UInput`, the `color` prop sometimes fails to apply to the icon (`leading-icon` or `trailing-icon`). Specifically, if the color value is lexicographically *before* `\"gray\"` (e.g., `\"blue\"`), the icon appears with the `gray` color instead. If the color value is after `\"gray\"` (e.g., `\"red\"`, `\"teal\"`), it works correctly.\n\n### Expected behavior\n\nThe icon color should follow the specified `color` prop regardless of its string value.\n\n### Actual behavior\n\nFor certain colors (like `\"blue\"`), the icon appears with `gray` color instead of the specified color.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3060,3061],{"name":3019,"color":3020},{"name":3025,"color":3026},4525,"color prop on UInput does not apply to icon in some cases","2025-07-14T10:36:41Z","https://github.com/nuxt/ui/issues/4525",0.71078223,{"description":3068,"labels":3069,"number":3073,"owner":3028,"repository":3029,"state":3030,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Environment\n\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.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/fragrant-fog-7ck4yf\n\nThe schema specifies that the items within the list must be numbers, and the UForm catches the error (displayed in the UAlert below), but the UInputTag object doesn't display it\n\n\u003Cimg width=\"780\" height=\"220\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9594e307-2f7d-4928-b877-d08795abc4b5\" />\n\n### Description\n\nThe UInputTag element does not correctly render the error text for schema validation errors for pattern matching of the individual items within its array. \n\nIt works fine showing an error about the length of the array, but not about problems for the items within the array.\n\n\u003Cimg width=\"779\" height=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cf031108-314b-4fd5-9859-cd275b8d3410\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3070,3071,3072],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4573,"UInputTag does not display validation errors for pattern matching","2025-07-22T14:39:33Z","https://github.com/nuxt/ui/issues/4573",0.71534634,{"description":3079,"labels":3080,"number":3090,"owner":3028,"repository":3028,"state":3091,"title":3092,"updated_at":3093,"url":3094,"score":3095},"### Describe the feature\r\n\r\nWhile debugging my app, I noticed that errors displayed alongside a 500 page were black on a black background, making the errors unreadable. After I inspected the element I realised I was actually setting a color for paragraphs in my own CSS and that Nuxt's own stylesheet was not setting the color on the paragraph but on the parent div via the `text-black` class.\r\n\r\nI believe it would be best if Nuxt's colors were applied on a more granular level (so on P or any text elements directly) to avoid this edge case.\r\n\r\n\u003Cimg width=\"806\" alt=\"Screenshot 2024-04-21 at 12 52 12\" src=\"https://github.com/nuxt/nuxt/assets/2543201/47feb2cd-4405-4e1f-afc5-9da68fef62ff\">\r\n\u003Cimg width=\"431\" alt=\"Screenshot 2024-04-21 at 12 52 39\" src=\"https://github.com/nuxt/nuxt/assets/2543201/519a57d3-296d-4f3e-b0a9-a47df8fa3fe3\">\r\n\u003Cimg width=\"436\" alt=\"Screenshot 2024-04-21 at 13 12 50\" src=\"https://github.com/nuxt/nuxt/assets/2543201/2a6724a6-6171-4624-8acc-1cdee912712f\">\r\n\u003Cimg width=\"444\" alt=\"Screenshot 2024-04-21 at 13 12 56\" src=\"https://github.com/nuxt/nuxt/assets/2543201/7aa0dc99-b7c4-473e-b0e3-9bfd1f6f986a\">\r\n\u003Cimg width=\"241\" alt=\"Screenshot 2024-04-21 at 13 13 01\" src=\"https://github.com/nuxt/nuxt/assets/2543201/0a44cd39-79d7-498a-a8d5-b641750ce2e5\">\r\n\u003Cimg width=\"239\" alt=\"Screenshot 2024-04-21 at 13 13 12\" src=\"https://github.com/nuxt/nuxt/assets/2543201/ad646824-10fe-451d-bc7c-2789550fa450\">\r\n\r\n\r\n\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3081,3084,3087],{"name":3082,"color":3083},"3.x","29bc7f",{"name":3085,"color":3086},"pending triage","E99695",{"name":3088,"color":3089},"ui-templates","bfd4f2",27082,"closed","Add a color to \u003Cp> elements on Nuxt error pages","2024-05-24T16:39:43Z","https://github.com/nuxt/nuxt/issues/27082",0.6931728,{"description":3097,"labels":3098,"number":3106,"owner":3028,"repository":3029,"state":3091,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### Environment\n\nOperating System: Linux\r\nNode Version: v20.15.1\r\nNuxt Version: 3.13.0\r\nCLI Version: 3.13.1\r\nNitro Version: 2.9.7\r\nPackage Manager: bun@1.1.27\r\nBuilder: -\r\nUser Config: devtools, extends, modules, ui\r\nRuntime Modules: @nuxt/ui@2.18.4\r\nBuild Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\n-\n\n### Description\n\n```\r\nType '{ \"v-model\": string | undefined; icon: string; type: string; size: \"md\"; placeholder: string; autocomplete: string; }' is not assignable to type 'IntrinsicAttributes & Partial\u003C{ name: string; size: InputSize; type: string; required: boolean; class: any; leading: boolean; color: InputColor; ... 16 more ...; modelModifiers: {}; }> & Omit\u003C...>'.\r\n Property 'autocomplete' does not exist on type 'IntrinsicAttributes & Partial\u003C{ name: string; size: InputSize; type: string; required: boolean; class: any; leading: boolean; color: InputColor; ... 16 more ...; modelModifiers: {}; }> & Omit\u003C...>'.\r\n```\n\n### Additional context\n\n`UInput` component doesn't have the default input types (`HTMLInputElement`)\n\n### Logs\n\n_No response_",[3099,3100,3101,3104],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3102,"color":3103},"closed-by-bot","ededed",{"name":3105,"color":3103},"stale",2104,"`UInput` default types","2025-06-18T09:06:12Z","https://github.com/nuxt/ui/issues/2104",0.6939435,{"description":3112,"labels":3113,"number":3117,"owner":3028,"repository":3029,"state":3091,"title":3118,"updated_at":3119,"url":3120,"score":3121},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v20.12.2\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.9.1\r\n- Package Manager: pnpm@8.3.1\r\n- Builder: -\r\n- User Config: app, colorMode, ui, css, modules, runtimeConfig, authJs, pinia, nitro, alias, devtools, imports, typescript\r\n- Runtime Modules: @pinia/nuxt@0.4.11, @pinia-plugin-persistedstate/nuxt@1.2.0, @vueuse/nuxt@9.13.0, @hebilicious/authjs-nuxt@0.3.0-beta.2, @nuxtjs/eslint-module@4.1.0, nuxt-monaco-editor@1.2.7, nuxt-lodash@2.5.3, @nuxt/ui@2.14.2\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv2.14.2\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-eqhn2j?file=app.vue\r\n\r\n### Description\r\n\r\nI'm getting multiple new type errors that I wasn't getting before with types that used to be valid. I think this is being caused by an update to `vue-tsc`, however I'm not sure.\r\n\r\nIn the reproduction link you can see the two examples that don't compile. Simply run `npm run typecheck` in the console to get the errors\r\nHere are the minimal examples\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nconst value = ref\u003Cstring | null | undefined>(undefined);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUInput v-model.trim=\"value\" />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n```shell-script\r\nTS2322: Type 'string | null | undefined' is not assignable to type 'string | number | undefined'.\r\n```\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nconst value = ref\u003Cboolean|undefined>();\r\nconst options = [\r\n {\r\n label: 'Yes',\r\n value: true\r\n },\r\n {\r\n label: 'No',\r\n value: false\r\n },\r\n {\r\n label: 'None selected',\r\n value: undefined\r\n }\r\n];\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUSelectMenu\r\n :options=\"options\"\r\n v-model=\"value\"\r\n value-attribute=\"value\" option-attribute=\"label\"\r\n />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n```shell-script\r\nTS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record\u003Cstring, any> | unknown[] | undefined'.\r\n```\r\n\r\n### Additional context\r\n\r\n\r\n### Logs\r\n\r\n```shell-script\r\napp.vue:14:15 - error TS2322: Type 'string | null | undefined' is not assignable to type 'string | number | undefined'.\r\n\r\n14 \u003CUInput v-model.trim=\"inputValue\" />\r\n ~~~~~~~~~~\r\n\r\n node_modules/@nuxt/ui/dist/runtime/components/forms/Input.vue.d.ts:244:5\r\n 244 modelValue: string | number;\r\n ~~~~~~~~~~\r\n The expected type comes from property 'modelValue' which is declared here on type 'Partial\u003C{ size: InputSize; ui: any; id: string; icon: string; color: any; type: string; class: any; name: string; modelValue: string | number; leading: boolean; variant: InputVariant; ... 12 more ...; modelModifiers: { ...; }; }> & Omit\u003C...> & Record\u003C...>'\r\n\r\n\r\nFound 1 error in app.vue:14\r\n```\r\n",[3114,3115,3116],{"name":3019,"color":3020},{"name":3102,"color":3103},{"name":3105,"color":3103},1710,"Unable to use boolean values with USelectMenu or null with UInput","2025-06-19T02:12:37Z","https://github.com/nuxt/ui/issues/1710",0.69929504,{"labels":3123,"number":3128,"owner":3028,"repository":3028,"state":3091,"title":3129,"updated_at":3130,"url":3131,"score":3132},[3124,3125],{"name":3085,"color":3086},{"name":3126,"color":3127},"2.x","d4c5f9",10114,"Custom directives didn't recognized by Nuxt v3","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10114",0.7005133,{"description":3134,"labels":3135,"number":3138,"owner":3028,"repository":3029,"state":3091,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### 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```",[3136,3137],{"name":3019,"color":3020},{"name":3022,"color":3023},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.70493865,["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkPVcjN6oa2nI4ey0fVef6QAebK3GkbTUImreSgV9kLM":-1},"/nuxt/ui/1593"]