\n```\n\n### Description\n\nThe issue occurs both when I run the app in development mode and when I build it for production. I tested it on Safari (Mac and iPhone) and Chrome (iPhone only). On the first page load, the animation works fine, but when I reload the page, the animation stops. However, when the component where it is used updates, the icon state changes (still without animation). \n\nHere I placed some icons randomly in the pages to show the problem and when it occurs:\n\nhttps://github.com/user-attachments/assets/ca9772d8-61bb-47da-9b9e-38cbb8d5796c\n\n).",[],361,"nuxt","icon","open","Icon is not animating correctly","2025-02-23T14:06:29Z","https://github.com/nuxt/icon/issues/361",0.7443297,{"description":1993,"labels":1994,"number":1995,"owner":1985,"repository":1986,"state":1987,"title":1996,"updated_at":1997,"url":1998,"score":1999},"OS: macOS latest\r\nBrowser: chrome latest\r\nNuxt version: 3.8.1\r\nnuxt-icon version: 0.6.6\r\n@nuxtjs/storybook version: 7.0.0\r\n\r\nhow can i do?\r\n\r\nI've tried many times to disable the vite plugin, but failed to clear the error\r\n\r\n\r\n\r\n\r\n",[],128,"[BUG REPORT] An error occurred when using with nuxt-storybook.","2024-07-25T13:03:23Z","https://github.com/nuxt/icon/issues/128",0.74659455,{"description":2001,"labels":2002,"number":2009,"owner":1985,"repository":2010,"state":1987,"title":2011,"updated_at":2012,"url":2013,"score":2014},"### Description\n\nCan you add an example of a custom sorting function like in the V2 version?\n",[2003,2006],{"name":2004,"color":2005},"question","d876e3",{"name":2007,"color":2008},"v3","49DCB8",3747,"ui","Add an example of using a custom sorting function in the Table documentation.","2025-03-31T02:53:16Z","https://github.com/nuxt/ui/issues/3747",0.74924767,{"description":2016,"labels":2017,"number":2027,"owner":1985,"repository":2010,"state":1987,"title":2028,"updated_at":2029,"url":2030,"score":2031},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v22.1.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.7.0\r\n- Builder: -\r\n- User Config: extends, modules, tiptap, future, compatibilityDate, devtools, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.5.3, @nuxt/ui@2.18.4, nuxt-tiptap-editor@1.2.1\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv2.18.4\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/~/github.com/nerdnum/projectx-frontend-v3 \r\n\r\n@moshetanzer , I tagged you as you requested on Discord. Please let me know if you can access the link. It is my first time creating something on stackblitz, and I am not sure how access is managed.\r\n\r\nThe panel behaves the same on Stackblitz as on my development machine. The panel does not close.\r\n\r\n### Description\r\n\r\nI am using Nuxt-UI Pro. I provide a NavigationTree (using \"label\" and \"to\" in the links tree) to the panel slot of the Header component. When the screen with is less than 1024px, as expected, the NavigationTree is displayed when one clicks on the hamburger icon. When one clicks on one of the links in the tree, the application navigates to the new URL, but it does not close the panel as expected. One has to click on the 'x' to close the panel.\r\n\r\nThis differs from the behaviour of the Nuxt-ui documentation site (https://ui.nuxt.com/pro/components/header), which closes the panel and does the navigation. I cannot find anything about closing the panel with code in the documentation. \r\n\r\nIt behaves the same in chrome, edge and firefox.\r\n\r\nDisabling SSR does not make a difference.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2018,2021,2024],{"name":2019,"color":2020},"bug","d73a4a",{"name":2022,"color":2023},"pro","5BD3CB",{"name":2025,"color":2026},"triage","ffffff",2098,"Panel with NavigationTree does not close on Navigation","2024-09-10T10:49:56Z","https://github.com/nuxt/ui/issues/2098",0.7515044,{"description":2033,"labels":2034,"number":2038,"owner":1985,"repository":2039,"state":1987,"title":2040,"updated_at":2041,"url":2042,"score":2043},"### Environment\n\nGithub Action\n\n### Reproduction\n\nhttps://github.com/Archetipo95/gratitude-jar/actions/runs/13306127486/job/37157421796\n\n### Describe the bug\n\nIn my Github Action there is this message ` Vitest \"environmentMatchGlobs\" is deprecated. Use \"workspace\" to define different configurations instead.\n`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2035],{"name":2036,"color":2037},"pending triage","5D08F5",1123,"test-utils","`environmentMatchGlobs` API was deprecated in Vitest 3","2025-02-13T11:03:27Z","https://github.com/nuxt/test-utils/issues/1123",0.751719,{"description":2045,"labels":2046,"number":2052,"owner":1985,"repository":2010,"state":2053,"title":2054,"updated_at":2055,"url":2056,"score":2057},"### Description\n\nI'm basically trying to display the week day full name in the Calendar header slot.\n\nInstead of having `S - M - T - W - T - F -S` as week day headers, I'd like to show `Sunday - Monday - Tuesday - Wednesday - ...`\n\nThe `#week-day` slot only provides the day's letter, so there's no way to reformat it.\n\n```\n\u003Ctemplate #week-day=\"item\">\n {{ item }}\n\u003C/template>\n```\n\nIt simply displays \n```\n{\n \"day\": \"M\"\n}\n```\nWhich is not super helpful\n\nWould it be possible to have, like, the weekday number (0 to 6) ? \n\nSuggestion:\n```\n{\n \"day\": \"M\",\n \"dayNumber\": \"1\",\n}\n```\n\n### Additional context\n\n_No response_",[2047,2050,2051],{"name":2048,"color":2049},"enhancement","a2eeef",{"name":2007,"color":2008},{"name":2025,"color":2026},3714,"closed","Pass more complete data to Calendar week-day slots","2025-04-01T11:52:50Z","https://github.com/nuxt/ui/issues/3714",0.6678886,{"description":2059,"labels":2060,"number":2065,"owner":1985,"repository":2010,"state":2053,"title":2066,"updated_at":2067,"url":2068,"score":2069},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI know you guys are working hard on V3, but I really like to see this feature still in V2. We all know that not everybody will move over to V3 right away.\n\nI have to set my `strategy` to `override`, because tailwind-merge doesn't know about my custom tailwind extends. This is quite a pain in the ass, since this is causing other issues as well. Take the [Pro LandingGird](https://ui.nuxt.com/pro/components/landing-grid) as example. Classes are added to the grid items to set the right cols. By doing this with `strategy` set to `override`, all other classes will be overridden.\n\nI saw some sort of solution in [#925 ](https://github.com/nuxt/ui/issues/925#issuecomment-1857910586), but that didn't work. It's also not documented and can't find it in the module either.\n\nI know have to create my own merge config, but that will not work for Nuxt UI.\n\n\n### Additional context\n\nYou may wonder why I need this. Thats because I'm also using Tailwind Fluid, and try to replicate a design library that uses different spacings etc.\n\n",[2061,2064],{"name":2062,"color":2063},"duplicate","cfd3d7",{"name":2048,"color":2049},2893,"Extend tailwind-merge configuration","2024-12-13T15:04:57Z","https://github.com/nuxt/ui/issues/2893",0.68706167,{"description":2071,"labels":2072,"number":2073,"owner":1985,"repository":2074,"state":2053,"title":2075,"updated_at":2076,"url":2077,"score":2078},"",[],1126,"nuxt.com","[Refactor] Missing types","2023-02-15T12:31:09Z","https://github.com/nuxt/nuxt.com/issues/1126",0.71028554,{"description":2080,"labels":2081,"number":2087,"owner":1985,"repository":2010,"state":2053,"title":2088,"updated_at":2089,"url":2090,"score":2091},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.16.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.5.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/content@2.13.4, @nuxt/ui-pro@3.0.0-alpha.9, @pinia/nuxt@0.5.5, @nuxt/image@1.8.1, @nuxt/test-utils/module@3.14.4, @nuxtjs/i18n@9.1.0, @nuxtjs/seo@2.0.2, @nuxtjs/turnstile@0.9.11, nuxt-security@2.1.4, @nuxt/scripts@0.9.5\n- Build Modules: -\n------------------------------\n\n### Version\n\nv3.x\n\n### Reproduction\n\n```vue\n\u003CUButton v-show=\"true\" />\n```\n\n### Description\n\nAssuming it's because of the primitives, using v-show triggers a warning for every Nuxt UI (and Nuxt UI Pro) component, stating a runtime directive was used on a component with a non-element root node. This makes it impossible to apply conditional display unless using v-if, which doesn't cover the use cases that v-show does.\n\n### Additional context\n\n_No response_\n\n### Logs\n\nExample from my project of a button:\n```shell-script\n[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. \n at \u003CNuxtLink class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" raw=true custom=\"\" > \n at \u003CLink type=\"button\" disabled=false class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CButton type=\"button\" loading=false class=\"p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …} ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage> \n at \u003CDefault ref=Ref\u003C undefined > > \n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout> \n at \u003CToastProvider swipe-direction=\"right\" duration=5000 > \n at \u003CToaster key=0 > \n at \u003CTooltipProvider> \n at \u003CConfigProvider use-id=fn\u003Cuse-id> dir=\"ltr\" > \n at \u003CApp> \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```",[2082,2083,2084],{"name":2019,"color":2020},{"name":2007,"color":2008},{"name":2085,"color":2086},"upstream","78bddb",2866,"[v3]: v-show causes a runtime warning and breaks","2025-03-24T17:58:14Z","https://github.com/nuxt/ui/issues/2866",0.7105769,{"description":2071,"labels":2093,"number":2094,"owner":1985,"repository":2074,"state":2053,"title":2095,"updated_at":2096,"url":2097,"score":2098},[],74,"Add vue plausible","2023-02-15T12:31:42Z","https://github.com/nuxt/nuxt.com/issues/74",0.7280847,["Reactive",2100],{},["Set"],["ShallowReactive",2103],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"J5zi75ffHGEN1cSYpEAtmpjhcdBzJIa6wPzRjsYhRlA":-1},"/nuxt/ui/3772"]