\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\" />",[3020,3023,3026],{"name":3021,"color":3022},"bug","d73a4a",{"name":3024,"color":3025},"v3","49DCB8",{"name":3027,"color":3028},"triage","ffffff",3972,"nuxt","ui","open","Different result than static for active-color & active-variant","2025-04-24T15:30:39Z","https://github.com/nuxt/ui/issues/3972",0.7693255,{"description":3038,"labels":3039,"number":3045,"owner":3030,"repository":3031,"state":3046,"title":3047,"updated_at":3048,"url":3049,"score":3050},"### Description\n\nThere is currently no easy way to know what state the modal is in. Adding a `toggle` method would make life very much easier.\n\nI'm willing to make a PR\n\n### Additional context\n\n_No response_",[3040,3043,3044],{"name":3041,"color":3042},"enhancement","a2eeef",{"name":3024,"color":3025},{"name":3027,"color":3028},3720,"closed","feat: add toogle for useOverlay","2025-04-09T15:26:14Z","https://github.com/nuxt/ui/issues/3720",0.6910747,{"description":3052,"labels":3053,"number":3058,"owner":3030,"repository":3031,"state":3046,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: pnpm@9.12.1\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv2.18.7\n\n### Reproduction\n\n-\n\n### Description\n\nI'm using downloaded font awesome 6 svg's in my assets folder, but somehow I can't override the surround icons.\n\n**nuxt.config.ts**\n```ts\n// @nuxt/icon (handled by @nuxt/ui)\nicon: {\n customCollections: [\n {\n prefix: \"fa-light\",\n dir: \"./assets/icons/font-awesome/light\",\n },\n {\n prefix: \"fa-brands\",\n dir: \"./assets/icons/font-awesome/brands\",\n },\n ],\n},\n```\n\n**app.config.js**\n```js\nexport default defineAppConfig({\n ui: {\n icons: {\n prev: \"fa-light:arrow-left\",\n next: \"fa-light:arrow-right\",\n },\n\n content: {\n surround: {\n icon: {\n prev: \"fa-light:arrow-left\",\n next: \"fa-light:arrow-right\",\n },\n },\n },\n },\n},\n```\n\nAdding it to `icons.prev` and `icons.next` is not working at all.\n\nOverriding it in `content.surround.icon....` is working (class-wise), but simply not adding the icons..\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3054,3055],{"name":3021,"color":3022},{"name":3056,"color":3057},"duplicate","cfd3d7",2447,"Surround icons not updating with custom font","2024-11-10T21:45:37Z","https://github.com/nuxt/ui/issues/2447",0.7450365,{"description":3064,"labels":3065,"number":3066,"owner":3030,"repository":3067,"state":3046,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Environment\n\nhttps://nuxt.com/\n\n### Reproduction\n\nUse Google and Firefox to open https://nuxt.com/, and you can find that the automatic recognition on Firefox is wrong, showing the dark mode\r\n\r\n\r\n\n\n### Describe the bug\n\nfirefox Developer Edition 131.0b5\r\nAnd how to turn off dark mode?\r\nI tried but it didn't work\r\ncolorMode: {\r\n preference: 'light'\r\n},\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],1663,"nuxt.com","Dark mode does not work properly on Firefox Developer Edition","2024-11-21T01:08:22Z","https://github.com/nuxt/nuxt.com/issues/1663",0.74933213,{"description":3073,"labels":3074,"number":3079,"owner":3030,"repository":3031,"state":3046,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Environment\n\n```\nNuxt project info: 4:16:28 PM\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.14.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.8.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @nuxt/eslint@0.3.13, @nuxt/test-utils/module@3.14.4, @pinia/nuxt@0.5.5, @vueuse/nuxt@10.11.1, nuxt-shiki@0.3.0, nuxt-svgo@4.0.8\n- Build Modules: -\n------------------------------\n```\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nI don't know how to reproduce it unfortunately.\n\n### Description\n\nI often have a bunch of `[Icon] loading icon `heroicons:magnifying-glass` timed out after 500ms` on firefox\n\n\n\nit impacts the breadcrumb component\n\nbut also other `\u003CUIcon>` instances\n\nDo you have any idea about where those timeouts maybe coming from \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3075,3076],{"name":3021,"color":3022},{"name":3077,"color":3078},"upstream","78bddb",2573,"Icon timeout despite having installed the @iconify-json/heroicons collection","2024-11-08T16:41:20Z","https://github.com/nuxt/ui/issues/2573",0.7560242,{"description":3085,"labels":3086,"number":3089,"owner":3030,"repository":3031,"state":3046,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v18.18.2\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: bun@1.1.24\r\n- Builder: -\r\n- User Config: devtools, modules, eslint, runtimeConfig, site, mdc, image, components, strapi, i18n, vite, routeRules, formkit, compatibilityDate\r\n- Runtime Modules: @nuxtjs/strapi@1.12.0, @nuxt/image@1.8.0, @vueuse/nuxt@10.11.1, @nuxtjs/i18n@8.5.1, @nuxt/eslint@0.3.13, @nuxt/fonts@0.7.2, @nuxtjs/mdc@0.8.3, @formkit/nuxt@1.6.5, nuxt3-vuex-module@1.1.0, nuxt3-interpolation/index.cjs, nuxt-swiper@1.2.2, nuxt-marquee@1.0.4, @nuxtjs/seo@2.0.0-rc.20, @formkit/nuxt@1.6.5, @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-dbk9vy?file=app.vue\n\n### Description\n\nEnter transition of sliderover Module not working properly. Instant appearing of elements (with sometimes slight but too quick transitions). Exit transition works fine. \r\n\r\nTried on Chrome, Firefox & Safari on Mac.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3087,3088],{"name":3021,"color":3022},{"name":3077,"color":3078},2127,"[Slideover/Modal] Enter transition not working","2024-09-20T14:03:47Z","https://github.com/nuxt/ui/issues/2127",0.75633556,{"description":3095,"labels":3096,"number":3111,"owner":3030,"repository":3030,"state":3046,"title":3112,"updated_at":3113,"url":3114,"score":3115},"https://unplugin.unjs.io/guide/#filters",[3097,3099,3102,3105,3108],{"name":3041,"color":3098},"8DEF37",{"name":3100,"color":3101},"good first issue","fbca04",{"name":3103,"color":3104},"pending triage","E99695",{"name":3106,"color":3107},"refactor","173A12",{"name":3109,"color":3110},"possible regression","B90A42",31837,"opt in to new unplugin filter options","2025-05-27T15:42:25Z","https://github.com/nuxt/nuxt/issues/31837",0.76933056,{"description":3117,"labels":3118,"number":3122,"owner":3030,"repository":3031,"state":3046,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### Description\r\n\r\nHi, is there any way to disable the error template? \r\n\r\nI just tried to set an empty template, but this creates a div with some classes that create a slight jump because of the set class mt-2... and overwriting from the template is also not possible...\r\n\r\nI need to do this because I need to show some custom logic where error messages are used as hints.\r\n\r\ncheers,\r\ngregor",[3119],{"name":3120,"color":3121},"question","d876e3",2100,"disabling formgroup error template","2024-09-03T08:41:36Z","https://github.com/nuxt/ui/issues/2100",0.7698636,{"description":3128,"labels":3129,"number":3135,"owner":3030,"repository":3031,"state":3046,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### Environment\n\n❯ npx nuxi info\nWorking directory: /Users/devin/repos/projects/_websites/serp.co_/serp.co 8:19:26 PM\nNuxt project info: (copied to clipboard) 8:19:26 PM\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.2.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.10.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10, @nuxtjs/html-validator@1.8.2, @nuxt/image@1.8.1, @nuxt/eslint@0.6.2, @nuxtjs/seo@2.0.0-rc.23, @nuxtjs/sitemap@7.0.0, nuxt-multi-cache@3.4.0, nuxt-security@2.1.5, @nuxt/scripts@0.9.5, nuxt-link-checker@4.0.4\n- Build Modules: -\n------------------------------\n\n 8:19:26 PM\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.10\",\n\n### Reproduction\n\nmy website is using nuxt + nuxt UI / pro\n\nthis is the page screenshot from my iphone:\n\n\n\nthis is the page screenshot from browse:\n\n\u003Cimg width=\"758\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d0d27577-22b8-40bb-ad4d-8a3841eddfcc\" />\n\n\n**questions**\n\n1. is there something i am forgetting to add to my nuxt config or my page level code that is causing this problem? and how to i fix / test for it?\n2. why would there be a difference in the page on the actual phone vs. in the browser dev tools?\n\n\n// page code:\n\n```js\n\u003Ctemplate>\n \u003Cdiv v-if=\"data\">\n \u003Cmultipage-header\n :name=\"data.name\"\n :one-liner=\"data.oneLiner\"\n :sections=\"sections\"\n class=\"bg-background sticky top-0 z-10 transition-all duration-300\"\n :image=\"data.logo\"\n :serply_link=\"data.serplyLink\"\n />\n\n \u003C!-- Main content with grid -->\n \u003Csection class=\"mx-auto max-w-7xl p-4 md:p-6 lg:p-8\">\n \u003Cdiv class=\"grid gap-6 lg:grid-cols-3\">\n \u003C!-- Main Content (70%) -->\n \u003Cdiv class=\"lg:col-span-2\">\n \u003C!-- Overview Section -->\n \u003Ccompany-overview\n v-if=\"data.excerpt\"\n id=\"overview\"\n :company=\"data\"\n class=\"scroll-mt-60\"\n />\n\n \u003C!-- Article Section -->\n \u003Csection\n v-if=\"data.article\"\n class=\"prose dark:prose-invert mt-[-25px]\"\n >\n \u003Cdiv id=\"article\" class=\"mb-8\" v-html=\"data.article\">\u003C/div>\n \u003C/section>\n\n \u003C!-- Features Section -->\n \u003Csection v-if=\"data.features\" class=\"mb-12 space-y-4\">\n \u003Ch2 id=\"features\" class=\"mb-4 scroll-mt-60 text-3xl font-bold\">\n {{ data.name }} Features\n \u003C/h2>\n \u003Carticle v-for=\"feature in data.features\" :key=\"feature.item\">\n \u003Ch3 class=\"mb-2 text-lg font-bold\">{{ feature.item }}\u003C/h3>\n \u003Cp>{{ feature.description }}\u003C/p>\n \u003C/article>\n \u003C/section>\n\n \u003C!-- FAQs Section -->\n \u003Csection v-if=\"faqItems && faqItems.length\" id=\"faqs\" class=\"mb-12\">\n \u003Ch2 class=\"mb-4 scroll-mt-60 text-3xl font-bold\">FAQ\u003C/h2>\n \u003Cu-accordion type=\"multiple\" :items=\"faqItems\" />\n \u003C/section>\n\n \u003C!-- Alternatives -->\n \u003Csection v-if=\"data.alternatives\" class=\"mb-12 p-4\">\n \u003Ch2 id=\"alternatives\" class=\"mb-4 scroll-mt-60 text-3xl font-bold\">\n {{ data.name }} Alternatives\n \u003C/h2>\n \u003Cul class=\"list-disc pl-4\">\n \u003Cli v-for=\"alternative in data.alternatives\" :key=\"alternative\">\n {{ alternative }}\n \u003C/li>\n \u003C/ul>\n \u003C/section>\n \u003C/div>\n\n \u003C!-- Sidebar (30%) -->\n \u003Caside\n v-if=\"\n (data.screenshots && data.screenshots.length) ||\n (data.categories && data.categories.length)\n \"\n class=\"space-y-6 lg:col-span-1\"\n >\n \u003C!-- Left Column: Media Gallery -->\n \u003Cmedia-gallery\n v-if=\"data.screenshots && data.screenshots.length\"\n :company=\"data\"\n />\n\n \u003C!-- Categories -->\n \u003Csection\n v-if=\"data.categories && data.categories.length\"\n class=\"gap-2\"\n >\n \u003Cs-pill base-slug=\"reviews/best\" :items=\"data.categories\" />\n \u003C/section>\n \u003C/aside>\n \u003C/div>\n \u003C/section>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute();\nconst router = useRouter();\nconst { slug } = route.params;\n\nconst data = await useCompany(`${slug}`);\nif (!data) {\n router.push('/404');\n}\n\nconst faqItems = computed(() => {\n if (!data?.faqs) return [];\n\n return data?.faqs.map((faq) => ({\n label: faq.question,\n content: faq.answer\n }));\n});\n\nconst sections = computed(() => {\n const sectionTitles: string[] = [];\n\n sectionTitles.push('Overview');\n\n if (data?.features) {\n sectionTitles.push('Features');\n }\n if (faqItems.value && faqItems.value.length) {\n sectionTitles.push('FAQ');\n }\n\n if (data?.alternatives) {\n sectionTitles.push('Alternatives');\n }\n\n return sectionTitles;\n});\n\nuseSeoMeta({\n title: computed(() =>\n data?.name\n ? `${data.name} - Reviews, Pricing, Features`\n : 'Company Information'\n )\n});\n\u003C/script>\n```\n",[3130,3131,3134],{"name":3021,"color":3022},{"name":3132,"color":3133},"needs reproduction","CB47CF",{"name":3024,"color":3025},3168,"mobile responsiveness issues","2025-03-28T17:34:56Z","https://github.com/nuxt/ui/issues/3168",0.77016675,{"labels":3141,"number":3146,"owner":3030,"repository":3030,"state":3046,"title":3147,"updated_at":3148,"url":3149,"score":3150},[3142,3143],{"name":3103,"color":3104},{"name":3144,"color":3145},"2.x","d4c5f9",7600,"% in URL param results in incorrect behaviour","2023-01-22T15:36:02Z","https://github.com/nuxt/nuxt/issues/7600",0.77318984,["Reactive",3152],{},["Set"],["ShallowReactive",3155],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRqmZfT-5qCka7KVazvC3WRboNRtT_Cjfwme-ZzZI3Ws":-1},"/nuxt/ui/3696"]