\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_",[2865,2868,2871],{"name":2866,"color":2867},"enhancement","a2eeef",{"name":2869,"color":2870},"v3","49DCB8",{"name":2872,"color":2873},"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.7545448,{"description":2883,"labels":2884,"number":2892,"owner":2875,"repository":2876,"state":2893,"title":2894,"updated_at":2895,"url":2896,"score":2897},"### Environment\n\nlatest\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gifted-moon-ms65xm\n\n### Description\n\nhovering over a open drop down item in a drawer results in a recursion error.\n\n### Additional context\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = ref([\n {\n label: 'hover me for a recursion error',\n },\n])\n\u003C/script>\n\n\n\u003Ctemplate>\n \u003CUDrawer>\n \u003CUButton label=\"Open Drawer\"/>\n \u003Ctemplate #content>\n \u003CUDropdownMenu\n :items=\"items\"\n >\n \u003CUButton label=\"Open Drop down\"/>\n \u003C/UDropdownMenu>\n \u003C/template>\n \u003C/UDrawer>\n\u003C/template>\n```\n\n### Logs\n\n```shell-script\nUncaught InternalError: too much recursion\n NuxtJS 5\n focus\n handleFocusOut\n ct\n f\n focus\n```",[2885,2888,2889],{"name":2886,"color":2887},"bug","d73a4a",{"name":2869,"color":2870},{"name":2890,"color":2891},"reka-ui","56d799",3357,"closed","Cant put dropdown inside drawer","2025-04-08T19:49:57Z","https://github.com/nuxt/ui/issues/3357",0.72702014,{"description":2899,"labels":2900,"number":2903,"owner":2875,"repository":2876,"state":2893,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo4\n\n### Description\n\nThe button styles in UModal body should not be affected by UButtonGroup. I'm not sure if this is a bug or a feature.\n\n\n```vue\n\u003Ctemplate>\n \u003CUButtonGroup>\n \u003CUModal\n :close=\"true\"\n v-model:open=\"open\"\n title=\"Test\"\n >\n \u003CUButton\n variant=\"outline\"\n color=\"neutral\"\n @click=\"open = true\"\n >\n Modal Button\n \u003C/UButton>\n \u003Ctemplate #body>\n Body\n \u003C/template>\n \u003Ctemplate #footer>\n \u003Cdiv class=\"flex justify-start w-full gap-4\">\n \u003CUButton\n variant=\"outline\"\n class=\"rounded\"\n label=\"Cancel\"\n @click=\"open = false\"\n />\n \u003CUButton\n variant=\"outline\"\n class=\"rounded\"\n label=\"Middle\"\n @click=\"open = false\"\n />\n \u003CUButton\n type=\"submit\"\n class=\"rounded\"\n label=\"Confirm\"\n color=\"primary\"\n @click=\"open = false\"\n />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n \u003CUButton\n variant=\"outline\"\n color=\"neutral\"\n @click=\"\"\n >\n Other Button\n \u003C/UButton>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\u003Cimg width=\"362\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/da66f0d8-fc42-45a5-b1e1-d7214468b24a\" />\n\n\u003Cbr>\n\n\u003Cimg width=\"543\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a50767ec-bea5-4c88-9b45-963f8e81e5df\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2901,2902],{"name":2886,"color":2887},{"name":2869,"color":2870},2978,"The button styles in UModal body should not be affected by UButtonGroup.","2025-02-07T15:32:58Z","https://github.com/nuxt/ui/issues/2978",0.7284451,{"description":2909,"labels":2910,"number":2911,"owner":2875,"repository":2912,"state":2893,"title":2913,"updated_at":2914,"url":2915,"score":2916},"After update with `Suspense` I can't pass class & event listeners for NuxtIcon component.\n\nFor example:\n```vue\n\u003CIcon name=\"mdi:puzzle\" class=\"absolute h-[40px] w-6 cursor-pointer rounded text-emerald-600\" />\n```\n \nNow rendered as:\n\n```html\n\u003Cspan class=\"iconify i-mdi:puzzle\" aria-hidden=\"true\">\u003C/span>\n```\n\nInstead correct v1.7.6\n```html\n\u003Cspan class=\"iconify i-mdi:puzzle absolute h-[40px] w-6 cursor-pointer rounded text-emerald-600\" aria-hidden=\"true\">\u003C/span>\n```\n\nAnd with warnings:\n```console\n WARN [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.\n at \u003CNuxtIcon name=\"mdi:puzzle\" class=\"h-[40px] w-6 cursor-pointer rounded text-emerald-600\" >\n at \u003CRouterLink ref=undefined to=\"/\" activeClass=undefined ... >\n at \u003CNuxtLink href=\"/\" >\n at \u003CError error= options.customise is not a function\n\n \u003Cspan class=\"stack internal\">at getCSS (node_modules\\@nuxt\\icon\\dist\\runtime\\components\\css.js:93:41)\u003C/span>\n \u003Cspan class=\"stack internal\">at node_modules\\@nuxt\\icon\\dist\\runtime\\components\\css.js:169:25\u003C/span>\u003C/pre> >\n at \u003CNuxtRoot>\n```\n\nSame issue with event listeners, for example:\n```vue\n\u003CIcon name=\"ant-design:plus-outlined\" class=\"icon\" @click=\"popoverOpenIndex = index\" @dblclick.stop />\n```\n\n`@click` not work now\n\nWith `\u003CIcon :suspensible=\"false\" ... />` same issue\n\n----\n`vue`: 3.5.13\n`nuxt`: 3.14.159\n`@nuxt/icon`: 1.8.0\nnode: 22.10.0\n\n",[],300,"icon","Issues with update 1.8.0 (Fallthrough Attributes)","2024-11-19T09:46:49Z","https://github.com/nuxt/icon/issues/300",0.73515975,{"description":2918,"labels":2919,"number":2926,"owner":2875,"repository":2876,"state":2893,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: modules, compatibilityDate, devtools, css, ui, devServer, future, telemetry, hooks, eslint\n- Runtime Modules: @nuxt/eslint@0.6.2, @nuxt/ui-pro@3.0.1, nuxt-jsonld@2.1.0, @pinia/nuxt@0.10.1\n- Build Modules: -\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt v3.16.1\nui-pro v3.0.1\n\n### Reproduction\n\nWhen I add the following to my nuxt.config.ts:\n\n```ts\n{\n ui: {\n colorMode: false\n }\n}\n```\n\n...then `npx nuxi typecheck` fails with 8 errors.\n\n```\n[...snip]\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n18 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\n\nFound 8 errors in 8 files.\n\nErrors Files\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSwitch.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/content/ContentSearch.vue:89\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/DashboardSearch.vue:57\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10\n\n ERROR Process exited with non-zero status (2)\n```\n\n### Description\n\nI think that there probably needs to be a stub export set up in all cases? Or these files should not be gathered by the typechecking script?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2920,2921,2922,2925],{"name":2886,"color":2887},{"name":2869,"color":2870},{"name":2923,"color":2924},"pro","5BD3CB",{"name":2872,"color":2873},3657,"Setting ui.colorMode = false breaks nuxi typecheck","2025-03-27T20:54:57Z","https://github.com/nuxt/ui/issues/3657",0.73569936,{"description":2932,"labels":2933,"number":2936,"owner":2875,"repository":2937,"state":2893,"title":2938,"updated_at":2939,"url":2940,"score":2941},"On hover, border effect doesn't work on Firefox/Safari",[2934],{"name":2886,"color":2935},"ff281a",1136,"nuxt.com"," Cards: border","2023-02-15T12:31:10Z","https://github.com/nuxt/nuxt.com/issues/1136",0.73930025,{"description":2943,"labels":2944,"number":2947,"owner":2875,"repository":2876,"state":2893,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.2.2\n- Builder: -\n- User Config: compatibilityDate, devtools, runtimeConfig, nitro, routeRules, modules, supabase, site, feed, sitemap, robots, schemaOrg, image\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.12, @nuxtjs/supabase@1.4.6, @vueuse/nuxt@12.5.0, @nuxt/image@1.9.0, @nuxthub/core@0.8.15, @nuxtjs/sitemap@7.2.4, nuxt-module-feed@1.1.4, @nuxtjs/robots@5.2.2, nuxt-schema-org@4.1.1, nuxt-link-checker@4.1.0\n- Build Modules: -\n------------------------------\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```vue\n\u003CUModal\n :ui=\"{\n title: 'sr-only',\n description: 'sr-only',\n }\"\n :title=\"will not work\"\n :description=\"will not work\">\n \u003Ctemplate #content>\n \u003Cp>anything\u003C/p>\n \u003C/template>\n\u003C/UModal>\n```\n\n### Description\n\nNot having a title or description set for the modal will throw the following RekaUI error:\n```\nPostingCard.vue:76 Warning: `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.\n\nIf you want to hide the `DialogTitle`, you can wrap it with our VisuallyHidden component.\n\nWarning: Missing `Description` or `aria-describedby=\"undefined\"` for DialogContent.\n```\n\nThis is expected.\n\nThe problem is when you use the `content` slot of `UModal`, you can't set the title or description, either through props or by using the `title` or `description` slot.\n\nIt would be nice if setting the title and description slots/props while using the content still applies them but automatically applies `sr-only`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2945,2946],{"name":2886,"color":2887},{"name":2869,"color":2870},3267,"Modal content slot causes accessibility issues","2025-02-21T10:49:04Z","https://github.com/nuxt/ui/issues/3267",0.7465763,{"description":2953,"labels":2954,"number":2955,"owner":2875,"repository":2956,"state":2893,"title":2957,"updated_at":2958,"url":2959,"score":2960},"Hello, Thanks for great work I'm looking forward to use the module\r\n\r\nI remember a `strategy` or a similar option being discussed that let the user specify where to load the script. A possible option would be a worker to offload the 3rd party script entirely from the main thread. I can't find that discussion to link it.\r\n\r\nIs there a way to use a worker for the scripts? Also will there be some kind of integration with tools like partytown? Thanks!",[],56,"scripts","[Question]: Usage with web workers (partytown)","2024-07-24T12:05:47Z","https://github.com/nuxt/scripts/issues/56",0.7481211,{"description":2962,"labels":2963,"number":2973,"owner":2875,"repository":2876,"state":2893,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### 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```",[2964,2965,2968,2969,2970],{"name":2886,"color":2887},{"name":2966,"color":2967},"needs reproduction","CB47CF",{"name":2869,"color":2870},{"name":2872,"color":2873},{"name":2971,"color":2972},"closed-by-bot","ededed",3303,"open Popover manually","2025-03-25T02:04:46Z","https://github.com/nuxt/ui/issues/3303",0.7491869,{"description":2979,"labels":2980,"number":2984,"owner":2875,"repository":2875,"state":2893,"title":2985,"updated_at":2986,"url":2987,"score":2988},"Hello. After I upgrade Nuxt my code broke.\r\n\r\nI have this in template\r\n\r\n```\r\n\u003C header @scroll=\"handleScroll\" :class=\"[{'headroom--unpinned': scrolled 'default-header': zeroscrolled} header]\">\u003C/header>\r\n```\r\nscript\r\n```\r\nmethods: {\r\n handleScroll: function () {\r\n if (!this.activeOverlay && this.lastPosition \u003C window.scrollY && this.limitPosition \u003C window.scrollY) {\r\n this.scrolled = true\r\n // move up!\r\n }\r\n if (this.lastPosition > window.scrollY) {\r\n this.scrolled = false\r\n this.zeroscrolled = false\r\n // move down\r\n }\r\n if (this.$route.path === '/' && this.zeroScroll \u003C window.scrollY) {\r\n this.zeroscrolled = true\r\n }\r\n this.lastPosition = window.scrollY\r\n }\r\n },\r\n created () {\r\n if (process.BROWSER_BUILD) {\r\n // window.onNuxtReady(() => {\r\n window.addEventListener('scroll', this.handleScroll)\r\n // })\r\n }\r\n },\r\n destroyed () {\r\n if (process.BROWSER_BUILD) {\r\n // window.onNuxtReady(() => {\r\n window.removeEventListener('scroll', this.handleScroll)\r\n // })\r\n }\r\n }\r\n```\r\n\r\nWhat changes was made? What can cause the issue? All was working perfectly hour ago!\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1334\">#c1334\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2981],{"name":2982,"color":2983},"2.x","d4c5f9",1498,"After updating to `latest` scroll binding stopped working","2023-01-18T15:41:51Z","https://github.com/nuxt/nuxt/issues/1498",0.75089574,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJoMvHBsT9DLmHg6kOkOLe5l6cNmAEDAFpUpbKiAg_w4":-1},"/nuxt/nuxt.com/626"]