\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.7289788,{"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.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/angry-moon-grlpp3\n\n### Description\n\nThe borders of UCard will be hidden in the UCollapsible\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},4383,"Borders of UCard in UCollapsible are hidden","2025-06-22T12:10:37Z","https://github.com/nuxt/ui/issues/4383",0.73665273,{"description":3047,"labels":3048,"number":3055,"owner":3028,"repository":3029,"state":3056,"title":3057,"updated_at":3058,"url":3059,"score":3060},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.1\r\n- Builder: -\r\n- User Config: extends, modules, app, ui, imports, devtools\r\n- Runtime Modules: @nuxt/ui@2.13.0, @pinia/nuxt@0.5.1\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\n\"@nuxt/ui\": \"^2.13.0\"\n\n### Reproduction\n\nDescription should be clear enough.\n\n### Description\n\n\u003Cimg width=\"300\" alt=\"Screen Shot 2024-02-10 at 9 02 12 AM\" src=\"https://github.com/nuxt/ui/assets/5523014/144df6f1-3704-4b13-929c-c74cfd81aecd\">\r\n\r\n\r\nWhen a `Modal` has a `Form` inside of it, and you go on mobile, the bug happens.\r\n\r\nThe modal always goes to the bottom of the screen. When the keyboard input opens, it covers the modal. \r\n\r\nClosing the keyboard input reveals the unseen mobile modal.\r\n\r\nI would suggest moving the modal to the top, or to compensate for the keyboard dynamically and be placed therefore somewhere in the top-middle.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3049,3050,3053],{"name":3019,"color":3020},{"name":3051,"color":3052},"closed-by-bot","ededed",{"name":3054,"color":3052},"stale",1346,"closed","Modal With Form on Mobile is Covered by Keyboard Input","2025-06-19T02:12:54Z","https://github.com/nuxt/ui/issues/1346",0.67326874,{"description":3062,"labels":3063,"number":3068,"owner":3028,"repository":3029,"state":3056,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Description\r\n\r\nHi,\r\n\r\nI think it would be great if the command palette would 'natively' support submenus to enable an easy way to build some more feature-rich command palettes.\r\nI implemented submenus by manually replacing the assigned command groups and saving the 'history' of groups assigned to the command palette so I can go back via a manually injected back button.\r\n\r\nThe following code is a snippet of my code that doesn't work as I put it there because of some missing code, but it outlines what I did well enough to understand my submenu implementation.\r\n\r\n### Additional context\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CUModal v-model=\"model\">\r\n \u003CUCommandPalette\r\n ref=\"commandPaletteRef\"\r\n :loading=\"isDataLoading\"\r\n :groups=\"selectedCommandGroups\"\r\n :autoselect=\"true\"\r\n :nullable=\"false\"\r\n @update:model-value=\"onCommandSelect\"\r\n @close=\"() => (model = false)\"\r\n :close-button=\"{\r\n icon: 'i-heroicons-x-mark-20-solid',\r\n color: 'gray',\r\n variant: 'link',\r\n padded: false,\r\n }\"\r\n :empty-state=\"{\r\n icon: 'i-heroicons-magnifying-glass-20-solid',\r\n label: `We couldn't find any items.`,\r\n queryLabel: `We couldn't find any items with that term. Please try again.`,\r\n }\">\r\n \u003C/UCommandPalette>\r\n \u003C/UModal>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { Group, Command } from '#ui/types';\r\nimport type { UCommandPalette } from '#build/components';\r\nimport { nanoid } from 'nanoid';\r\n\r\n\r\nconst toast = useToast();\r\nconst router = useRouter();\r\n\r\nconst model = defineModel\u003Cboolean>();\r\n\r\nconst commandPaletteStore = useCommandPaletteStore();\r\nconst { commandPaletteGroups, isDataLoading, realms } = storeToRefs(commandPaletteStore);\r\nconst commandPaletteRef = ref\u003CInstanceType\u003Ctypeof UCommandPalette>>();\r\n\r\n\r\nconst newEntitySubmenuGroup = computed\u003CGroup[]>(() => {\r\n return [\r\n {\r\n key: 'action-new-entity-sub-menu',\r\n label: 'Create new entity: Select a realm',\r\n commands: realms.value.map((realm) => ({\r\n id: `action-new-entity-realm-${realm.workspaceId}`,\r\n label: realm.ownershipType === 'PERSONAL' ? 'My Library' : realm.name,\r\n icon: realm.ownershipType === 'PERSONAL' ? 'i-heroicons-user' : 'i-heroicons-user-group',\r\n click: () => navigateTo(`${commandPaletteStore.getWorkspacePrefix(realm)}/entity/new`),\r\n })),\r\n },\r\n ];\r\n});\r\n\r\nconst actionCommands = computed\u003CCommand[]>(() => {\r\n return [\r\n {\r\n id: 'action-new-entity',\r\n label: 'Create new entity',\r\n icon: 'i-heroicons-document',\r\n submenu: newEntitySubmenuGroup.value,\r\n },\r\n ];\r\n});\r\n\r\nconst navigationCommands: Command[] = [\r\n {\r\n id: 'navigation-home',\r\n label: 'Home',\r\n icon: 'i-heroicons-home',\r\n click: () => navigateTo('/'),\r\n },\r\n {\r\n id: 'navigation-settings',\r\n label: 'Settings',\r\n icon: 'i-heroicons-cog',\r\n click: () => navigateTo('/settings'),\r\n },\r\n {\r\n id: 'navigation-back',\r\n label: 'Go back',\r\n icon: 'i-heroicons-arrow-uturn-left',\r\n click: () => router.back(),\r\n },\r\n];\r\n\r\n\r\nconst commandGroups = computed(() => {\r\n return [\r\n ...commandPaletteGroups.value,\r\n {\r\n key: 'actions',\r\n label: 'Actions',\r\n commands: actionCommands.value.filter((command) => !command.hidden),\r\n },\r\n {\r\n key: 'navigation',\r\n label: 'Navigation',\r\n commands: navigationCommands,\r\n },\r\n ] satisfies Group[];\r\n});\r\n\r\nconst selectedCommandGroups = ref\u003CGroup[]>(commandGroups.value);\r\n\r\nconst commandPaletteMenuHistory = ref\u003CGroup[][]>([commandGroups.value]);\r\n\r\nfunction onCommandSelect(option: Command) {\r\n if (option && option.isSubmenuBackButton) {\r\n commandPaletteMenuHistory.value.pop();\r\n selectedCommandGroups.value = commandPaletteMenuHistory.value[commandPaletteMenuHistory.value.length - 1];\r\n return;\r\n }\r\n\r\n if (option && option.submenu) {\r\n const id = nanoid();\r\n const submenu: Group[] = [\r\n {\r\n key: `submenu-navigation-${id}`,\r\n static: true,\r\n commands: [\r\n {\r\n id: `command-back-${id}`,\r\n label: 'Back',\r\n icon: 'i-heroicons-arrow-left',\r\n isSubmenuBackButton: true,\r\n },\r\n ],\r\n },\r\n ...option.submenu,\r\n ];\r\n commandPaletteMenuHistory.value.push(submenu);\r\n selectedCommandGroups.value = submenu;\r\n\r\n return;\r\n }\r\n\r\n model.value = false;\r\n if (option && option.click) {\r\n option.click();\r\n }\r\n}\r\n\r\nonBeforeMount(async () => {\r\n await commandPaletteStore.loadData();\r\n selectedCommandGroups.value = commandGroups.value;\r\n});\r\n\u003C/script>\r\n\r\n```",[3064,3067],{"name":3065,"color":3066},"enhancement","a2eeef",{"name":3022,"color":3023},2003,"CommandPalette: support submenus","2025-06-13T12:49:44Z","https://github.com/nuxt/ui/issues/2003",0.7166496,{"description":3074,"labels":3075,"number":3078,"owner":3028,"repository":3079,"state":3056,"title":3080,"updated_at":3081,"url":3082,"score":3083},"",[3076],{"name":3065,"color":3077},"1ad6ff",277,"nuxt.com","Command palettes modals should always have first element selected","2023-02-15T12:32:03Z","https://github.com/nuxt/nuxt.com/issues/277",0.7181942,{"description":3085,"labels":3086,"number":3078,"owner":3028,"repository":3087,"state":3056,"title":3088,"updated_at":3089,"url":3090,"score":3083},"https://github.com/nuxt-community/laravel-echo-module/blob/main/test/basic.test.ts#L12",[],"test-utils","renderAndGetWindow type not found","2023-12-02T00:13:07Z","https://github.com/nuxt/test-utils/issues/277",{"description":3092,"labels":3093,"number":3096,"owner":3028,"repository":3029,"state":3056,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Environment\n\n- node:V18.19.1\n- pnpm: V8.15.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.1\n\n### Reproduction\n\nhttps://github.com/Jevin0/nuxt-ui-no-style-demo/blob/master/app.vue\n\n### Description\n\n\n### step\n1. `pnpm dlx nuxi@latest init \u003Cproject-name>`\n2. `npx nuxi@latest module add ui`\n3. `pnpm install`\n4. `pnpm dev`\n\n### concern\nNormal use of `UButton` component, but no background color and Color\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3094,3095],{"name":3019,"color":3020},{"name":3022,"color":3023},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.7196458,{"description":3102,"labels":3103,"number":3109,"owner":3028,"repository":3029,"state":3056,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### Environment\n\n- Operating System: `Windows 11`\n- Browser: `Chrome 131`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt UI\n\n### Version\n\nv2.20.0, 3.0.0-alpha-x\n\n### Reproduction\n\n[Tabs ](https://ui.nuxt.com/components/tabs) and [Input#disabled](https://ui.nuxt.com/components/input#disabled) sections of ui.nuxt.com, as well as pretty much every other component that has a \"Disabled\" state, demonstrate the issue\n\n### Description\n\nThe current styling for `disabled` state of different components in Nuxt UI has a very subtle visual distinction from the enabled state. On a monitor with good sRGB calibration (Gigabyte M32U - IPS, 4K, sRGB mode), the grayed-out appearance of the `disabled` state in almost every Nuxt UI component (as shown on the [ui.nuxt.com/components](https://ui.nuxt.com/components)) is almost indistinguishable from the non-disabled state.\n\n**Issue:**\n- Disabled elements do not provide a clear visual cue, making it hard for users to differentiate their state at a glance.\n- This affects usability and accessibility, especially for users with mild visual impairments or varying screen settings.\n\n**Suggestion:**\n\nConsider increasing contrast differences or adding clearer indicators (e.g., opacity) to improve visual accessibility for disabled elements.\n\n**Example:**\n[Tabs](https://ui.nuxt.com/components/tabs) and [Input#disabled](https://ui.nuxt.com/components/input#disabled) sections of ui.nuxt.com, as well as pretty much every other component that has a \"Disabled\" state, demonstrate the issue.\n\n**Video** (may look different on your monitor):\nNuxt UI `2.20.0`:\n\n\nhttps://github.com/user-attachments/assets/81eea3ee-1c74-4036-9fe9-55b18cb16851\n\n\nNuxt UI `3.0.0-alpha-x`:\n\n\nhttps://github.com/user-attachments/assets/9018589e-98fb-46d1-97e5-623fae98727e\n\n\n**Photos** of how it looks like on the mentioned monitor:\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/97736e43-fe88-428a-b3b2-67fcbe9b37dc\" width=\"400\"/>\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/6caf4ee6-0cb9-4c7e-9bc7-07e320248b8e\" width=\"400\"/>\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/b64d9960-4877-4fc4-b016-92ce8c4cf393\" width=\"400\"/>\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3104,3105,3106,3107,3108],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},{"name":3051,"color":3052},{"name":3054,"color":3052},2995,"Improve disabled state visibility for Tabs and other components","2025-06-18T09:02:44Z","https://github.com/nuxt/ui/issues/2995",0.7232785,{"labels":3115,"number":3122,"owner":3028,"repository":3028,"state":3056,"title":3123,"updated_at":3124,"url":3125,"score":3126},[3116,3119],{"name":3117,"color":3118},"3.x","29bc7f",{"name":3120,"color":3121},"pending triage","E99695",13517,"Modules conflict @nuxtjs/device and @nuxtjs/color-mode","2023-01-19T16:58:43Z","https://github.com/nuxt/nuxt/issues/13517",0.7237626,{"description":3128,"labels":3129,"number":3130,"owner":3028,"repository":3079,"state":3056,"title":3131,"updated_at":3132,"url":3133,"score":3134},"We will need to create a new component in the UI library\n\nhttps://tailwindui.com/components/application-ui/navigation/command-palettes#component-69fd3cc3634e02f74717c1046d51aa76",[],137,"Transform branch switch modal to command palette","2022-03-14T16:37:18Z","https://github.com/nuxt/nuxt.com/issues/137",0.7253647,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNF8KEOqCiCwfjHYd9Elg18R9Ot2a-G6EakEJeuaoW3s":-1},"/nuxt/ui/2157"]