",[3196,3199,3202],{"name":3197,"color":3198},"bug","d73a4a",{"name":3200,"color":3201},"v3","49DCB8",{"name":3203,"color":3204},"reka-ui","56d799",3947,"nuxt","ui","open","Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)","2025-06-05T10:38:05Z","https://github.com/nuxt/ui/issues/3947",0.65942645,{"description":3214,"labels":3215,"number":3222,"owner":3206,"repository":3207,"state":3208,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.17.1\n- Nuxt Version: 4.1.1\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@10.13.1\n- Builder: -\n- User Config: modules, devtools, app, css, site, compatibilityDate, nitro, eslint, schemaOrg, scripts, supabase\n- Runtime Modules: @nuxt/eslint@1.5.2, @nuxtjs/seo@3.1.0, @nuxt/ui@4.0.1, @nuxt/image@1.11.0, @nuxt/scripts@0.13.0, motion-v/nuxt@1.7.0, @nuxtjs/supabase@2.0.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/new-cloud-r8s3yz?workspaceId=ws_5DYg3LqMrjTKCvwSfjZf5g\n\n### Description\n\n`\u003CUChangelogVersions>` has two motion-related issues caused by improper `useScroll` targeting.\n\n### 1. Motion applied to the entire page: \nThe motion animation (fade/translate) is applied globally to the window scroll instead of being scoped to the component container.\n\nAs a result, the entire page animates when scrolling, not just the changelog items.\n\n### 2. Incorrect behavior inside custom scroll containers\n\nWhen the component is rendered inside a scrollable container (not the main window), the motion does not track or trigger correctly.\n\n\n### Proposition: \n\nInstead of just being a boolean, add the possibility to pass [`UseScrollOptions`](https://motion.dev/docs/vue-use-scroll#api) similar to `indicatorMotion` prop behavior : \n```\n/**\n * Display an indicator bar on the left.\n * @defaultValue true\n * @see https://motion.dev/docs/vue-use-scroll#api\n */\n indicator?: boolean | UseScrollOptions\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3216,3217,3220],{"name":3197,"color":3198},{"name":3218,"color":3219},"triage","ffffff",{"name":3221,"color":3201},"v4",5256,"[ChangelogVersions] Indicator motion not scoped and breaks with custom scroll containers","2025-10-18T20:43:41Z","https://github.com/nuxt/ui/issues/5256",0.69853294,{"description":3228,"labels":3229,"number":3232,"owner":3206,"repository":3207,"state":3208,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `4.1.2`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.6`\n- Package Manager: `pnpm@10.14.0`\n- Builder: `-`\n- User Config: `ssr`, `devtools`, `modules`, `css`, `app`, `runtimeConfig`, `i18n`, `icon`, `devServer`, `colorMode`, `ignore`, `compatibilityDate`, `future`, `typescript`, `routeRules`, `seo`, `site`, `schemaOrg`, `gtag`\n- Runtime Modules: `@nuxt/ui@4.0.0`, `@pinia/nuxt@0.11.2`, `@nuxt/eslint@1.7.1`, `@nuxtjs/i18n@10.0.3`, `@nuxtjs/device@3.2.4`, `@nuxt/image@1.11.0`, `@sentry/nuxt/module@10.9.0`, `@nuxtjs/seo@3.2.2`, `nuxt-gtag@4.1.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/old-fast-f9s7sf?workspaceId=ws_HRdJSCvnKee8VgKrfgAKeV\n\n### Description\n\n`\u003CUPopover mode=\"hover\">` should only open when hovered not clicked, now clicking is triggering this too. If it's intentional please I need maybe \"only-hover\" mode. Also popovers mode=\"hover\" isn't working in mobile (touch)\n \nhttps://github.com/user-attachments/assets/fdba6973-e364-4060-b40b-5f427ff2b5c8\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3230,3231],{"name":3197,"color":3198},{"name":3218,"color":3219},5289,"UPopover mode hover shouldn't trigger click","2025-10-22T13:09:19Z","https://github.com/nuxt/ui/issues/5289",0.7066083,{"description":3238,"labels":3239,"number":3243,"owner":3206,"repository":3207,"state":3244,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: pnpm@9.15.5\n- Builder: -\n- User Config: modules, security, routeRules, ui, colorMode, icon, app, devtools, css, vite, content, image, ssr, future, compatibilityDate, components\n- Runtime Modules: @nuxt/content@3.5.1, @nuxt/ui@3.1.0, @nuxt/image@1.10.0, @pinia/nuxt@0.10.1, nuxt-security@2.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\nNuxt UI\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nYou can actually see the issue right on Nuxt UI's demo page:\nhttps://ui.nuxt.com/components/drawer#inset\n\nAs an inset drawer closes, watch the viewport edge and notice the drawer doesn't fully animate offscreen.\n\nAfter the drawer close animation completes, the drawer is still actually visible for a moment before finally disappearing. It animated fully, yes, but the animation doesn't take into account the extra distance needed because of `inset`. I think it's easy to miss this subtle thing on the demos page, however in my custom theme, the background and drawer have high-contrast, so the jankyness is noticeable.\n\n### Description\n\nGiven a Nuxt UI drawer instance with the `inset` option...\n\n**Issue:** \nWhen closing an inset drawer, the drawer does not animate fully off the screen. Instead, the drawer animates to zero **but is still visible for a moment before ultimately disappearing**.\n\n```\n\u003CUDrawer id=\"myDrawer\"\nv-model:open=\"store.myDrawer\"\ndirection=\"top\"\ninset\nclass=\"myDrawer\">\n \u003Ctemplate #content>\n \u003Cdiv class=\"p-4 min-h-32 flex flex-col gap-4 overflow-hidden\">\n \u003CSomeComponent />\n \u003C/div>\n \u003C/template>\n\u003C/UDrawer>\n```\n\n**Current workaround:**\n\nThis solves it for me, however doesn't take into account other cases.\n\nFor the closed state of my drawer-with-inset, I force `top` to `0`.\n```\n.myDrawer[data-state='closed'] {\n top: calc(var(--spacing) * 0);\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3240,3241,3242],{"name":3197,"color":3198},{"name":3200,"color":3201},{"name":3218,"color":3219},3985,"closed","Drawer-with-inset doesn't fully animate to edge of viewport","2025-08-11T12:45:02Z","https://github.com/nuxt/ui/issues/3985",0.63429433,{"description":3250,"labels":3251,"number":3254,"owner":3206,"repository":3207,"state":3244,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.6\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modest-agnesi-drlrh4?file=%2Fapp%2Fpages%2Findex.vue%3A24%2C24\n\n### Description\n\nWhen I close a `UDrawer` that I opened via an action from a `UDropdownMenu`, the style on my \u003Cbody> tag still contains `overflow: hidden` and `user-select: none`, which prevents interaction with the page.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3252,3253],{"name":3197,"color":3198},{"name":3200,"color":3201},3406,"User interaction lock after a Drawer/DropdownMenu","2025-02-27T20:57:27Z","https://github.com/nuxt/ui/issues/3406",0.666951,{"description":3260,"labels":3261,"number":3270,"owner":3206,"repository":3207,"state":3244,"title":3271,"updated_at":3272,"url":3273,"score":3274},"### 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```",[3262,3263,3264,3265,3268],{"name":3197,"color":3198},{"name":3200,"color":3201},{"name":3218,"color":3219},{"name":3266,"color":3267},"closed-by-bot","ededed",{"name":3269,"color":3267},"stale",3523,"Drawer shifts layout unlike modal","2025-06-18T09:01:40Z","https://github.com/nuxt/ui/issues/3523",0.68152004,{"description":3276,"labels":3277,"number":3283,"owner":3206,"repository":3207,"state":3244,"title":3284,"updated_at":3285,"url":3286,"score":3287},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.17.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.2.0, @nuxt/content@3.4.0, @vueuse/nuxt@13.0.0, @nuxt/image@1.10.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nTried to setup repo, but codesandbox was giving errors and stalling out.\n\n\n\n### Description\n\nWhen using the UDrawer component with `:dismissible=\"false\"` and `:modal=\"false\"`, the drawer still closes when users interact with elements outside the drawer. This prevents users from interacting with the form or other page elements while the drawer is open.\n\n**Steps to Reproduce**\nCreate a UDrawer component with :dismissible=\"false\"\nSet the drawer to be open\nTry to interact with form elements or other content outside the drawer\n\n### Additional context\n\nExpected Behavior\nAccording to the documentation at https://ui.nuxt.com/components/drawer#prevent-closing, setting dismissible=\"false\" should prevent the drawer from closing when clicking outside or pressing escape.\nActual Behavior\nThe drawer still closes when clicking outside, making it impossible to interact with form elements on the page while the drawer is open.\n\n```\n\u003CUDrawer\n v-model:open=\"showMobileResults\"\n direction=\"bottom\"\n :modal=\"false\"\n :handle=\"false\"\n :overlay=\"false\"\n dismissible=\"false\"\n title=\"Biological Age Results\"\n description=\"View your biological age and longevity estimates\"\n>\n \u003C!-- Drawer content here -->\n\u003C/UDrawer>\n```\n\n### Logs\n\n```shell-script\n\n```",[3278,3279,3282],{"name":3197,"color":3198},{"name":3280,"color":3281},"needs reproduction","CB47CF",{"name":3200,"color":3201},3727,"UDrawer ignores :dismissible=\"false\" prop and still closes when interacting outside","2025-06-12T15:30:30Z","https://github.com/nuxt/ui/issues/3727",0.6819185,{"description":3289,"labels":3290,"number":3294,"owner":3206,"repository":3207,"state":3244,"title":3295,"updated_at":3296,"url":3297,"score":3298},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.26.2 \n- Nitro Version: 2.12.3 \n- Package Manager: npm@11.2.0 \n- Builder: - \n- User Config: compatibilityDate, ssr, routeRules, experimental, modules, alias, imports, runtimeConfig, css, app, nodemailer, auth, headlessui, eslint, nitro, image, ui, fonts, icon, pinia, sitemap, colorMode, $production,\n $development, i18n, vite \n- Runtime Modules: nuxt-security@2.2.0, @nuxtjs/color-mode@3.5.2, @nuxt/ui-pro@3.2.0, @nuxtjs/sitemap@7.4.3, @nuxtjs/i18n@9.5.6, @nuxtjs/robots@5.4.0, @nuxt/devtools@2.6.2, @pinia/nuxt@0.9.0, @nuxtjs/fontaine@0.4.4, @nuxt/scrip\nts@0.10.5, @vueuse/nuxt@12.8.2, nuxt-mongoose@1.0.6, @sidebase/nuxt-auth@0.10.1, @nuxt/icon@1.15.0, @nuxt/fonts@0.10.3, nuxt-headlessui@1.2.0, nuxt-nodemailer@1.1.2, @nuxt/test-utils/module@3.19.2, @nuxtjs/leaflet@1.2.6, @nuxtjs/tailwindcss@7.0.0-beta.0, @nuxt/image@1.10.0 \n- Build Modules: - \n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/unruffled-frog-pz7l74\n\n### Description\n\nHi,\nWhen using the UDashboardSidebar component from @nuxt/ui-pro in a layout with RTL (right-to-left) direction, the sidebar resizing behavior is incorrect.\n\nWhen dragging the resizer handle:\n\n Moving the mouse to the right expands (makes wider) the sidebar (but it should shrink in RTL).\n\n Moving the mouse to the left shrinks (makes narrower) the sidebar (but it should expand in RTL).\n\n\nExpected Behavior:\n\nIn RTL mode:\n\n Dragging right should decrease sidebar width.\n\n Dragging left should increase sidebar width.\n\nThis should match the natural directionality of RTL layouts.\n\n\nPrevious report:\n\nThis issue was previously reported in [#4293](https://github.com/nuxt/ui/issues/4293), but it still persists.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3291,3292,3293],{"name":3197,"color":3198},{"name":3200,"color":3201},{"name":3218,"color":3219},4547,"UDashboardSidebar resize direction is inverted in RTL mode","2025-07-21T08:42:26Z","https://github.com/nuxt/ui/issues/4547",0.6869875,{"description":3300,"labels":3301,"number":3305,"owner":3206,"repository":3207,"state":3244,"title":3306,"updated_at":3307,"url":3308,"score":3309},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v23.6.1`\n- Nuxt Version: `4.1.2`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.6`\n- Package Manager: `pnpm@10.12.4`\n- Builder: `-`\n- User Config: `modules`, `experimental`, `content`, `css`, `devtools`, `typescript`, `vue`, `compatibilityDate`, `nitro`, `i18n`, `zodI18n`, `sanctum`, `vite`, `turnstile`\n- Runtime Modules: `@nuxt/ui@4.0.0`, `@vueuse/nuxt@12.8.2`, `@nuxt/image@1.11.0`, `@nuxt/content@3.7.1`, `nuxt-og-image@5.1.11`, `nuxt-svgo@4.2.6`, `@pinia/nuxt@0.11.2`, `nuxt-zod-i18n@1.12.1`, `@nuxtjs/i18n@9.5.6`, `nuxt-auth-sanctum@1.3.0`, `@compodium/nuxt@0.1.0-beta.12`, `@nuxt/scripts@0.11.6`, `@nuxtjs/turnstile@1.1.0`, `nuxt-sanctum-precognition@0.0.8`, `@pinia/colada-nuxt@0.2.3`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.00\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/serverless-frost-x9qfym\n\n### Description\n\nI've encountered a bug regarding the interaction between `UDropdownMenu` and a non-modal `UDrawer`.\n\nWhen the `v-model:open` of a `UDrawer` (configured with `:modal=\"false\"`) is set to `true` from a `UDropdownMenu` item's `onSelect` event, the drawer appears for a fraction of a second and then immediately closes.\n\nThis issue does not occur if the drawer is triggered from a standard `UButton` outside the dropdown, which suggests a conflict between the two components.\n\nPlease see the reproduction.",[3302,3303,3304],{"name":3197,"color":3198},{"name":3218,"color":3219},{"name":3221,"color":3201},5105,"`UDrawer :modal=\"false\"` closes immediately when triggered from a `UDropdownMenu`","2025-09-29T16:07:19Z","https://github.com/nuxt/ui/issues/5105",0.68778145,{"description":3311,"labels":3312,"number":3318,"owner":3206,"repository":3207,"state":3244,"title":3319,"updated_at":3320,"url":3321,"score":3322},"### Environment\n\n- Operating System: Darwin\n- Node Version: v21.7.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.5.0\n- Builder: -\n- User Config: extends, components, devtools, googleFonts, modules, runtimeConfig, compatibilityDate, typescript, build, vite, devServer, app, colorMode, spaLoadingTemplate, bugsnag\n- Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxt/ui@3.0.2, nuxt-bugsnag@8.4.0, @nuxt/devtools@2.3.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\n\n\n### Description\n\nI try to make a design with position absolute. It works correctly when I use `solid` colors. But if I use `soft` or `subtle` variants it displays the background line anyway. Also, the color varies depending on the background color.\n\nIs there a way to make it work with those colors? \n\nMaybe the solution is to create variables for those colors instead of using opacity.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3313,3314,3315,3316,3317],{"name":3197,"color":3198},{"name":3200,"color":3201},{"name":3218,"color":3219},{"name":3266,"color":3267},{"name":3269,"color":3267},3863,"Button color may not work properly in position absolute","2025-06-18T09:01:10Z","https://github.com/nuxt/ui/issues/3863",0.689966,["Reactive",3324],{},["Set"],["ShallowReactive",3327],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fUGUT1ry2owVKs8z3EqvOlbO5uRMchuFFnI7V3WNw3po":-1},"/nuxt/ui/5196"]