\n \u003C/template>\n\u003C/UModal>\n```\n\n\n### Description\n\nselect menu's search input always autofocus inside modal, even when the autofocus is set to false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3039,3042,3043],{"name":3040,"color":3041},"bug","d73a4a",{"name":3023,"color":3024},{"name":3026,"color":3027},3933,"SelectMenu's autofocus doesn't work inside Modal","2025-04-19T06:22:26Z","https://github.com/nuxt/ui/issues/3933",0.7100828,{"description":3050,"labels":3051,"number":3056,"owner":3029,"repository":3030,"state":3057,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Description\n\nThe light mode defaults for Select are pretty good. Not as good for dark mode. How can I at least modify the background and text color of the popup list for dark mode? What is the recommended approach?\n\n\n",[3052,3055],{"name":3053,"color":3054},"question","d876e3",{"name":3023,"color":3024},3595,"closed","How can I improve the dark style of USelect","2025-03-18T20:19:24Z","https://github.com/nuxt/ui/issues/3595",0.6901901,{"description":3063,"labels":3064,"number":3067,"owner":3029,"repository":3030,"state":3057,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Description\n\nIt's shorter and can save traffic.\n\n### Additional context\n\n_No response_",[3065,3066],{"name":3020,"color":3021},{"name":3023,"color":3024},3250,"Use `foo-(--bar)` instead of `foo-[var(--bar)]` for tailwindcss classes","2025-02-07T10:24:17Z","https://github.com/nuxt/ui/issues/3250",0.6922043,{"description":3073,"labels":3074,"number":3080,"owner":3029,"repository":3030,"state":3057,"title":3081,"updated_at":3082,"url":3083,"score":3084},"### Description\n\nIf you use the Checkbox like Vue states (https://vuejs.org/guide/essentials/forms#checkbox), you can use multiple checkboxes and have multiple values selected.\n\nBut it only toggles them all to true or false...\n\n\u003Cimg width=\"253\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/754fc93a-b16d-475c-8b29-9896a165b5f9\" />\n\n(true here displays the \"array\" value)\n\nReka has array support\n\nhttps://reka-ui.com/docs/components/checkbox#anatomy\n\nBut it seems not implemented, right?",[3075,3078,3079],{"name":3076,"color":3077},"duplicate","cfd3d7",{"name":3053,"color":3054},{"name":3023,"color":3024},3438,"Multiple checkboxes (like Vue form binding states)","2025-03-03T17:02:02Z","https://github.com/nuxt/ui/issues/3438",0.69636315,{"description":3086,"labels":3087,"number":3090,"owner":3029,"repository":3030,"state":3057,"title":3091,"updated_at":3092,"url":3093,"score":3094},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.12.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.14.1\n- Builder: -\n- User Config: devtools, future, compatibilityDate, typescript, modules, components, ui, css, vite, formkit\n- Runtime Modules: @nuxt/icon@1.10.3, @formkit/nuxt@1.6.9, @nuxt/image@1.9.0, @vueuse/nuxt@12.5.0, @nuxt/ui@3.0.0-alpha.13\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.13\n\n### Reproduction\n\n--\n\n### Description\n\nAccording to the documentation, the Button component accepts props `active` which theoretically should force an `active` state for the button - unfortunately adding this does not change anything. \nIn addition, there is a lack of styles and support for the active button (as is the case with links) \n\nWhat I would like to achieve: \nI want the navigation menu to consist of links that visually look like buttons, in addition, I would like the button (if it is under the address to which it leads) to be active (visually distinguished from the other buttons)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3088,3089],{"name":3040,"color":3041},{"name":3023,"color":3024},3417,"No option to set button as active, no styles for active buttons","2025-03-08T21:49:08Z","https://github.com/nuxt/ui/issues/3417",0.6985358,{"description":3096,"labels":3097,"number":3101,"owner":3029,"repository":3030,"state":3057,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.0.0-beta.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nHere's a demo (https://codesandbox.io/p/devbox/nuxtui3-bug-3432-sphrpl)\n\n**index.vue**\n```\n\u003Ctemplate>\n \u003CUContainer>\n \u003CFooModal @some-action=\"fnHandleAction\" /> \u003Cbr />\n \u003CUButton @click=\"fnOpenModal\">Open FooModal from code\u003C/UButton>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n import { FooModal } from '#components';\n\n const overlay = useOverlay();\n\n const foo = overlay.create(FooModal);\n\n const fnOpenModal = async () => {\n foo.open();\n };\n\n const fnHandleAction = (action) => {\n console.log(\"Handle FooModal action: \", action);\n };\n\u003C/script>\n```\n\n**FooModal**\n```\n\u003Ctemplate>\n \u003CUModal v-model:open=\"open\" title=\"Foobar\">\n \u003CUButton label=\"Open FooModal from modal\" color=\"neutral\" variant=\"subtle\" />\n\n \u003Ctemplate #body>\n \u003CUButton @click=\"click()\" >Submit\u003C/UButton>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n const open = ref(false);\n\n const emits = defineEmits(['some-action']);\n\n const click = () => {\n console.log(\"clicked from inside the modal\");\n emits('some-action', 'closing'); //emits does not work if Modal opened using useOverlay.\n open.value = false; //closing modal does not work if Modal opened using useOverlay.\n };\n\u003C/script>\n```\n\n### Description\n\nHello Nuxt UI team,\n\nThank you for providing a high-quality UI library. I truly appreciate the effort you put into creating and maintaining it.\n\nI have encountered an issue while using `UModal` in my application. The modal is used to create and/or update database entries, and it needs to be opened in two different ways:\n\n1. Via a `UButton` that is always present on the screen (provided by the modal itself).\n2. Programmatically, through a link in a dropdown menu, using `useOverlay`.\n\nWhen the modal is opened using the first method, everything works as expected. However, when it is opened programmatically using the second method, the modal does not behave the same way. Specifically:\n\n- I am unable to trigger an `emit` to notify the parent component that the update was successful.\n- The modal does not close properly using the `open.value = false` technique.\n\nI am unsure if this behavior is intentional or a bug. I was under the impression that `UModal` and `useOverlay` should work seamlessly together and exhibit consistent behavior. Could you please confirm whether this is a valid concern?\n\nThank you for your time and attention to this matter. I look forward to your guidance.\n\n**Note**: You'll also notice that the button within the modal appears on the screen when opened using `useOverlay`. It would be helpful if it could be hidden automatically, but I believe this is something I can control easily. As such, I do not consider this to be a bug.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3098,3099,3100],{"name":3040,"color":3041},{"name":3023,"color":3024},{"name":3026,"color":3027},3432,"UModal and useOverlay compatibility Issue","2025-03-11T13:57:03Z","https://github.com/nuxt/ui/issues/3432",0.70066845,{"description":3107,"labels":3108,"number":3111,"owner":3029,"repository":3030,"state":3057,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.8\n\n### Reproduction\n\n-\n\n### Description\n\nDefault classes of container in [docs](https://ui3.nuxt.dev/components/container#theme) is:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\n**But no one of classes except `mx-auto` is not was created.**\nI change `--ui-container` variable like in [docs](https://ui3.nuxt.dev/getting-started/theme#container):\n```css\n/** app.css */\n\n@import 'tailwindcss';\n@import '@nuxt/ui';\n\n@theme {\n --container-xl: 1280px;\n}\n\n:root {\n --ui-container: var(--container-xl);\n}\n```\nAs result, container classes is `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` and still not was created, except `mx-auto`.\n\nBut if i create `app.config.ts`:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\nAll is ok, width and other classes are created and applying.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3109,3110],{"name":3040,"color":3041},{"name":3023,"color":3024},2655,"Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.701955,{"description":3117,"labels":3118,"number":3125,"owner":3029,"repository":3029,"state":3057,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v16.14.0\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.3\r\n- Builder: vite\r\n- User Config: runtimeConfig, app, modules, css, components, vite\r\n- Runtime Modules: @nuxt/devtools@0.4.6 \r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nIt doesn't reproduced on StackBlitz.\r\n\r\n```ts\r\n// /server/middleware/log.ts\r\nexport default defineEventHandler((event) => {\r\n const cRemoteAddress = event.node.req.connection.remoteAddress;\r\n const sRemoteAddress = event.node.req.socket.remoteAddress;\r\n const xForwardedFor = event.node.req.headers['x-forwarded-for'];\r\n console.log('cRemoteAddress : ', cRemoteAddress);\r\n console.log('sRemoteAddress : ', sRemoteAddress);\r\n console.log('xForwardedFor : ', xForwardedFor);\r\n console.log(\"------------------------------------------\")\r\n});\r\n```\r\n```ts\r\n// /server/api/test.ts\r\nlet count = 0;\r\nexport default defineEventHandler(() => {\r\n console.log('called!');\r\n return count++;\r\n});\r\n```\r\n```vue\r\n// app.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cbutton @click=\"() => refresh()\">test\u003C/button>\r\n \u003Cspan>{{ data }}\u003C/span>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst { data, refresh } = await useAsyncData\u003Cnumber>('useAsyncDataTest', () =>\r\n $fetch('/api/test')\r\n);\r\nconsole.log(data.value);\r\n\u003C/script>\r\n```\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nIt is a similar issue with #18609.\r\n\r\n1. Restart the `nuxt` -> open the page with `localhost:3000`\r\n\r\n\r\n2. click the button to call 'refresh' method\r\n\r\n\r\n3. refresh the page\r\n\r\n\r\n\r\nI'm not sure it happens on prod mode but in dev mode, the request header `x-forwarded-for` value is written as `::1` which is IPv6 Loopback Address.\r\nI guess it is from only client-side since it occurs when `refresh` method called, not refresh the page.\r\nI'm not sure if it is intended behavior, but I think it should be consistent regardless of the rendering side.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3119,3122],{"name":3120,"color":3121},"3.x","29bc7f",{"name":3123,"color":3124},"pending triage","E99695",22656,"In dev, request header `x-forwarded-for` value is written as `::1` from only client side data fetching","2024-06-26T11:08:14Z","https://github.com/nuxt/nuxt/issues/22656",0.70238,{"labels":3131,"number":3139,"owner":3029,"repository":3029,"state":3057,"title":3140,"updated_at":3141,"url":3142,"score":3143},[3132,3135,3136],{"name":3133,"color":3134},"types","2875C3",{"name":3120,"color":3121},{"name":3137,"color":3138},"🔨 p3-minor","FBCA04",14440,"[Typescript] useAsyncData looses the type of response, when pick option is not specified for certain types","2023-04-15T10:03:11Z","https://github.com/nuxt/nuxt/issues/14440",0.7029749,["Reactive",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdHPkz9GCxvwlqYmpYOlwJuslnvJnus71omt2U5C-Wr0":-1},"/nuxt/ui/2277"]