\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```",[1984,1987],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"triage","ffffff",3062,"nuxt","ui","open","The input box in the modal will automatically gain focus","2025-01-10T08:36:56Z","https://github.com/nuxt/ui/issues/3062",0.6427429,{"description":1999,"labels":2000,"number":2006,"owner":1991,"repository":1992,"state":1993,"title":2007,"updated_at":2008,"url":2009,"score":2010},"### Environment\n\nnode22, nuxtui300-b3 and nuxt3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv.3.0.0-beta3\n\n### Reproduction\n\nYou can reproduce from the components page for modal and drawer. Open the drawer, the bottom drawer appears, and rest of page shifts from removal of scrollbar. Same does not occur on the modal component.\n\n### Description\n\nThe modal component properly handles overflow and prevents shifting of the main page layout when open. The drawer component does not. Would like to see the drawer prevent layout shift from the scroll bar removal, like is done on the modals. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2001,2002,2005],{"name":1985,"color":1986},{"name":2003,"color":2004},"v3","49DCB8",{"name":1988,"color":1989},3523,"Drawer shifts layout unlike modal","2025-03-23T17:40:06Z","https://github.com/nuxt/ui/issues/3523",0.6885715,{"description":2012,"labels":2013,"number":2016,"owner":1991,"repository":1992,"state":1993,"title":2017,"updated_at":2018,"url":2019,"score":2020},"",[2014,2015],{"name":1985,"color":1986},{"name":2003,"color":2004},2346,"[Popover] Hover mode not working on mobile","2024-11-06T17:02:41Z","https://github.com/nuxt/ui/issues/2346",0.6961928,{"description":2022,"labels":2023,"number":2028,"owner":1991,"repository":1992,"state":1993,"title":2029,"updated_at":2030,"url":2031,"score":2032},"### Description\n\nIn the vertical pill variant I want the background of the active item to be white. It's not clear how to achieve this through the `ui` prop\n\n\n\n```\n\u003CUNavigationMenu\n orientation=\"vertical\"\n variant=\"pill\"\n :items=\"items\"\n\n :ui=\"{\n variants: {\n compoundVariants: [\n {\n variant: 'pill',\n active: true,\n highlight: false,\n class: {\n link: 'before:bg-white' // tried this but it's not working\n }\n }\n ]\n }\n }\"\n/>\n```",[2024,2027],{"name":2025,"color":2026},"question","d876e3",{"name":2003,"color":2004},3517,"How To Style NavigationMenu items","2025-03-14T13:01:49Z","https://github.com/nuxt/ui/issues/3517",0.7057983,{"description":2034,"labels":2035,"number":2038,"owner":1991,"repository":1992,"state":2039,"title":2040,"updated_at":2041,"url":2042,"score":2043},"### 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```",[2036,2037],{"name":1985,"color":1986},{"name":2003,"color":2004},2655,"closed","Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.651144,{"description":2045,"labels":2046,"number":2050,"owner":1991,"repository":1991,"state":2039,"title":2051,"updated_at":2052,"url":2053,"score":2054},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.9.0`\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: `pnpm@9.3.0`\r\n- Builder: `-`\r\n- User Config: `compatibilityDate`, `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-yd89uq?file=app.vue,components%2FFoo.vue,components%2FBar.vue\n\n### Describe the bug\n\nI've noticed a few issues with component props after updating from Nuxt 3.12.3 to the latest version. I suspect it might be caused by enabling reactive props destructuring by default in Vue 3.5.\r\n\r\n1. setting default values for `boolean` props doesn't work (though it does for `string` props, for example)\r\n```ts\r\nconst {\r\n foo = true, // will be `false` if not provided\r\n bar = 'something', // will be `'something'` if not provided\r\n} = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n2. seemingly, all prop reactivity is lost when using reactive destructure (when changing the prop values, they do not update in the component)\r\n```ts\r\n// It works correctly if defined using the \"old\" way, though\r\nconst props = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n\r\n---\r\n\r\nThe behaviour was the same whether or not I had `vite.vue.script.propsDestructure` set to `true` in `nuxt.config` (though it should not be relevant now that it should be enabled by default?)\n\n### Additional context\n\nI tested it in vue SFC playground and it worked correctly there, so that's why I assume this might be a Nuxt issue\r\n\r\nhttps://play.vuejs.org/#eNqNUlFLwzAQ/ishLyqMFpm+zG6iMkEfdKiPAanttWamuZCkdTD6372kdA5x4tvd9313/fJdt/zKmKRrgc945gorjWcOfGsWQsvGoPXsBhvDKosNO0rS0AT50YXQQmfpMEJiajw0RuUeqGMsK2UXCyrjhnSA0wHP0j01n3DvCtSVrJO1Q01etkEseEGTUoF9NF6idoLPWGQClyuFn/cR87aFyYgX71B8/IKv3SZggq8sOLAdCL7jfG5r8AO9fH6ADdU7ssGyVaT+g3wCh6oNHgfZdatLsr2ni27vYqJS1y9uufGg3fioYDQo+6gXnBIOoR16+rfdaXIW54TuKcXxOj+PyVSu6znN0Zp4Kwrb+WFfhcjmY1I9lSVUUsPKonHZqLicsTdEBTnN9ovjk/8f/xaRjG/jZ3qyefgXeO3AhkDI/DQ5T055/wUEUtzf\n\n### Logs\n\n_No response_",[2047],{"name":2048,"color":2049},"pending triage","E99695",28845,"Issues with prop reactivity & default values when using reactive props destructure","2024-09-05T10:11:34Z","https://github.com/nuxt/nuxt/issues/28845",0.67825645,{"description":2056,"labels":2057,"number":2063,"owner":1991,"repository":1992,"state":2039,"title":2064,"updated_at":2065,"url":2066,"score":2067},"### 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?",[2058,2061,2062],{"name":2059,"color":2060},"duplicate","cfd3d7",{"name":2025,"color":2026},{"name":2003,"color":2004},3438,"Multiple checkboxes (like Vue form binding states)","2025-03-03T17:02:02Z","https://github.com/nuxt/ui/issues/3438",0.69163746,{"description":2069,"labels":2070,"number":2073,"owner":1991,"repository":1992,"state":2039,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.14.0\n- Nuxt Version: 3.15.1\n- CLI Version: 3.19.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.3\n- Builder: -\n- User Config: compatibilityDate, future, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.10\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/zhcndoc/zhcndoc\n\n### Description\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n WARN [vite:css][postcss] Lexical error on line 1: Unrecognized text. 15:18:30\n\n Erroneous area:\n1: infinity * 1px\n^..^\n1117| }\n1118| .rounded-full {\n1119| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n1120| }\n1121| .rounded-s {\n```",[2071,2072],{"name":1985,"color":1986},{"name":2003,"color":2004},3063,"Postcss warning appears when building","2025-01-14T04:16:48Z","https://github.com/nuxt/ui/issues/3063",0.6932205,{"description":2079,"labels":2080,"number":2083,"owner":1991,"repository":1992,"state":2039,"title":2084,"updated_at":2085,"url":2086,"score":2087},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.2.2\n- Builder: -\n- User Config: compatibilityDate, devtools, runtimeConfig, nitro, routeRules, modules, supabase, site, feed, sitemap, robots, schemaOrg, image\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.12, @nuxtjs/supabase@1.4.6, @vueuse/nuxt@12.5.0, @nuxt/image@1.9.0, @nuxthub/core@0.8.15, @nuxtjs/sitemap@7.2.4, nuxt-module-feed@1.1.4, @nuxtjs/robots@5.2.2, nuxt-schema-org@4.1.1, nuxt-link-checker@4.1.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\n```vue\n\u003CUModal\n :ui=\"{\n title: 'sr-only',\n description: 'sr-only',\n }\"\n :title=\"will not work\"\n :description=\"will not work\">\n \u003Ctemplate #content>\n \u003Cp>anything\u003C/p>\n \u003C/template>\n\u003C/UModal>\n```\n\n### Description\n\nNot having a title or description set for the modal will throw the following RekaUI error:\n```\nPostingCard.vue:76 Warning: `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.\n\nIf you want to hide the `DialogTitle`, you can wrap it with our VisuallyHidden component.\n\nWarning: Missing `Description` or `aria-describedby=\"undefined\"` for DialogContent.\n```\n\nThis is expected.\n\nThe problem is when you use the `content` slot of `UModal`, you can't set the title or description, either through props or by using the `title` or `description` slot.\n\nIt would be nice if setting the title and description slots/props while using the content still applies them but automatically applies `sr-only`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2081,2082],{"name":1985,"color":1986},{"name":2003,"color":2004},3267,"Modal content slot causes accessibility issues","2025-02-21T10:49:04Z","https://github.com/nuxt/ui/issues/3267",0.69498926,{"description":2089,"labels":2090,"number":2095,"owner":1991,"repository":1992,"state":2039,"title":2096,"updated_at":2097,"url":2098,"score":2099},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nAs of now, in Nuxt UI v3.0.0-alpha.x, the `SIDE_OPTIONS` constant is defined as follows:\n\n``` ts\nconst SIDE_OPTIONS: [\"top\", \"right\", \"bottom\", \"left\"];\n```\n\nThe current four directions cannot meet the practical development needs. For example, when there is a button on the far right of the screen to open a dropdown menu, it cannot automatically appear as 'bottom-right'.Tooltips, dropdown menus, or popovers may require positioning beyond the basic cardinal directions to avoid obscuring content or to better fit within the viewport.\n\n#### Proposed Enhancement\n\nI propose to extend the SIDE_OPTIONS constant to include combinations of the cardinal directions to allow for greater flexibility and finer control over positioning. The updated SIDE_OPTIONS would be:\n\n``` ts\nconst SIDE_OPTIONS = [\n \"top\", \"right\", \"bottom\", \"left\",\n \"bottom-left\", \"bottom-right\",\n \"left-top\", \"left-bottom\",\n \"top-left\", \"top-right\",\n \"right-top\", \"right-bottom\"\n];\n```\n\n\n### Additional context\n\n| | |\n| ----------- | ----------- |\n|  | |\n\n\n",[2091,2094],{"name":2092,"color":2093},"enhancement","a2eeef",{"name":2003,"color":2004},2712,"Side needs more direction","2024-11-20T19:59:29Z","https://github.com/nuxt/ui/issues/2712",0.697691,["Reactive",2101],{},["Set"],["ShallowReactive",2104],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"GMi8X_rFsYH0C-M3vDnAPH0DCJTVNEX0oZlkvumrsBw":-1},"/nuxt/ui/3341"]