\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_",[3019,3022,3025],{"name":3020,"color":3021},"enhancement","a2eeef",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"triage","ffffff",3307,"nuxt","ui","open","Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.6961329,{"description":3037,"labels":3038,"number":3042,"owner":3029,"repository":3030,"state":3043,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### Description\n\nI’ve been using USlideover from NuxtUI (v3), and I noticed that there’s no event triggered when clicking on the overlay (outside of the slideover). This makes it tricky to detect when a user dismisses it by clicking outside, rather than using the close button.\n\nIt would be super helpful if USlideover emitted an event whenever it’s closed—whether that’s via the close button or the overlay. That way, we could easily handle any necessary logic when the slideover is dismissed.\n\nIf exposing a close event isn’t feasible, maybe the overlay could be made accessible as a slot? That way, we could wrap it in our own template and attach a @click event directly. This would give us more flexibility in handling interactions.\n\nI took a look at the source code, and it seems like these interactions are already handled internally, but they aren’t exposed as events:\n🔗 [Slideover.vue](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Slideover.vue)\n\nWould be awesome to see this in a future update.\n\n### Additional context\n\n_No response_",[3039,3040,3041],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3225,"closed","Expose close event for USlideover (Overlay & Button)","2025-03-28T17:34:38Z","https://github.com/nuxt/ui/issues/3225",0.6141086,{"description":3049,"labels":3050,"number":3056,"owner":3029,"repository":3030,"state":3043,"title":3057,"updated_at":3058,"url":3059,"score":3060},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.5.0\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future\n- Runtime Modules: @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/white-butterfly-699yhh\n\n### Description\n\n1. Open the modal via the open button\n2. Open toast(s) via the open button\n3. click modal overlay to dispose it \n4. click any toast (dont click close button)\n5. mouse leave does not count down toasts anymore (click outside does enable countdown again) \n\n---------\nYou can also do this programmatically by closing the modal while adding toasts.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3051,3054,3055],{"name":3052,"color":3053},"bug","d73a4a",{"name":3023,"color":3024},{"name":3026,"color":3027},3719,"Toast does not always dispose","2025-04-02T07:18:01Z","https://github.com/nuxt/ui/issues/3719",0.63134664,{"description":3062,"labels":3063,"number":3068,"owner":3029,"repository":3030,"state":3043,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Description\n\nI was trying to add a bit of margin around the Slideover to look like this:\n\n\n\nI think it can be done cleanly if there was a `\u003Cdiv>` wrapping the whole [DialogContent](https://github.com/nuxt/ui/blob/71728d3c3fa95255db03448c8b87fb75bc2d805c/src/runtime/components/Slideover.vue#L129C7-L129C21)\n\nHow do you suggest to achieve it? \nThank you",[3064,3067],{"name":3065,"color":3066},"question","d876e3",{"name":3023,"color":3024},3390,"How to add margins around the Slideover panel?","2025-02-25T15:36:40Z","https://github.com/nuxt/ui/issues/3390",0.6572193,{"description":3074,"labels":3075,"number":3078,"owner":3029,"repository":3030,"state":3043,"title":3079,"updated_at":3080,"url":3081,"score":3082},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.33\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Description\n\nHi :) I am getting type errors when using `compoundVariant`. \n\nFor example, here is my `app.config.ts`:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\nI am getting the following type error for `compoundVariants`:\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3076,3077],{"name":3052,"color":3053},{"name":3023,"color":3024},2481,"Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.66336954,{"description":3084,"labels":3085,"number":3089,"owner":3029,"repository":3030,"state":3043,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nMay already be a way to do this but if not It would be nice to specify a variant for light and dark on a component. \nFor instance outline inputs on light mode and soft for dark mode. \n\n` \u003CUInput variant=\"{light: 'outline', dark: 'soft'}\" />\n`\n\n### Additional context\n\n_No response_",[3086,3087],{"name":3020,"color":3021},{"name":3088,"color":3027},"wontfix-v2",2737,"Specify a components variant for each color mode.","2025-03-03T22:31:17Z","https://github.com/nuxt/ui/issues/2737",0.670402,{"description":3095,"labels":3096,"number":3099,"owner":3029,"repository":3030,"state":3043,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nI've noticed that links (\\\u003Ca\\> tags) created with `UButton` contain a lot of unnecessary styling related to the button itself, disabled and enabled state. Given that for anchors there is no `disabled` property in the HTML specification, this means that out of the following styles:\n```\nrounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-primary)]/50 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]\n```\n\nAt the very least, these can be removed:\n\n```\ndisabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent\n```\n\nThis is quite a reduction in classes and can make a moderate difference in total page size and even web vitals scores, especially if there are a lot of links on the page created with `UButton` (which is very likely given the customization UButton provides with icons, variants, colors, and more)\n\nIn order to make this work, the classes that rely on disabled state would likely need to be extracted into a separate place in the theme, which tailwind-variants will then need to merge if there is no `to` property present.\n\nYou might be asking why, given that technically people can rely on it to prevent navigation until a certain condition. But the answer to that is that restricting links like that is generally bad practice and can be circumvented pretty easily. It's not meant to be a security feature and it also lacks in terms of functional purpose.\n\nI'll check to see what I can do about it, but I thought sharing it here would be more beneficial in case someone will be faster than me in preparing a PR for this =)",[3097,3098],{"name":3065,"color":3066},{"name":3023,"color":3024},2907,"[Performance improvement opportunity]: remove disabled-dependent classes on links created with `UButton`","2025-01-13T22:45:37Z","https://github.com/nuxt/ui/issues/2907",0.67407817,{"description":3105,"labels":3106,"number":3107,"owner":3029,"repository":3108,"state":3043,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Environment\n\nDocs issue:\r\nFirefox browser.\n\n### Reproduction\n\nGo on nuxt.com and scroll down to see the footer.\r\nLook at the theme switch. Doable with even OS light and dark modes.\r\n\r\n\r\n\n\n### Describe the bug\n\nTheme switch is not showing the exact mode used by the docs website.\r\nBy default, it shows the light mode as selected where the dark mode is set.\n\n### Additional context\n\nOnly visible on Firefox.\n\n### Logs\n\n_No response_",[],1230,"nuxt.com","Theme switch of docs default value does not sync","2023-10-10T14:45:33Z","https://github.com/nuxt/nuxt.com/issues/1230",0.67503375,{"description":3114,"labels":3115,"number":3125,"owner":3029,"repository":3030,"state":3043,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.15.4\nCLI Version: 3.13.2\nNitro Version: 2.10.4\nPackage Manager: npm@11.1.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\n.\n\n### Description\n\nI want the Popover component to open when a fetch call is made and the results are displayed in the Popover. For example, I want the search results to be displayed, but as soon as I click on the input, the Popover will be displayed.\n\nThis is my code:\n```\n\u003CUPopover v-model:open=\"search.open\" arrow>\n \u003Cdiv class=\"header-search relative flex flex-row items-center w-full max-w-96\">\n \u003Cinput v-model=\"search.param\"\n class=\"input bg-transparent border rounded-3xl focus:ring-0 outline-0 py-1 px-2 w-full\" />\n \u003C/div>\n \u003Ctemplate #content>\n ...\n \u003C/template>\n \u003C/UPopover>\n```\n\nDid I do something wrong?\nPlease help me.\nThanks\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3116,3117,3120,3121,3122],{"name":3052,"color":3053},{"name":3118,"color":3119},"needs reproduction","CB47CF",{"name":3023,"color":3024},{"name":3026,"color":3027},{"name":3123,"color":3124},"closed-by-bot","ededed",3303,"open Popover manually","2025-03-25T02:04:46Z","https://github.com/nuxt/ui/issues/3303",0.67833996,{"description":3131,"labels":3132,"number":3135,"owner":3029,"repository":3108,"state":3043,"title":3136,"updated_at":3137,"url":3138,"score":3139},"**General**\n- [x] On both logo sliders, it shouldn't move while mouse over\n- [ ] Slide-in apparitions on scroll for images & texts in sections\n\n- [x] pb-10 is enough spacing between title of section & content\n- [x] I don't know if it's intended but every bold text in sections is \"Focus on the big picture\"\n\n**Hero**\n\n- [ ] Description should be => line-height: 170%\n\n- [x] [Lightmode] Gem aspect should be better\n- [x] @R-mooon => Increase mesh subdivision in blender in order to make gem angles even smoother + try compress hdr even more \n- [ ] [Mobile] @R-mooon will make a specific design [Edit : @Flosciante => see comments]\n\n**Sections**\n\n- [ ] [Darkmode] Description text should be one gray lighter\n\n**Framework**\n- [x] Play icon is missing over the video\n- [ ] [Darkmode] Overlay is too bright when modal is open\n\n**Projects**\n\n- [x] Cursor should be at end of content\n\n- [ ] Is it possible to make the animation in revert also ? I mean make \"droe\" & \"atinux\" deleting the content in order to make the animation infinite\n\n\n- [ ] [Darkmode] \"Read more\" on the card is too light \n\n**Community**\n\n- [x] See the nuxters have to look like the links in sections\n\n**Partners**\n\n- [ ] @R-mooon needs to rework some partners logo to make them display well\n\n**Newsletter**\n\n- [x] Less margin-top & more margin-bottom (should have nearly the same space up & down)\n\n- [ ] Update background gradient [Edit : Flo is gonna make a mouse interaction instead]\n\n**Suggestions**\n\n- [ ] Make this \"My account\" button follow content width (and the actual width being the max-w)\n- [ ] Why not making account name white and have a background color on hover, at the moment i find the right part of header very grey-ish, i feel like the name is disabled\n\n\n- [x] Try make logo banner fit inside container to see if it looks more consistent [Edit : Cancelled, tested and it looks worse than before]\n\n",[3133],{"name":3020,"color":3134},"1ad6ff",712,"[Home] Design feedbacks","2023-09-05T08:18:34Z","https://github.com/nuxt/nuxt.com/issues/712",0.6788071,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f63D8oQGfrX4wOyJEB8DtVBzjgDPhEFlZsdEgF1Uy51M":-1},"/nuxt/ui/3305"]