``` the ```type=\"text\"``` and ```\u003CUSelect />``` fields match heights, but the ```type=\"search\"``` is the outlier.\n- When NOT using ```\u003CUFormField />```, then the ```type=\"text\"``` field is the outlier. \n\n### Additional context\n\nAs rendered in Dev Tools:\n\n\n\nAfter removing ```type=\"search\"``` in dev tools.\n\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3170,3171,3172,3173,3176],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3174,"color":3175},"closed-by-bot","ededed",{"name":3177,"color":3175},"stale",4014,"closed","Input Fields on ```Safari``` has Mismatched Sizes","2025-08-20T02:08:51Z","https://github.com/nuxt/ui/issues/4014",0.65121067,{"description":3185,"labels":3186,"number":3190,"owner":3149,"repository":3150,"state":3179,"title":3191,"updated_at":3192,"url":3193,"score":3194},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.1.28\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-s2opq2ko?file=app/pages/index.vue\n\n### Description\n\nGiven this component nesting:\n\n- `UForm`\n - `UModal`\n - `UForm`\n\nThis is rendered as the following html:\n\n- `UForm` -> `form` - ✅\n - `UModal` -> `div` - ✅ (teleported to root)\n - `UForm` -> `div` - ❌ I am expecting `form`.\n\nI couldn't find a mention in the documentation that this is expected behaviour.\n\nTo reproduce:\n1. Run reproduction\n2. Click \"Open modal\" button\n3. Inspect the nested form element. It's a `div`:\n\n\nI am happy to have a crack at a PR, if you're willing to point me in the right direction 😌\n\n\n### Additional context\n\nFor context, this is our use case:\n* User fills out an onboarding form\n* One field in the onboarding form is business details\n* User has option to populate business details via business number (eg. [DUNS](https://www.dnb.com/en-us/smb/duns.html))\n* Business number field open in modal\n* User can enter business number in form in modal\n* User submits form, it populates state in parent form\n\n### Logs\n\n```shell-script\n\n```",[3187,3188,3189],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},3913,"[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.6935897,{"description":3196,"labels":3197,"number":3206,"owner":3149,"repository":3150,"state":3179,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.0\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: pnpm@10.9.0\n- Builder: -\n- User Config: modules, colorMode, image, content, plausible, devtools, hub, css, mdc, nitro, runtimeConfig, routeRules, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.0, @nuxt/content@3.5.1, @nuxthub/core@0.8.25, @nuxtjs/plausible@1.2.0, @vueuse/nuxt@13.1.0, nuxt-og-image@5.1.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n1. Open [saas-template.nuxt.dev](https://saas-template.nuxt.dev/) in Safari on macOS 18.4.\n2. Scroll to the Testimonials section.\n3. Observe that after a line break in the grid, the first card in each new row is not rendered.\n4. Open Safari’s developer tools and disable the first CSS rule:\n```\n:is(.*:will-change-transform>*) {\n will-change: transform;\n}\n```\n5. Observe that the missing cards now appear, but borders render incorrectly.\n\n\n### Description\n\nOn Safari for macOS (Version 18.4 – 20621.1.15.11.10), using @nuxt/ui components in a responsive grid layout causes elements to disappear after a line break. Specifically, the first item in each new row is not rendered when will-change: transform is applied.\n\n**🔍 Context**\nThe issue is reproducible on your official SaaS template: [saas-template.nuxt.dev](https://saas-template.nuxt.dev/), in the testimonial section. This section uses only @nuxt/ui components – no @nuxt/ui-pro components are involved. The relevant code lives in [/app/pages/index.vue](https://github.com/nuxt-ui-pro/saas/blob/main/app/pages/index.vue), lines 58–80.\n\n**📍 Suspected Source**\nIn Safari, the following rule seems to break the layout:\n\n```\n:is(.*:will-change-transform>*) {\n will-change: transform;\n}\n```\nDisabling this rule in Safari's dev tools makes the hidden items visible again. However, doing so causes border-top rendering to break.\n\n\n**📸 Screenshots**\nIssue (first items not rendered):\n\n\nAfter disabling will-change (cards reappear):\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3198,3199,3202,3203],{"name":3140,"color":3141},{"name":3200,"color":3201},"duplicate","cfd3d7",{"name":3143,"color":3144},{"name":3204,"color":3205},"pro","5BD3CB",4026,"Safari Bug: Grid layout issues with `will-change: transform`","2025-04-30T13:51:05Z","https://github.com/nuxt/ui/issues/4026",0.6988483,{"description":3212,"labels":3213,"number":3223,"owner":3149,"repository":3149,"state":3179,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Environment\r\n\r\n 2.15.8\r\n\r\n### Reproduction\r\n\r\n2.15.8\r\n\r\n### Describe the bug\r\n\r\nIn my Nuxt js app on production server i am getting issue with safari browser both on desktop and mobile view on initial load. i am using Nuxt version 2.15.8. On initial load safari browser is giving errors and not applying search on button click and returning these errors (see log) . When refresh the page it works fine, but not on the initial load. \r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\nSyntaxError: Unexpected identifier 'lValue'. Expected an opening '(' before a function's parameter list\r\nSyntaxError: Unexpected identifier 'y'. Expected an opening '(' before a function's parameter list.\r\n```\r\n",[3214,3217,3220],{"name":3215,"color":3216},"pending triage","E99695",{"name":3218,"color":3219},"2.x","d4c5f9",{"name":3221,"color":3222},"needs reproduction","FBCA04",22172,"On initial load safari browser is giving errors","2024-01-16T11:34:13Z","https://github.com/nuxt/nuxt/issues/22172",0.71099323,{"description":3229,"labels":3230,"number":3237,"owner":3149,"repository":3150,"state":3179,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Environment\n\nnot needed\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed\n\n### Description\n\nThere is no error state on the input field like color \"error\" when u wrap URadioGroup in UFormField\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3231,3232,3234,3235,3236],{"name":3140,"color":3141},{"name":3221,"color":3233},"CB47CF",{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3174,"color":3175},4025,"RedioGroup in Form","2025-05-07T02:09:29Z","https://github.com/nuxt/ui/issues/4025",0.71626484,{"description":3243,"labels":3244,"number":3250,"owner":3149,"repository":3150,"state":3179,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Environment\n\nNuxt project info: (copied to clipboard) nuxi 10:36:44\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.9.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate, experimental, nitro, sourcemap, ssr, spaLoadingTemplate, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.1.1, @nuxtjs/mdc@0.15.0, @vueuse/nuxt@13.1.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\n\nInput Menu Send an event when using @Change\n\n\n\nBut it is scheduled to send a value and this generates the error in console\n\n\n\n\n\n### Description\n\nhttps://github.com/user-attachments/assets/3fdd5798-3f77-45e0-a86b-18a2195219f2\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3245,3246,3247,3248,3249],{"name":3140,"color":3141},{"name":3221,"color":3233},{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3174,"color":3175},4103,"InputMenu Event onChange","2025-05-17T02:08:14Z","https://github.com/nuxt/ui/issues/4103",0.7196428,{"description":3256,"labels":3257,"number":3263,"owner":3149,"repository":3150,"state":3179,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Environment\n\n```\n------------------------------\n- Operating System: Darwin - macOS 15.6.1 (24G90)\n- Node Version: v22.14.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules\n- Runtime Modules: @nuxt/ui@3.3.2\n- Build Modules: -\n------------------------------\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.0.0-alpha.x\n\n### Version\n\n4.0.0-alpha.0\n\n### Reproduction\n\n1. `npm create nuxt@latest repro`, opting to also install Nuxt UI\n2. `cd repro`\n3. Edit `app.vue` as shown below \n4. `npm run dev`\n5. Visit http://localhost:3000\n\n### Description\n\nWhen server-side rendering even the most basic Nuxt UI Form component with one input, there's a hydration mismatch:\n\n`app.vue`\n```vue\n\u003Ctemplate>\n \u003Cu-app>\n \u003Cu-form :state=\"state\">\n \u003Cu-form-field label=\"Serial Number\" name=\"serialnumber\">\n \u003Cu-input v-model=\"state.serialnumber\" />\n \u003C/u-form-field>\n \u003C/u-form>\n \u003C/u-app>\n\u003C/template>\n\n\u003Cscript setup>\nconst state = reactive({\n serialnumber: ''\n})\n\u003C/script>\n```\n\nChrome devtools console:\n```\n[Vue warn]: Hydration children mismatch on \u003Cform id=\"v-0\">…\u003C/form>\u003C!--[-->\u003Cdiv class=\"text-sm\">…\u003C/div>\u003C!--]-->\u003Ctextarea name style=\"display: none;\">\u003C/textarea>\u003C/form> \nServer rendered element contains more child nodes than client vdom. \n at \u003CUForm state= {serialnumber: ''}serialnumber: \"\"[[Prototype]]: Object > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```\n\nThis occurs on Nuxt UI 3.3.2 as well as 4.0.0-alpha.0. It persists even when my form is more complex and has a Valibot schema.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3258,3259,3260,3261],{"name":3140,"color":3141},{"name":3221,"color":3233},{"name":3146,"color":3147},{"name":3262,"color":3144},"v4",4846,"Form: Hydration mismatch","2025-09-03T19:01:35Z","https://github.com/nuxt/ui/issues/4846",0.72375476,{"description":3269,"labels":3270,"number":3275,"owner":3149,"repository":3150,"state":3179,"title":3276,"updated_at":3277,"url":3278,"score":3279},"### 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```",[3271,3272,3273,3274],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3204,"color":3205},{"name":3146,"color":3147},3657,"Setting ui.colorMode = false breaks nuxi typecheck","2025-03-27T20:54:57Z","https://github.com/nuxt/ui/issues/3657",0.72381485,["Reactive",3281],{},["Set"],["ShallowReactive",3284],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmIwiM5ifTua-YeR_2h-kPI7BQS0aVtwEwX-q1Kpu-xg":-1},"/nuxt/ui/4281"]