\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```",[3139,3142,3145],{"name":3140,"color":3141},"bug","d73a4a",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"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":3157,"labels":3158,"number":3162,"owner":3149,"repository":3150,"state":3151,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### 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```",[3159,3160,3161],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},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.71164685,{"description":3168,"labels":3169,"number":3173,"owner":3149,"repository":3150,"state":3151,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### 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```",[3170,3171,3172],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},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":3179,"labels":3180,"number":3183,"owner":3149,"repository":3150,"state":3151,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@9.15.2\n- Builder: -\n- User Config: modules, $development, devtools, css, router, colorMode, ui, runtimeConfig, routeRules, devServer, experimental, compatibilityDate, typescript, eslint, fonts, security\n- Runtime Modules: @nuxt/ui@3.3.3, @pinia/nuxt@0.11.2, nuxt-security@2.3.0, @nuxt/content@3.6.3, @nuxtjs/leaflet@1.3.2, @nuxt/image@1.11.0, @vueuse/nuxt@13.7.0, @yuta-inoue-ph/nuxt-vcalendar@1.1.0, @nuxt/scripts@0.11.10, @nuxt/eslint@1.9.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/quizzical-keldysh-wtw7zm\n\n### Description\n\nUsing Nuxt UI 3, I'm having issues styling a custom variant in a specific color. \n\nDefining the custom variant in the button.variants.variant works as expected, and intellisense recognizes the variant elsewhere in the project. Once I attempt to define a compoundVariant that includes the custom variant, intellisense breaks and the project no longer builds, as it appears the compoundVariants object is expecting the fixed list of variants specified in the base button. \n\nExample config:\n```\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n button: {\n variants: {\n variant: {\n custom: {\n label: \"uppercase\",\n },\n },\n },\n compoundVariants: [{\n variant: 'custom'\n color: 'secondary',\n class: 'text-fuschia-500'\n }],\n },\n },\n});\n```\nError: \n`Type '\"custom\"' is not assignable to type '\"link\" | \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | (\"link\" | \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\")[] | undefined'.`\n\n### Additional context\n\nnote, this is a dupe of https://github.com/nuxt/ui/issues/4046 - feel free to close this and reopen the original if that is better.\n\n### Logs\n\n```shell-script\n\n```",[3181,3182],{"name":3140,"color":3141},{"name":3146,"color":3147},4888,"Custom Variant and `compoundVariants` typing issue","2025-09-03T17:02:45Z","https://github.com/nuxt/ui/issues/4888",0.7148344,{"description":3189,"labels":3190,"number":3194,"owner":3149,"repository":3150,"state":3151,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.3.2, @nuxt/eslint@1.8.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.2\n\n### Reproduction\n\nI attempted to reproduce the issue using the official Nuxt UI CodeSandbox template, but it seems that the `class` property is not applied at all in that environment. Therefore, the bug cannot be reproduced there.\n\nHowever, in my local environment (Nuxt v4.0.3 / Nuxt UI v3.3.2), the issue is consistently reproducible. \nPlease refer to the attached screenshot for visual confirmation.\n\nHere is the code I used:\n\n```vue\n\u003CUInputMenu\n :items=\"[\n {\n label: 'Blue',\n class: 'text-blue-500!',\n },\n {\n label: 'Red',\n class: 'text-red-500!',\n },\n {\n label: 'Green',\n class: 'text-green-500!',\n },\n ]\"\n/>\n```\n\n\n### Description\n\nWhen using `UInputMenu`, each item can be assigned a custom class. However, after filtering, the class assignment seems to mismatch. For example, the \"Green\" item may be displayed in red color.\n\n### Additional context\n\n- Initial state (before filtering): \n\u003Cimg width=\"328\" height=\"243\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f556d5b4-554e-4328-98f1-e3bb037504bf\" />\n\n- After filtering with \"r\": \n\u003Cimg width=\"338\" height=\"206\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/bbed6c9b-2eae-4c55-9d68-2991f64c26ca\" />\n\nIn the filtered state, the \"Green\" item is incorrectly displayed in red.\n\n### Logs\n\n```shell-script\n\n```",[3191,3192,3193],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4752,"UInputMenu item class mismatch after filtering","2025-08-15T01:57:20Z","https://github.com/nuxt/ui/issues/4752",0.7148549,{"description":3200,"labels":3201,"number":3205,"owner":3149,"repository":3150,"state":3151,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v20.19.4`\n- Nuxt Version: `-`\n- CLI Version: `3.28.0`\n- Nitro Version: `-`\n- Package Manager: `bun@1.2.19`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.3.0\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n inputNumber: {\n defaultVariants: {\n color: 'neutral',\n },\n },\n },\n})\n```\n\n### Description\n\nChanging the default variant color of InputNumber doesn’t work.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3202,3203,3204],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4722,"InputNumber: Changing defaultVariants not working","2025-08-12T16:24:09Z","https://github.com/nuxt/ui/issues/4722",0.7152602,{"description":3211,"labels":3212,"number":3215,"owner":3149,"repository":3150,"state":3216,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### 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```",[3213,3214],{"name":3140,"color":3141},{"name":3143,"color":3144},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":3222,"labels":3223,"number":3230,"owner":3149,"repository":3150,"state":3216,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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_",[3224,3225,3228],{"name":3140,"color":3141},{"name":3226,"color":3227},"closed-by-bot","ededed",{"name":3229,"color":3227},"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":3236,"labels":3237,"number":3240,"owner":3149,"repository":3150,"state":3216,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.18.0`\n- CLI Version: `3.27.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `pnpm@10.12.3`\n- Builder: `-`\n- User Config: `modules`, `ssr`, `components`, `devtools`, `app`, `css`, `colorMode`, `runtimeConfig`, `future`, `experimental`, `compatibilityDate`, `eslint`, `fonts`, `icon`, `supabase`\n- Runtime Modules: `@nuxt/eslint@1.4.1`, `reka-ui/nuxt@2.4.0`, `@nuxt/ui@3.3.0`, `@nuxtjs/supabase@1.5.2`, `@vueuse/nuxt@13.6.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/suspicious-lumiere-6jxxjc\n\n### Description\n\nWhen displaying the `UInputMenu`, with no items in the array (fetched later) but with a default value, the placeholder is shown instead of showing the string.\n\n### Additional context\n\nFaulty commit: 488707e\n\n#4528 \n\n### Logs\n\n```shell-script\n\n```",[3238,3239],{"name":3140,"color":3141},{"name":3143,"color":3144},4635,"`UInputMenu` does not display default model value (placeholder shown instead)","2025-08-14T09:04:53Z","https://github.com/nuxt/ui/issues/4635",0.6917474,{"description":3246,"labels":3247,"number":3254,"owner":3149,"repository":3149,"state":3216,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### 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_",[3248,3251],{"name":3249,"color":3250},"3.x","29bc7f",{"name":3252,"color":3253},"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,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQzdAUy7LppJTP2bVWZ09nWmundST2PeQaL9rTIloO1k":-1},"/nuxt/ui/4301"]