\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```",[3169,3170,3171],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.6716777,{"description":3178,"labels":3179,"number":3183,"owner":3146,"repository":3147,"state":3184,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@11.1.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, @vueuse/nuxt@13.0.0, @nuxtjs/i18n@9.3.1, nuxt-security@2.2.0, @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wonderful-violet-jrsqy9\n\n### Description\n\nI get a type error when using an array of strings for the `variant` key inside of `compoundVariants´:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n select: {\n compoundVariants: [\n {\n color: \"primary\",\n variant: [\"outline\", \"subtle\"],\n class: \"data-[state='open']:ring\",\n },\n ],\n },\n },\n});\n```\n\n```\napp/app.config.ts:11:11 - error TS2322: Type 'string[]' is not assignable to type 'string'.\n\n11 variant: [\"outline\", \"subtle\"],\n ~~~~~~~\n```\n\nIt does work tho, so its only a type issue I think.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3180,3181,3182],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},3579,"closed","Type error in app config `compoundVariants`","2025-05-02T15:06:25Z","https://github.com/nuxt/ui/issues/3579",0.6084149,{"description":3190,"labels":3191,"number":3197,"owner":3146,"repository":3147,"state":3184,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.17.1`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.6.2`\n- Builder: `-`\n- User Config: `modules`, `devtools`, `app`, `css`, `site`, `content`, `runtimeConfig`, `build`, `future`, `experimental`, `compatibilityDate`, `typescript`, `cookieControl`, `eslint`, `i18n`, `icon`, `image`, `ogImage`, `sitemap`, `turnstile`\n- Runtime Modules: `@vueuse/nuxt@13.1.0`, `@nuxt/eslint@1.3.0`, `@nuxt/ui-pro@3.1.0`, `@nuxtjs/sitemap@7.2.10`, `@nuxtjs/robots@5.2.10`, `@nuxt/content@3.5.1`, `nuxt-og-image@5.1.3`, `@nuxt/image@1.10.0`, `@nuxtjs/turnstile@1.0.0`, `@dargmuesli/nuxt-cookie-control@9.0.2`, `@nuxtjs/robots@5.2.10`, `nuxt-auth-utils@0.5.20`, `@nuxtjs/i18n@9.5.3`\n- Build Modules: `-`\n\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed for this situation\n\n### Description\n\nI'm hoping this just turns into a question, but I'm trying to figure out if custom variants are supported by TypeScript, I tried adding a variant to a button using this methodology:\n\n```ts\n button: {\n variants: {\n variant: {\n gradient: 'shadow-sm shadow-emerald-300/5 border border-emerald-300/10 hover:shadow hover:border-emerald-300 hover:shadow-emerald-300 transition-all duration-200 text-white bg-gradient-to-br from-logo-a via-logo-a-dark to-logo-a focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',\n },\n },\n defaultVariants: {\n color: 'neutral',\n variant: 'subtle',\n },\n default: {\n color: 'white',\n loadingIcon: 'i-mdi-loading',\n },\n },\n```\nI also tried adding it via `compoundVariants` as well - and while this strategy works fine in both situations, I get TS errors whenever I try to apply it at the component.\n\n```\nType '\"gradient\"' is not assignable to type '\"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\" | undefined'.ts-plugin(2322)\n```\n\n\u003Cimg width=\"975\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c38d6ba5-ccae-4609-bfdb-38c8d084a442\" />\n\nAm I doing something wrong? Or is TS support for variants just not completed yet?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3192,3193,3196],{"name":3140,"color":3141},{"name":3194,"color":3195},"needs reproduction","CB47CF",{"name":3158,"color":3159},4046,"provide a custom TS-safe custom variant","2025-05-23T13:22:19Z","https://github.com/nuxt/ui/issues/4046",0.65499943,{"description":3203,"labels":3204,"number":3207,"owner":3146,"repository":3147,"state":3184,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.18.0`\n- Nuxt Version: `4.1.1`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `npm@11.5.2`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `devtools`, `supabase`, `css`, `routeRules`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui-pro@3.3.3`, `@vueuse/nuxt@13.9.0`, `@nuxtjs/supabase@1.6.2`, `nuxt-charts@0.2.3`\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/zen-euclid-cf554n\n\n### Description\n\nThe problem occurs because the UFileUpload component likely contains a button element that doesn't have an explicit type attribute, causing it to default to type=\"submit\", which triggers form submission.\n\n### Additional context\n\n```\n\u003Ccomponent\n :is=\"variant === 'button' ? 'button' : 'div'\"\n ref=\"dropzoneRef\"\n :type=\"variant === 'button' ? 'button' : undefined\" // 👈 add this maybe?\n :role=\"variant === 'button' ? undefined : 'button'\"\n :data-dragging=\"isDragging\"\n :class=\"ui.base({ class: props.ui?.base })\"\n :tabindex=\"interactive && !disabled ? 0 : -1\"\n @click=\"interactive && !disabled && open()\" \n @keydown.prevent\n @keyup.enter.space=\"interactive && !disabled && open()\"\n>\n```\n\n### Logs\n\n```shell-script\n\n```",[3205,3206],{"name":3140,"color":3141},{"name":3158,"color":3159},4935,"UFileUpload with variant button inside form will cause UForm submit","2025-09-09T14:55:29Z","https://github.com/nuxt/ui/issues/4935",0.6652261,{"description":3213,"labels":3214,"number":3222,"owner":3146,"repository":3147,"state":3184,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3215,3216,3217,3220],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3218,"color":3219},"closed-by-bot","ededed",{"name":3221,"color":3219},"stale",2860,"[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.6682497,{"description":3228,"labels":3229,"number":3235,"owner":3146,"repository":3147,"state":3184,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\n\nsandbox\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/admiring-herschel-qyt4kh\n\n### Description\n\n`app.config`\n\n```\nbutton: {\n compoundVariants: [\n {\n color: 'primary',\n variant: 'soft',\n class: {\n base: 'text-green-500',\n leadingIcon: 'text-red-500'\n }\n },\n ]\n}\n```\n\nif button defined like without `active` the icon is red, but text is green\n```\n\u003CUButton\n label=\"Label\"\n color=\"primary\"\n variant=\"soft\"\n icon=\"mdi-account\"\n />\n```\n\nsame result is expected when using `active`, but `leadingIcon` is ignored\n```\n\u003CUButton\n label=\"Label\"\n active\n active-color=\"primary\"\n active-variant=\"soft\"\n icon=\"mdi-account\"\n @click.prevent=\"active = !active\"\n/>\n```\n\n### Additional context\n\n\u003Cimg width=\"202\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0756fb1c-772c-44ae-855d-90aba304bd9e\" />",[3230,3231,3232,3233,3234],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},{"name":3218,"color":3219},{"name":3221,"color":3219},3972,"Different result than static for active-color & active-variant","2025-08-20T02:08:55Z","https://github.com/nuxt/ui/issues/3972",0.6710696,{"labels":3241,"number":3252,"owner":3146,"repository":3146,"state":3184,"title":3253,"updated_at":3254,"url":3255,"score":3256},[3242,3245,3248,3249],{"name":3243,"color":3244},"types","2875C3",{"name":3246,"color":3247},"3.x","29bc7f",{"name":3140,"color":3141},{"name":3250,"color":3251},"🔨 p3-minor","FBCA04",14162,"`nuxt.config`'s `vue` types are incorrect","2023-01-19T17:26:32Z","https://github.com/nuxt/nuxt/issues/14162",0.67205936,{"description":3258,"labels":3259,"number":3263,"owner":3146,"repository":3146,"state":3184,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Environment\n\nLinux `6.16.5-arch1-1` with nuxt `4.1.1`. \nBrowser used: Librewolf 142.0.1-1 and Chrome 139.0.7258.154\n\n```\n- Operating System: `Linux`\n- Node Version: `v22.13.0`\n- Nuxt Version: `4.1.1`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.5`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n```\n\n### Reproduction\n\nBarebones code example to reproduce this issue, no styling. \nIf you add Tailwind styling the issue becomes even more prominent, as the styling of the inner button gets applied to the outer button, breaking the layout entirely.\n\nI couldn't get any of the two code sandboxes to work, sorry, so here is the code directly:\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n\n \u003Cbutton v-for=\"thisItem in storedItems\" :key=\"thisItem.id\">\n \u003Clabel>{{ thisItem.title }}\u003C/label>\n\n \u003Cdiv>\n \u003Cbutton v-for=\"thisLabel in thisItem.labels\" :key=\"thisLabel.id\">\n {{ thisLabel.name }}\n \u003C/button>\n \u003C/div>\n \u003C/button>\n\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript setup>\n\nconst storedItems = ref([{\n id: \"0\",\n title: \"0\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n },\n {\n id: \"1\",\n title: \"1\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n },\n {\n id: \"2\",\n title: \"2\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n }\n]);\n\n\u003C/script>\n```\n\n### Describe the bug\n\nTwo button elements, nested inside of each other, each containing a `v-for` instruction, causes the layout to break. \nThe for loop is executed an incorrect amount of times and the styling of the inner button can get applied to the outer button, starting with iteration >0.\n\nChanging one of the two button elements to a div/anchor/... fixes the issue.\n\n### Additional context\n\nThis is how it looks on page load:\n\u003Cimg width=\"1196\" height=\"649\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/520c3c98-61c7-4b40-9b97-a634d13d3e2f\" />\n\nThis is how it looks after a hot reload and *should* look:\n\u003Cimg width=\"1196\" height=\"649\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/99a6c586-13e4-4ff6-84f7-b79c4e301844\" />\n\nThe behavior does not change in \"build\" mode, so without the dev server. It technically is even worse because there is no hot-reload to circumvent the issue anymore.\n\n \n\nThis is how it looks in my app with Tailwind styling ^-^:\n\u003Cimg width=\"1849\" height=\"1171\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e73db657-9526-418a-b611-772a73a4a22f\" />\n\n...and this is how it should look like:\n\u003Cimg width=\"1837\" height=\"1167\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b34dd8fe-e625-4c84-9666-e46afd238b23\" />\n\n### Logs\n\n```shell-script\n\n```",[3260],{"name":3261,"color":3262},"pending triage","E99695",33188,"Nested button elements with v-for loop are processed incorrectly and break layout","2025-09-09T19:05:58Z","https://github.com/nuxt/nuxt/issues/33188",0.67746544,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZDAZXJrfZHqHrlq4BtBy47W7bDwy4DvVaKgmWnSnI7Q":-1},"/nuxt/ui/3738"]