\n \u003CUInput v-model=\"state.name1\" placeholder=\"...\" />\n\u003C/UModal>\n```\n\nWhen a modal contains one or more input boxes, the first input box will always get focus automatically.\nIf I manually add a close button in the upper right corner, it will trigger a validation when I click it. This is not good. How can I avoid the input box getting focus when opening the modal?\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[2043,2044],{"name":1985,"color":1986},{"name":2003,"color":2004},3062,"The input box in the modal will automatically gain focus","2025-01-10T08:36:56Z","https://github.com/nuxt/ui/issues/3062",0.72874194,{"description":2051,"labels":2052,"number":2053,"owner":1988,"repository":2054,"state":2055,"title":2056,"updated_at":2057,"url":2058,"score":2059},"**Environment:**\r\n- **Node Version:** v18.20.3\r\n- **Nuxt Version:** ^3.13.0\r\n- **@nuxt/fonts Version:** ^0.8.0\r\n- **Package Manager:** pnpm 9.6.0\r\n\r\n**Description:**\r\nI am experiencing an issue with the font definitions generated by the `@nuxt/font` package in my Nuxt 3 application. The package generates CSS that improperly uses the `local()` function in the `src` property of the `@font-face` declarations, causing the fonts to not load correctly.\r\n\r\n**Generated CSS Snippet:**\r\n```css\r\n@font-face {\r\n font-display: swap;\r\n font-family: 'Archivo';\r\n font-weight: 300;\r\n src: local(\"url('/fonts/Archivo-Light.woff2')\");\r\n}\r\n\r\n/* Other generated font definitions... */\r\n```\r\n\r\n**Expected Behavior:**\r\nThe fonts should load correctly without any issues.\r\n\r\n**Actual Behavior:**\r\nThe generated CSS prevents the fonts from loading properly due to the incorrect syntax in the `src` property.\r\n\r\n**Nuxt Configuration:**\r\n```ts\r\nfonts: {\r\n defaults: {\r\n styles: [\"normal\"],\r\n },\r\n families: [\r\n {\r\n name: \"Archivo\",\r\n src: \"url('/fonts/Archivo-Light.woff2')\",\r\n global: true,\r\n weight: 300\r\n },\r\n {\r\n name: \"Archivo\",\r\n src: \"url('/fonts/Archivo-Regular.woff2')\",\r\n global: true,\r\n weight: 400\r\n },\r\n {\r\n name: \"Archivo\",\r\n src: \"url('/fonts/Archivo-Medium.woff2')\",\r\n global: true,\r\n weight: 500\r\n },\r\n {\r\n name: \"Archivo\",\r\n src: \"url('/fonts/Archivo-SemiBold.woff2')\",\r\n global: true,\r\n weight: 600\r\n },\r\n {\r\n name: \"Clash Display\",\r\n src: \"url('/fonts/ClashDisplay-Regular.woff2')\",\r\n global: true,\r\n weight: 400\r\n },\r\n {\r\n name: \"Clash Display\",\r\n /*\r\n Even when i following the docs with this format (no quote)\r\n src: { name: 'Other Font', src: 'url(/fonts/ClashDisplay-Medium.woff2)', weight: 'bold' }\r\n */\r\n src: \"url('/fonts/ClashDisplay-Medium.woff2')\",\r\n global: true,\r\n weight: 500\r\n },\r\n ]\r\n }\r\n```\r\n\r\n**Steps to Reproduce:**\r\n1. Install `@nuxt/font` using pnpm.\r\n2. Configure the module in `nuxt.config.js` with the provided font settings.\r\n3. Run the application.\r\n\r\n**Additional Context:**\r\n- The paths to the font files are correct, but the current usage of `local()` in the generated CSS is causing loading issues.\r\n- A potential fix could be to modify the generated CSS to remove `local()` and use `url()` directly:\r\n ```css\r\n src: url('/fonts/Archivo-Light.woff2') format('woff2');\r\n ```\r\n\r\nThank you for your assistance!\r\n@danielroe ",[],270,"fonts","closed","Problem with @nuxt/font Usage","2024-09-23T10:29:01Z","https://github.com/nuxt/fonts/issues/270",0.65949005,{"description":2061,"labels":2062,"number":2053,"owner":1988,"repository":2024,"state":2055,"title":2063,"updated_at":2064,"url":2065,"score":2059},"With UnoCSS, I could do this if I want to change the icon on hover\n\n```\n\u003Cbutton class=\"i-carbon-close-outline hover:i-carbon-close-filled\">\n \u003Cspan class=\"sr-only\">Close\u003C/span>\n\u003C/button>\n```\n\nWhat is the recommended way to do this with native CSS and NuxtIcon?\nThese variants are all a bit much and don't really work well\n\nThis avoids group, as there can already be a group class somewhere up the hierarchy.\n\n```\n\u003Cbutton>\n \u003Cdiv class=\"relative size-4\">\n \u003CUIcon name=\"i-carbon-close-outline\" class=\"absolute top-0 left-0 size-4 peer hover:hidden block\" />\n \u003CUIcon name=\"i-carbon-close-filled\" class=\"absolute top-0 left-0 size-4 peer-hover:block hidden\" />\n \u003C/div>\n\u003C/button>\n```\n\nI would also like to avoid JS (same with `:name`)\n\n```\nconst icon = ref\u003CHTMLElement | null>(null)\nconst isHovered = useElementHover(icon)\n...\n\u003Cbutton>\n \u003Cdiv ref=\"icon\" class=\"size-4\">\n \u003CUIcon v-show=\"isHovered\" name=\"i-carbon-close-outline\" class=\"size-4\" />\n \u003CUIcon v-show=\"!isHovered\" name=\"i-carbon-close-filled\" class=\"size-4\" />\n \u003C/div>\n\u003C/button>\n```",[],"[Question] Recommended way to change icon based on CSS states","2024-11-05T19:10:03Z","https://github.com/nuxt/icon/issues/270",{"description":2067,"labels":2068,"number":2015,"owner":1988,"repository":2072,"state":2055,"title":2073,"updated_at":2074,"url":2075,"score":2019},"Redirect to `/projects` public page instead\n\nBlocked by #403 ",[2069],{"name":2070,"color":2071},"enhancement","1ad6ff","nuxt.com","Beta page integration `/beta`","2022-06-07T09:41:42Z","https://github.com/nuxt/nuxt.com/issues/402",{"description":2077,"labels":2078,"number":2084,"owner":1988,"repository":2006,"state":2055,"title":2085,"updated_at":2086,"url":2087,"score":2088},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: modules, devtools, app, css, runtimeConfig, future, compatibilityDate, telemetry, eslint\n- Runtime Modules: @nuxt/ui-pro@3.0.0, @nuxt/eslint@1.0.1, @vueuse/nuxt@12.5.0, @nuxt/image@1.9.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3\n\n### Reproduction\n\nSee below\n\n### Description\n\nHey,\n\nIn UI2 when placing a UAvatar (which often is done for a user dropdown) in the DropdownMenu - clicking the Dropdown menu would trigger opening the dropdown.\nBased on UI3 docs it seems that it should work since it says Button or any other element - however this doesnt work\n\n### Additional context\n\n```ts\n\u003CUDropdownMenu :items=\"accountItems\">\n \u003CUAvatar\n v-if=\"session && session.user\"\n :src=\"session.user.image ? session.user.image : undefined\"\n :alt=\"session.user.name\"\n size=\"md\"\n />\n\u003C/UDropdownMenu>\n```\n\n### Logs\n\n```shell-script\n\n```",[2079,2080,2083],{"name":1985,"color":1986},{"name":2081,"color":2082},"needs reproduction","CB47CF",{"name":2000,"color":2001},3546,"`UAvatar` doesn't trigger `UDropdownMenu`","2025-03-28T17:43:01Z","https://github.com/nuxt/ui/issues/3546",0.68717444,["Reactive",2090],{},["Set"],["ShallowReactive",2093],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"DV8uxffJgXglNDwa81eLxEHlnGfRmvtr-pkxEIOzjUU":-1},"/nuxt/nuxt.com/297"]