\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\" />",[2896,2897,2900],{"name":2868,"color":2869},{"name":2898,"color":2899},"v3","49DCB8",{"name":2871,"color":2872},3972,"Different result than static for active-color & active-variant","2025-04-24T15:30:39Z","https://github.com/nuxt/ui/issues/3972",0.7755487,{"description":2907,"labels":2908,"number":2914,"owner":2874,"repository":2875,"state":2876,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.12.0\n- Nuxt Version: 3.15.1\n- CLI Version: 3.18.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.0\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4, @vueuse/nuxt@12.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.x\n\n### Reproduction\n\n[nuxt-ui-button-transition-repro](https://github.com/fech-dev/nuxt-ui-button-transition-repro)\n\n### Description\n\nI'm unable to animate (or use transitions) with vue's Transition component with UButton. I've noticed that the UButton uses NuxtLink that renders a fragment. This is causing the problem, since Transition component will not be able to work with fragments. \n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be animated. \n at \u003CNuxtLink class=\"rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]\" raw=true custom=\"\" > \n at \u003CULink type=undefined disabled=false class=\"rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]\" ... > \n at \u003CUButton key=\"_default1\" label=\"Open\" onClick=fn > \n at \u003CBaseTransition appear=false persisted=false mode=undefined ... > \n at \u003CTransition enter-from-class=\"opacity-0 translate-x-100\" enter-active-class=\"transition duration-400\" leave-active-class=\"transition duration-400\" ... > \n at \u003CFadeTransition > \n at \u003CPrimitive as=undefined class=\"max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center items-center min-h-screen gap-4\" > \n at \u003CUContainer class=\"flex flex-col justify-center items-center min-h-screen gap-4\" > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```",[2909,2910,2911],{"name":2868,"color":2869},{"name":2898,"color":2899},{"name":2912,"color":2913},"upstream","78bddb",3037,"Unable to animate Button with Transition component","2025-03-22T21:43:43Z","https://github.com/nuxt/ui/issues/3037",0.7810108,{"description":2920,"labels":2921,"number":2928,"owner":2874,"repository":2874,"state":2929,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Environment\n\n- **Operating System:** Windows 10\r\n- **Browser/Device:** Google Chrome 98\r\n- **Theme/Mode:** Light mode\r\n- **Additional Information:** No browser extensions are enabled, and default browser settings are used.\n\n### Reproduction\n\n1. Enable light mode in the application.\r\n2. Navigate to the section where the URL \"https://nuxt.com/deploy/koyeb\" is displayed.\r\n3. Observe that the URL is not visible or barely visible due to insufficient contrast with the background.\r\n4. Switch to dark mode and verify that the URL becomes visible and legible.\r\n5. Switch back to light mode and confirm that the URL remains difficult to read.\n\n### Describe the bug\n\n# 🚀 Bug Report\r\n\r\n### 📝 Description\r\n\r\nIn light mode, the URL \"https://nuxt.com/deploy/koyeb\" is not visible, whereas in dark mode, the icon is visible. This inconsistency affects the readability and accessibility of the content.\r\n\r\n### ✨ Describe the solution you'd like\r\n\r\nAdjust the background color or text color of the URL \"https://nuxt.com/deploy/koyeb\" in light mode to ensure it is visible and legible to users.\r\n\r\n### ✍️ Describe alternatives you've considered\r\n\r\nOne alternative solution could be to provide a contrasting background color or to change the text color of the URL to ensure visibility in both light and dark modes. Additionally, providing an underline or a hover effect on the URL could improve its discoverability for users.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2922,2925],{"name":2923,"color":2924},"3.x","29bc7f",{"name":2926,"color":2927},"pending triage","E99695",27234,"closed","Inconsistency in Visibility of URL 'https://nuxt.com/deploy/koyeb' in Light and Dark Modes","2024-05-15T16:18:02Z","https://github.com/nuxt/nuxt/issues/27234",0.74890685,{"description":2935,"labels":2936,"number":2940,"owner":2874,"repository":2875,"state":2929,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### Environment\n\nNuxt UI: 3.0.1\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.1\n\n### Reproduction\n\n Without RP\n\n### Description\n\nThe menu item itself is correct but the internal menu items in right-to-left languages are incorrect. I solved this problem by adding the following style in the items prop, but this should be resolved in future versions.\n\n`class: 'flex-row-reverse'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2937,2938,2939],{"name":2868,"color":2869},{"name":2898,"color":2899},{"name":2871,"color":2872},3737,"Items in the DropdownMenu have problems in RTL mode","2025-03-31T21:07:42Z","https://github.com/nuxt/ui/issues/3737",0.7502901,{"description":2946,"labels":2947,"number":2950,"owner":2874,"repository":2951,"state":2929,"title":2952,"updated_at":2953,"url":2954,"score":2955},"broken on safari and firefox ",[2948],{"name":2868,"color":2949},"ff281a",1158,"nuxt.com","[Home]: Hover on modules list item","2023-02-15T12:31:12Z","https://github.com/nuxt/nuxt.com/issues/1158",0.7528776,{"description":2957,"labels":2958,"number":2959,"owner":2874,"repository":2960,"state":2929,"title":2961,"updated_at":2962,"url":2963,"score":2964},"I am getting the follwing error: ERROR Could not initialize provider adobe. unifont will not be able to process fonts provided by this provider. No font metadata found in adobe response.\n\n\n\nnuxt.config.ts:\n\n```\nfonts: {\n adobe: {\n id: ['uzl5buz']\n },\n families: [{ name: 'sofia-pro', provider: 'adobe' }]\n },\n```\n\nadded sofia-pro to webproject in https://fonts.adobe.com/",[],471,"fonts","Could not initialize provider adobe","2025-03-06T12:35:10Z","https://github.com/nuxt/fonts/issues/471",0.76419246,{"description":2966,"labels":2967,"number":2968,"owner":2874,"repository":2874,"state":2929,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Environment\n\nIt's not particularly relevant to the docs y'all host, but if you want to know, here's my environment info:\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `title`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://nuxt.com/modules/i18n\r\nhttps://nuxt.com/modules/tailwindcss\n\n### Describe the bug\n\nCode snippets' text is in a mid-to-dark grey, dark blue, and dark orange on a black background making them neigh impossible to read. (The bright blue `>` prompts on the black background also cause my eyes to wig out a bit, but that might just be me. The contrast definitely isn't.)\r\n\r\n\u003Cimg width=\"1456\" alt=\"lighthouse\" src=\"https://user-images.githubusercontent.com/7552754/206815045-19717335-9107-4f9e-9989-ee0a233f1227.png\">\r\n\r\n\r\n\r\n\r\n\n\n### Additional context\n\nThis is happening in both Firefox 107.0.1 and Chrome 108.0.5359.98 on macOS 10.15.7 with the operating system set to \"Light\" Appearance.\n\n### Logs\n\n_No response_",[],15823,"Module Docs: Almost no contrast on code snippets","2023-01-20T14:16:02Z","https://github.com/nuxt/nuxt/issues/15823",0.76421076,{"description":2974,"labels":2975,"number":2979,"owner":2874,"repository":2875,"state":2929,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### Environment\n\n- Operating System: Windows 10 \n- Node Version: v22.10.0 \n- Nuxt Version: 3.16.0 \n- CLI Version: 3.22.5 \n- Nitro Version: 2.11.5 \n- Package Manager: pnpm@9.15.7 \n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, meta, ssr, runtimeConfig, ui \n- Runtime Modules: @nuxt/ui@3.0.0-beta.3, @nuxt/icon@1.10.3, @nuxt/fonts@0.11.0, @vueuse/nuxt@12.8.2\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt UI 3.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n\u003CUInput\n v-model=\"translation\"\n ref=\"translationField\" \n />\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2976,2977,2978],{"name":2868,"color":2869},{"name":2898,"color":2899},{"name":2871,"color":2872},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7682493,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3azxG3C8utnqDkQNTo-yElLKo5qKUNdOfazR_x1FIjY":-1},"/nuxt/ui/3860"]