\n \u003C/template>\n \u003CUButton\n label=\"Open\"\n color=\"neutral\"\n variant=\"subtle\"\n trailing-icon=\"i-lucide-chevron-down\"\n block\n />\n \u003C/UCollapsible>\n\n### Additional context\n\n_No response_",[3018,3021,3024],{"name":3019,"color":3020},"enhancement","a2eeef",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4146,"nuxt","ui","open","Can we add a reverse prop for collapsible.","2025-05-13T21:49:55Z","https://github.com/nuxt/ui/issues/4146",0.7238764,{"description":3036,"labels":3037,"number":3040,"owner":3028,"repository":3029,"state":3030,"title":3041,"updated_at":3042,"url":3043,"score":3044},"### Description\n\nCurrently, the accordion component relies solely on divs and buttons, which means it's not fully accessible to assistive technologies. \n\nTo fix this, the accordion should have an HTML structure similar to the one shown in the example below.\n\n```html\n\u003Cdiv role=\"group\" aria-labelledby=\"group-name\">\n \u003Cspan hidden id=\"group-name\">Lorem ipsum dolor sit.\u003C/span>\n \u003Cdetails name=\"accordion-name\">\n \u003Csummary>Lorem, ipsum dolor.\u003C/summary>\n \u003Cp>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n voluptatibus.\n \u003C/p>\n \u003C/details>\n \u003Cdetails name=\"accordion-name\">\n \u003Csummary>Lorem, ipsum dolor.\u003C/summary>\n \u003Cp>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n voluptatibus.\n \u003C/p>\n \u003C/details>\n \u003Cdetails name=\"accordion-name\">\n \u003Csummary>Lorem, ipsum dolor.\u003C/summary>\n \u003Cp>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n voluptatibus.\n \u003C/p>\n \u003C/details>\n\u003C/div>\n```\n\nThis accordion is now completely accessible and requires no JavaScript to function like the current accordion.\nAdditionally, this accordion will also automatically expand if a user searches for words that appear in each accordion item.\n\nThis is how the current accordion is visualized from the accessibility tree.\n\n\u003Cimg width=\"300\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c61583dd-b2a5-4e48-acaa-e0c156f0bee5\" />\n\n\nThis is how the new accordion will be visualized from the accessibility tree.\n\n\u003Cimg width=\"450\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6490bbb7-d453-4516-89a1-069ff31c88e8\" />\n\nI would love to hear your opinion on this, and I would also be glad to help out if needed.\n\n\n### Additional context\n\n_No response_",[3038,3039],{"name":3019,"color":3020},{"name":3025,"color":3026},4338,"Accordion a11y using details and summary","2025-06-14T18:17:05Z","https://github.com/nuxt/ui/issues/4338",0.7602425,{"description":3046,"labels":3047,"number":3052,"owner":3028,"repository":3029,"state":3030,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### Description\n\nHey! Thanks for trying to make nuxt/ui even more awesome.\n\nI've been struggled with adding NavigationMenu items animation on toggling collapsed of/off states. \nI'd like to make it work smoothly and keep only icons with popovers in collapsed state and show the rest only when collapsed is off. out of the box its only toggled on/off without transitions.\nI see no option to pass slot to wrap labels with vue Transition component or use Motion-vue and either css animations like data-[collaped=true]:animate.... not working well because whole inner content of nav is wrapped with \"v-if\" and switched on collapsed. \n\nIn some components data-[state] animations works well, but not in collapsed NavigationMenu. Or am I doing something wrong?\nOnly a way I see is to override whole item slot. But for now I've just get rid of NavigationMenu and made my own custom component with fancy transitions.\nPlease point me to right direction and suggest best practices, cuz I'd like to use most of components and make it work with smooth transitions/animations, but sometimes got stucked with limitations/lack of knowledge. \n\nofftop: For example, wasted many hours trying to achieve smooth slide-down transition for table expanded rows. Ended up with expanded slot with UCollapsible plus exclusive inner state for it, changed with setTimeout(() => { ... }, 300), Ugly, hucky, but it works.",[3048,3051],{"name":3049,"color":3050},"question","d876e3",{"name":3022,"color":3023},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-05-29T21:37:50Z","https://github.com/nuxt/ui/issues/4254",0.7670302,{"description":3058,"labels":3059,"number":3067,"owner":3028,"repository":3029,"state":3030,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Description\n\nWhen using the Nuxt UI Drawer, if you press and hold on the content inside the drawer (not the top drag handle), the drawer starts to \"jump\" or flicker as if it's trying to close or collapse — but it doesn't fully do so. It feels like it's responding to a drag gesture, even though you're not interacting with the handle.\n\nThis issue is also reproducible on the official ui.nuxt.com site.\n\nSteps to reproduce\n\n1. Open a Drawer that contains content (text, divs, etc.).\n\n2. Click and hold anywhere on the content (not the drag handle at the top).\n\n3. Slightly drag or move your finger/mouse.\n\n4. The drawer begins to flicker or \"jerk\" as if it's trying to collapse.\n\n5. If there's a horizontal scroll inside the drawer, its width may flicker or resize as well.\n\nExpected behavior\nThe drawer should remain stable unless the user explicitly interacts with the drag handle. Content interaction shouldn't trigger drawer behavior.\n\nAdditional context\nThis seems to happen only when dragging or holding on the content area, which suggests that the gesture might be incorrectly triggering the drawer's collapse logic.\n\nDoes anyone know how to fix or work around this?\nMaybe there's a way to prevent gesture events from propagating to the drawer when interacting with content? Or should we explicitly block drag/touch events inside the drawer body?\n\nAny insights would be appreciated!\n\n\u003Cimg width=\"448\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/886dd0aa-d153-4fae-aa82-65143d38ee59\" />",[3060,3063,3064],{"name":3061,"color":3062},"bug","d73a4a",{"name":3022,"color":3023},{"name":3065,"color":3066},"reka-ui","56d799",3947,"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.7689611,{"description":3073,"labels":3074,"number":3078,"owner":3028,"repository":3029,"state":3079,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Description\n\nIs there any chance we can get option to enable/disable collapsible when collapsed prop is true. v3.0.0-alpha.13 'fixed' NavigationMenu: disable collapsible with collapsed prop, i used nuxt ui since v3.0.0-alpha.12 and thought the collapsible when collapsed was feature.\n\n### Additional context\n\n_No response_",[3075,3076,3077],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},3353,"closed","NavigationMenu: Option to enable collapsible with collapsed prop","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3353",0.75455123,{"description":3085,"labels":3086,"number":3093,"owner":3028,"repository":3028,"state":3079,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### Environment\n\ndoc\n\n### Reproduction\n\n\r\nManual mouse selection from [Using Composables Within Plugins](https://nuxt.com/docs/guide/directory-structure/plugins#using-composables-within-plugins)\r\n\r\n```\r\nexport default defineNuxtPlugin((NuxtApp) =>\r\n const foo = useFoo()\r\n})\r\n```\r\n\n\n### Describe the bug\n\nWhen we do not click over the button `Copy to clipboard` and do a manual selection the left bracket is missing.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3087,3090],{"name":3088,"color":3089},"3.x","29bc7f",{"name":3091,"color":3092},"pending triage","E99695",15676,"docs(plugins): Typo into - Using Composables Within Plugins - Example","2023-01-19T18:24:54Z","https://github.com/nuxt/nuxt/issues/15676",0.755716,{"description":3099,"labels":3100,"number":3102,"owner":3028,"repository":3029,"state":3079,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.14.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Version\n\nv2.18.6\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/Yves852/nuxt-ui-commandpalette-hover\n\n### Description\n\nSelecting an element on click is visually inconsistent. Visually all elements are selected, independantly of `v-model=\"selected\"`.\r\n\r\nWith props `multiple` visually will select all or unselect all, independantly of `v-model=\"selected\"`.\r\n\r\nOn keyboard, using \"enter\" to select update selected correctly but component jump to first element. Same visual problems as mouse.\r\n\r\nThe prop `nullable` doesn't seem to influence the bug.\r\n\r\nRelated to https://github.com/nuxt/ui/issues/2284\r\nCould be related to [1708](https://github.com/nuxt/ui/issues/1708)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3101],{"name":3061,"color":3062},2285,"CommandPalette: visual item selection inconsistent","2024-11-19T15:26:05Z","https://github.com/nuxt/ui/issues/2285",0.7563349,{"description":3108,"labels":3109,"number":3116,"owner":3028,"repository":3029,"state":3079,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Is your feature request related to a problem? Please describe.\r\n\r\nCurrently, tables work like normal HTML tables. This means that on small screens the width will mostly/always exceed the device width, leaving the user to scroll down through the results.\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nInstead of letting the user scrolling and hide the information from other columns due to the device width, I think a good solution would be to collapse the cells vertically:\r\n\r\n- Headers would be kept as-is, allowing the user to scroll through the header columns.\r\n- The rest of the Table functionality would be kept intact.\r\n\r\n### Describe alternatives you've considered\r\n\r\nCreating my own table with using `table` CSS properties is cumbersome and using HTML's `\u003Ctable>` doesn't leave space for _creativity_.\r\n\r\nAlso, since it's not a Nuxt UI Table, all functionality is lost and must be made from scratch (or forked).\r\n\r\n### Additional context\r\n\r\nThe other approach is to create a new Data element called `List` that would work as table-like, but use `\u003Cdiv>` internally, use CSS to be presented as table-like, offer the same features (sorting, pagination, etc.) , and configure a breakpoint to transform the list into a `grid`.",[3110,3111,3114],{"name":3019,"color":3020},{"name":3112,"color":3113},"closed-by-bot","ededed",{"name":3115,"color":3113},"stale",527,"[Table] Allow to collapse a row cells vertically on a breakpoint","2025-06-18T09:06:42Z","https://github.com/nuxt/ui/issues/527",0.768618,{"description":3122,"labels":3123,"number":3129,"owner":3028,"repository":3029,"state":3079,"title":3130,"updated_at":3131,"url":3132,"score":3133},"### Description\n\nCurrently only one responsive strategy is supported - horizontal scroll, but this is not best for all cases. It is possible to hack it by custom CSS or create multiple implementations switched by media query, but usually it means very tight reliance on table markup, so it is easy to break. \n\n\nFor most cases this strategies should be enough:\n\n## Horizontal scroll with first/last cell fixed\nCurrently only strategy implemented. \nGood when user needs to focus only to some columns at a time\n\n\n\n## Prioritized columns\nGood when only 1-2 columns are important. Rest can be manually shown. Can be combined with horizontal scroll.\nEasy to implement in UI kit.\n\n\n\n## Row/cell flip and horizontal scroll\nGood when user needs to focus only to single row or compare two/three following rows.\nEasy to implement in UI kit.\n\n\n\n## Graphical chart\nGood for numbers, but usually both table and chart is required.\nNeeds custom implementation.\n\n\n\n## Table heading next to each row\nVery good when user needs to focus only to single row, but without confusion of horizontal scroll.\nEasy to implement in UI kit.\n\n\n## Change rows to carts\nSame like previos, better usability, but needs custom implementation.\n\n\n\nGood demos of different approaches:\nhttps://elvery.net/demo/responsive-tables/\n\nIt would be good if the selected strategy could be applied based on media query, because the breakpoint will depend on the use-case.\n\nWhen not implemented as a feature it would be nice to just show example how to implement it from outside..\n\n### Additional context\n\n_No response_",[3124,3125,3126,3127,3128],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},{"name":3112,"color":3113},{"name":3115,"color":3113},3742,"Alternative responsive table strategies","2025-06-18T09:01:22Z","https://github.com/nuxt/ui/issues/3742",0.7729591,{"description":3135,"labels":3136,"number":3140,"owner":3028,"repository":3029,"state":3079,"title":3141,"updated_at":3142,"url":3143,"score":3144},"### 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```",[3137,3138,3139],{"name":3061,"color":3062},{"name":3022,"color":3023},{"name":3025,"color":3026},4547,"UDashboardSidebar resize direction is inverted in RTL mode","2025-07-21T08:42:26Z","https://github.com/nuxt/ui/issues/4547",0.77324665,["Reactive",3146],{},["Set"],["ShallowReactive",3149],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffbAom1s8GqCbM6qnND1z3ng05zdNxe_GxMkGSRPRKRc":-1},"/nuxt/ui/3202"]