\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.6970723,{"description":3036,"labels":3037,"number":3041,"owner":3028,"repository":3029,"state":3030,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### 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```",[3038,3039,3040],{"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.7137963,{"description":3047,"labels":3048,"number":3052,"owner":3028,"repository":3029,"state":3030,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### 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```",[3049,3050,3051],{"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.7179941,{"description":3058,"labels":3059,"number":3063,"owner":3028,"repository":3029,"state":3030,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, scripts, modules, sentry, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.3.0, @sentry/nuxt/module@9.19.0, @nuxt/scripts@0.11.7, @nuxt/eslint@1.4.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/r7ryl3\n\n### Description\n\nI recently upgrade to NuxtUI 3.1.2 (from 3.0.1) and It's impossible (or I don't know) how to deal with custom type for `InputMenu`, I got some types issues on `label-key`, `v-model`, `items`, `slots` as you can see in my reproduction.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3060,3061,3062],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4182,"Custom type with InputMenu","2025-05-19T12:22:28Z","https://github.com/nuxt/ui/issues/4182",0.7180098,{"description":3069,"labels":3070,"number":3073,"owner":3028,"repository":3029,"state":3074,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: 3.17.5\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, css, future, compatibilityDate, vite\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-bsi7gjhw?file=app%2Fapp.vue\n\n### Description\n\nThe UInput component behaves the same way whether using `v-model` or just `:modelValue`—it retains input values when typed into. However, this is incorrect because I did not set up the `@update:modelValue` event\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3071,3072],{"name":3019,"color":3020},{"name":3022,"color":3023},4355,"closed","The UInput component is not a controlled component","2025-06-16T10:45:31Z","https://github.com/nuxt/ui/issues/4355",0.6890426,{"description":3080,"labels":3081,"number":3088,"owner":3028,"repository":3029,"state":3074,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.10.0\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: yarn@4.1.1\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\n2.8\n\n### Reproduction\n\nvisible even on the docs page \n\n### Description\n\nWhen there is no value set for select, the placeholder is displayed (if set).\r\nIn such case, when options are displayed their labels are \"muted\" - looks like disabled ones.\r\n\r\n\r\nOnce any option is picked, their color change to \"proper\" one.\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3082,3083,3086],{"name":3019,"color":3020},{"name":3084,"color":3085},"closed-by-bot","ededed",{"name":3087,"color":3085},"stale",1757,"USelect with placeholder display options with missleading color","2025-06-19T02:12:33Z","https://github.com/nuxt/ui/issues/1757",0.6893394,{"description":3094,"labels":3095,"number":3102,"owner":3028,"repository":3028,"state":3074,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v14.19.1`\r\n- Nuxt Version: `3.5.1`\r\n- Nitro Version: `2.4.1`\r\n- Package Manager: `npm@9.7.1`\r\n- Builder: `vite`\r\n- User Config: `app`, `modules`, `htmlValidator`, `css`, `components`, `postcss`, `i18n`\r\n- Runtime Modules: `@nuxtjs/i18n@8.0.0-beta.12`, `@pinia/nuxt@0.4.11`, `@vueuse/nuxt@10.1.2`, `nuxt-jsonld@2.0.8`, `@nuxtjs/html-validator@1.2.5`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nget this BaseInput.vue\r\n```\r\n\u003Ctemplate>\r\n \u003Cinput\r\n :type=\"type\"\r\n class=\"rounded-md bg-white text-sm text-gray-700 shadow-sm\"\r\n :class=\"cssClasses\"\r\n :value=\"modelValue\"\r\n v-bind=\"$attrs\"\r\n @input=\"$emit('update:modelValue', $event.target.value)\"\r\n />\r\n \u003Cp v-if=\"error\" class=\"text-red-500 m-1 text-xs\">{{ error }}\u003C/p>\r\n\u003C/template>\r\n\u003Cscript>\r\nexport default defineNuxtComponent({\r\n name: 'BaseInput',\r\n inheritAttrs: false,\r\n emits: ['update:modelValue'],\r\n props: {\r\n block: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n type: {\r\n type: String,\r\n default: 'text',\r\n },\r\n modelValue: {\r\n type: String,\r\n default: '',\r\n },\r\n error: {\r\n type: String,\r\n default: '',\r\n },\r\n },\r\n computed: {\r\n cssClasses() {\r\n const classes = []\r\n if (this.block) {\r\n classes.push('w-full')\r\n }\r\n if (this.error) {\r\n classes.push('border-red-500')\r\n } else {\r\n classes.push('border-gray-200')\r\n }\r\n return classes\r\n },\r\n },\r\n})\r\n\u003C/script>\r\n\r\n```\r\n\r\nthen use it like this\r\n```\r\n\u003CBaseInput v-model=\"emailFilter\" placeholder=\"Email...\" />\r\n\r\n// emailFillter is declared in data() as ''\r\n```\r\n\r\n### Describe the bug\r\n\r\ni get hydration children mismatch when using placeholder on input\r\n\r\nthe REALLY strange part is that if I put \"Email...\" as placeholder, i get the error. If I put \"Em ail...\" the error goes away\r\n\r\n### Additional context\r\n\r\nthis is happening on chrome\r\nworks ok in firefox\r\n\r\n### Logs\r\n\r\n_No response_",[3096,3099],{"name":3097,"color":3098},"3.x","29bc7f",{"name":3100,"color":3101},"pending triage","E99695",21943,"hydration children mismatch when using placeholder on input","2023-10-24T11:45:28Z","https://github.com/nuxt/nuxt/issues/21943",0.69471276,{"description":3108,"labels":3109,"number":3114,"owner":3028,"repository":3028,"state":3074,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.12.1\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.6.2\r\n- Package Manager: pnpm@8.6.0\r\n- Builder: vite\r\n- User Config: sourcemap, runtimeConfig, typescript, css, build, vite, nitro, routeRules, modules, i18n, intercom, webVitals, gtm, devtools\r\n- Runtime Modules: @nuxt/image@1.0.0-rc.1, unplugin-icons/nuxt, nuxt-3-intercom@1.0.8, @nuxtjs/fontaine@0.4.1, @nuxtjs/web-vitals@0.2.6, @vueuse/nuxt@10.2.1, nuxt-vuetify-nested-containment@0.0.4, @zadigetvoltaire/nuxt-gtm@0.0.13, nuxt-vuetify-error-handler@1.1.0, (), @pinia/nuxt@0.4.11, nuxt-i18n-data@0.1.22, @nuxtjs/i18n@8.0.0-beta.12\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-wudebh?file=app.vue,plugins%2Fvuetify.ts,nuxt.config.ts,package.json\r\n\r\n### Describe the bug\r\n\r\nSince I updated to nuxt 3.7.0 the text color in every input is white. It's may a combination with vuetify but even when I rollback vuetify to 3.3.8 the input color is still white.\r\n\r\nI rolled back nuxt to 3.6.2 and vuetify to 3.3.8 and the input color is black again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3110,3111],{"name":3097,"color":3098},{"name":3112,"color":3113},"upstream","E8A36D",22944,"Nuxt 3.7.0 - input text color is white","2023-09-04T11:53:52Z","https://github.com/nuxt/nuxt/issues/22944",0.69759333,{"description":3120,"labels":3121,"number":3124,"owner":3028,"repository":3029,"state":3074,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: pnpm@10.8.1\n- Builder: -\n- User Config: app, compatibilityDate, css, devtools, devServer, eslint, imports, modules, runtimeConfig, sourcemap, ssr, icon, ui, colorMode\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui@3.0.2, @vueuse/nuxt@13.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/condescending-mcnulty-k5jgtf\n\n### Description\n\nHi 👋,\n\nI’ve noticed an issue with the `ColorPicker` component related to color precision.\n\n🐛 Bug Description\n\nWhen I manually input the hex value `#123456` into the `ColorPicker`, it gets changed to `#123354` immediately.\n\nAfter digging into the source code, I found that the component uses `colortranslator` and internally converts colors via HSL using HSLObject. It appears that during the RGB → HSL → RGB round-trip, there’s a slight loss of precision, which results in the hex value being altered.\n\nIt seems that the issue might be caused by the `decimals` option being set to `2`, while the default value in `colortranslator` is `6`. \n\nhttps://github.com/nuxt/ui/blob/2b315fd855666b02d32373769c8617dd713a8d0a/src/runtime/components/ColorPicker.vue#L104-L109\n\nOr `Math.round` here:\n\nhttps://github.com/nuxt/ui/blob/2b315fd855666b02d32373769c8617dd713a8d0a/src/runtime/components/ColorPicker.vue#L28-L36\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3122,3123],{"name":3019,"color":3020},{"name":3022,"color":3023},3948,"[ColorPicker] ColorPicker alters manually entered hex value due to precision loss in colortranslator","2025-07-19T17:49:20Z","https://github.com/nuxt/ui/issues/3948",0.70463187,{"description":3130,"labels":3131,"number":3137,"owner":3028,"repository":3029,"state":3074,"title":3138,"updated_at":3139,"url":3140,"score":3141},"### Description\n\nHi,\r\n\r\nI have a customized Nuxt UI setup, with multiple variants and colors for the UInput elements set in the app.config. Currently if the input is in error state inside a FormGroup, it will override the input classes only with the base classes, and it will not use my classes for the given variant.\r\n\r\n`input: {\r\n base: 'dark:focus:ring-1 ring-1 dark:focus:bg-white dark:focus:text-hollow font-bold dark:focus:placeholder-black/30',\r\n placeholder: \"dark:placeholder-white/30\",\r\n size: {\r\n xs: 'text-xs',\r\n sm: 'text-[13px]',\r\n xl: 'text-[13px]'\r\n },\r\n padding: {\r\n xs: 'px-4 py-0 h-8',\r\n sm: 'px-4 py-0 h-12',\r\n xl: 'h-14 px-4 py-0'\r\n },\r\n color: {\r\n white: {\r\n outline: 'dark:bg-primaryBg dark:placeholder-white/10',\r\n solid: \"dark:bg-hollow dark:placeholder-white/30\",\r\n soft: 'dark:bg-white/10 dark:placeholder-white/10',\r\n },\r\n primary: {\r\n solid: \"dark:text-peach-500 dark:placeholder-peach-500/40 dark:bg-hollow dark:ring-0 font-bold\"\r\n },\r\n },\r\n rounded: \"rounded-lg\",\r\n default: {\r\n variant: 'solid'\r\n }\r\n }`\r\n\r\n\n\n### Additional context\n\n_No response_",[3132,3135,3136],{"name":3133,"color":3134},"enhancement","a2eeef",{"name":3084,"color":3085},{"name":3087,"color":3085},1593,"UInput error state style override","2025-06-19T02:12:46Z","https://github.com/nuxt/ui/issues/1593",0.7070409,["Reactive",3143],{},["Set"],["ShallowReactive",3146],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQzdAUy7LppJTP2bVWZ09nWmundST2PeQaL9rTIloO1k":-1},"/nuxt/ui/4301"]