\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[2882,2885,2886],{"name":2883,"color":2884},"enhancement","a2eeef",{"name":2869,"color":2870},{"name":2887,"color":2888},"triage","ffffff",3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.77698094,{"description":2895,"labels":2896,"number":2901,"owner":2872,"repository":2873,"state":2874,"title":2902,"updated_at":2903,"url":2904,"score":2905},"",[2897,2900],{"name":2898,"color":2899},"feature","A27AF6",{"name":2869,"color":2870},2322,"[MeterGroup] Implement component","2025-04-07T09:36:44Z","https://github.com/nuxt/ui/issues/2322",0.79008806,{"description":2907,"labels":2908,"number":2913,"owner":2872,"repository":2873,"state":2874,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v22.4.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.13.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@9.4.0\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, future, experimental, app, site, sitemap, routeRules, css, colorMode, runtimeConfig, modules, postcss, typescript\r\n- Runtime Modules: nuxt-headlessui@1.2.0, @nuxt/eslint@0.3.13, @nuxt/ui@2.18.4, @pinia/nuxt@0.5.4, @pinia-plugin-persistedstate/nuxt@1.2.1, @nuxt/scripts@0.8.4, nuxt-anchorscroll@1.0.3, @nuxtjs/seo@2.0.0-rc.21\r\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/command-palette#usage\n\n### Description\n\nOn mobile devices, when the modal is positioned at the bottom of the screen, the Command Palette becomes obscured by the virtual keyboard. This issue occurs when the Command Palette contains fewer than 6 elements or none at all, making it completely inaccessible for users.\r\n\r\nThe issue can be reproduced on the official component page: \r\n[https://ui.nuxt.com/components/command-palette](https://ui.nuxt.com/components/command-palette)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2909,2912],{"name":2910,"color":2911},"bug","d73a4a",{"name":2887,"color":2888},2157,"Command Palette appears behind virtual keyboard when inside Modal on mobile devices","2024-09-23T03:49:22Z","https://github.com/nuxt/ui/issues/2157",0.795024,{"description":2919,"labels":2920,"number":2921,"owner":2872,"repository":2922,"state":2923,"title":2924,"updated_at":2925,"url":2926,"score":2927},"We would like to explore with Alex the possibility of having a form `nuxt.com/jobs/new` like Tailwind: https://jobs.tailwindcss.com/post-a-job\n\nOn the API side, we can use whatever database we want to store the informations or use `api.nuxt.com`, would love your input on this @benjamincanac \n\nRight now we use vuejobs.com but we are not making any money from it.",[],855,"nuxt.com","closed","Post a Job form","2022-11-17T11:43:25Z","https://github.com/nuxt/nuxt.com/issues/855",0.72170156,{"labels":2929,"number":2934,"owner":2872,"repository":2872,"state":2923,"title":2935,"updated_at":2936,"url":2937,"score":2938},[2930,2933],{"name":2931,"color":2932},"3.x","29bc7f",{"name":2910,"color":2911},11874,"useMeta calls `onBeforeUnmount` outside of component instance","2023-01-19T15:53:16Z","https://github.com/nuxt/nuxt/issues/11874",0.7538701,{"description":2940,"labels":2941,"number":2944,"owner":2872,"repository":2873,"state":2923,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Description\n\nHow can I customize component styles in v3?\nI learned from `https://ui3.nuxt.dev/getting-started/theme` that styles can be customized in `app.config.ts` For example:\n```ts\nexport default defineAppConfig({\n uiPro: {\n header: {\n slots: {\n root: 'bg-[var(--ui-bg)]/75 backdrop-blur border-b border-[var(--ui-border)] sticky top-0 z-50',\n container: 'flex items-center justify-between gap-3 h-[var(--ui-header-height)]',\n left: 'lg:flex-1 flex items-center gap-1.5',\n center: 'hidden lg:flex',\n right: 'flex items-center justify-end lg:flex-1 gap-1.5',\n title: 'shrink-0 font-bold text-xl text-[var(--ui-text-highlighted)] flex items-end gap-1.5',\n toggle: 'lg:hidden',\n content: 'lg:hidden',\n overlay: 'lg:hidden',\n header: '',\n body: 'p-4 sm:p-6 overflow-y-auto'\n },\n variants: {\n toggleSide: {\n left: {\n toggle: '-ms-1.5'\n },\n right: {\n toggle: '-me-1.5'\n }\n }\n }\n }\n }\n})\n```\nHowever, after testing this approach, it doesn’t seem to work. So I’d like to ask specifically how to modify the style of an entire component in v3.\nFor instance, I want to customize the style of `UHeader`\nPlease forgive me if this is a silly question. English is not my native language, so I might have missed some details mentioned elsewhere.",[2942,2943],{"name":2866,"color":2867},{"name":2869,"color":2870},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.76336443,{"description":2950,"labels":2951,"number":2954,"owner":2872,"repository":2922,"state":2923,"title":2955,"updated_at":2956,"url":2957,"score":2958},"\n\n- [ ] Image should not have the height of the entire card, making the Title & url section of the card kind of glitchy because of radiuses\n\n\n- [ ] [Tablet] Suggestion, keeping the \"Category\" title as we have the space to keep it, otherwise it feels awkward to have just a select with \"Awwwards\"",[2952],{"name":2883,"color":2953},"1ad6ff",627,"[Resources] Showcases improvements V2","2023-02-15T12:32:40Z","https://github.com/nuxt/nuxt.com/issues/627",0.7675552,{"description":2960,"labels":2961,"number":2964,"owner":2872,"repository":2873,"state":2923,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Description\n\nHi,\n\nhere in the first form in nuxtui2\nhttps://ui.nuxt.com/components/form \nthe behaviour is that the input field is validated after the blur. If there is an error and I correct it, the error is fixed immediately.\n\nIn v3 the behaviour is different. I have seen the prop validateOn so I can change it to blur, but not like first onBlur and then onInput like in v2.\n\nbest,\ngregor",[2962,2963],{"name":2910,"color":2911},{"name":2869,"color":2870},3006,"How can I get the same form validation behaviour as in v2?","2025-01-06T17:48:11Z","https://github.com/nuxt/ui/issues/3006",0.7728793,{"description":2970,"labels":2971,"number":2973,"owner":2872,"repository":2873,"state":2923,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.4.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.8.1\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\n2.18.6\n\n### Reproduction\n\nNot working:\n```vue\n\u003Ctemplate>\n \u003CUSelectMenu v-model=\"selectedTheme\" name=\"labels\" :options=\"themeOptions\" value-attribute=\"id\" option-attribute=\"label\" searchable creatable placeholder=\"Select labels\" />\n {{ selectedTheme }}\n \u003Cbr />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\n defineProps({\n media: {\n type: Object,\n required: true,\n },\n });\n\n const mediaPresets = useMediaPresets();\n\n const selectedTheme = ref('');\n\n const themeOptions = computed(() => {\n return mediaPresets.themes.map((theme) => ({\n id: theme.id,\n label: `${theme.emoji} ${theme.display}`,\n }));\n });\n\u003C/script>\n\n```\n\n\nWorking / Fix:\n```Vue\n\u003Ctemplate>\n \u003CUSelectMenu v-model=\"themesProxy\" name=\"labels\" :options=\"themeOptions\" searchable creatable placeholder=\"Select labels\" />\n {{ selectedTheme }}\n \u003Cbr />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\n defineProps({\n media: {\n type: Object,\n required: true,\n },\n });\n const mediaPresets = useMediaPresets();\n\n const selectedTheme = ref('my_value');\n\n const themeOptions = computed(() => {\n return mediaPresets.themes.map((theme) => ({ id: theme.id, label: `${theme.emoji} ${theme.display}` }));\n });\n\n const themesProxy = computed({\n get: () => {\n const existingTheme = themeOptions.value.find((theme) => theme.id === selectedTheme.value);\n if (existingTheme) return existingTheme;\n return { id: selectedTheme.value, label: selectedTheme.value?.replace(/\\s/g, '-')?.toLowerCase() };\n },\n\n set: (newValue: any) => {\n if (newValue.label && !newValue.id) newValue.id = newValue.label.replace(/\\s/g, '-').toLowerCase();\n selectedTheme.value = newValue.id;\n },\n });\n\n\u003C/script>\n\n```\n\n### Description\n\n\n\nWhen using the `creatable` option, the selected value does not show up properly in the input.\n\n\nThe v-model properly changes (`{{ selectedTheme }}` under the input), but it doesn't show up in the input afterward not in the \"create xyz' text \n\nThe issue seems to happens when not using `multiple`\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2972],{"name":2910,"color":2911},2342,"[SelectMenu] `creatable` bugged when not using `multiple`","2024-11-12T17:11:21Z","https://github.com/nuxt/ui/issues/2342",0.7745904,["Reactive",2979],{},["Set"],["ShallowReactive",2982],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feu2L5kTPveDaVlegIY8SlbyFmgyRrfJcTssvLYhoSY0":-1},"/nuxt/test-utils/827"]