` for the rest of the content, which could be either 1 or more DashboardPanels.\n\nThanks in advance!",[2001,2004,2005],{"name":2002,"color":2003},"question","d876e3",{"name":1988,"color":1989},{"name":2006,"color":2007},"pro","5BD3CB",3627,"How to add a persistent Navbar on top of all DashboardPanels inside of a DashboardGroup?","2025-03-19T20:53:14Z","https://github.com/nuxt/ui/issues/3627",0.717981,{"description":2014,"labels":2015,"number":2018,"owner":1991,"repository":1992,"state":1993,"title":2019,"updated_at":2020,"url":2021,"score":2022},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nHello,\n\nHow to access [Neutral Palette](https://ui3.nuxt.dev/getting-started/theme#neutral-palette) classes ? (text-ui-dimmed, bg-ui-accented ...)\nTailwind CSS IntelliSense doesn't offer them, are they generated by default?\nIf not, What is the easiest way to do this?\n\nThanks in advance",[2016,2017],{"name":2002,"color":2003},{"name":1988,"color":1989},2843,"Neutral Palette classes","2024-12-09T11:12:10Z","https://github.com/nuxt/ui/issues/2843",0.72659093,{"description":2024,"labels":2025,"number":2030,"owner":1991,"repository":1992,"state":1993,"title":2031,"updated_at":2032,"url":2033,"score":2034},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nI find that creating an input password with toggle button to show the text felt so verbose. How about adding a default toggle button when the input has password type since it was a good practice for accessibility?\n\n\n\n### Additional context\n\n```html\n\u003C!-- this is easier and shorter to write -->\n\u003CUInput type=\"password\" />\n\n\u003C!-- if we want to hide, we can let slot do the work, or maybe consider adding a properties to hide it. It's more shorter -->\n\u003CUInput type=\"password\">\n \u003Ctemplate #trailing>\u003C/template>\n\u003C/UInput>\n\n\u003C!-- compared to what we must do now as the documentation say -->\n\u003Ctemplate>\n \u003CUInput\n v-model=\"password\"\n placeholder=\"Password\"\n :type=\"show ? 'text' : 'password'\"\n :ui=\"{ trailing: 'pe-1' }\"\n >\n \u003Ctemplate #trailing>\n \u003CUButton\n color=\"neutral\"\n variant=\"link\"\n size=\"sm\"\n :icon=\"show ? 'i-lucide-eye-off' : 'i-lucide-eye'\"\n aria-label=\"show ? 'Hide password' : 'Show password'\"\n :aria-pressed=\"show\"\n aria-controls=\"password\"\n @click=\"show = !show\"\n />\n \u003C/template>\n \u003C/UInput>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst show = ref(false)\nconst password = ref('password')\n\u003C/script>\n```",[2026,2029],{"name":2027,"color":2028},"enhancement","a2eeef",{"name":1988,"color":1989},2806,"input: add toggle password button automatically for type password","2024-12-02T17:21:42Z","https://github.com/nuxt/ui/issues/2806",0.7336242,{"labels":2036,"number":2043,"owner":1991,"repository":1991,"state":1993,"title":2044,"updated_at":2045,"url":2046,"score":2047},[2037,2040],{"name":2038,"color":2039},"pending triage","E99695",{"name":2041,"color":2042},"2.x","d4c5f9",10281,"nuxtServerInit and static, rate limiting","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10281",0.7345586,{"description":2049,"labels":2050,"number":2055,"owner":1991,"repository":1992,"state":1993,"title":2056,"updated_at":2057,"url":2058,"score":2059},"### Description\n\nHi,\r\n\r\nThe Icon component doesn't have a UI prop like most components. This prevent users from applying a CSS class to all instances of Icon. IMO, this is a really small harmless change, that would align Icons with the rest of the library.\r\n\r\nAs of v2.18.4, this is true for:\r\n- [ ] Form\r\n- [ ] Icon\r\n- [ ] Link\r\n\r\nAs a workaround, it's always possible to create a wrapper component.\r\n\r\n```vue\r\n\u003Cscript setup>\r\ndefineProps(['name', 'ui']);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cu-icon :name=\"name\" :class=\"ui.base\" />\r\n\u003C/template>\r\n``` \r\n\r\nBy the way, [the doc state](https://ui.nuxt.com/getting-started/theming#ui-prop) that \"Each component has a ui prop\". Which is not true then.\n\n### Additional context\n\n_No response_",[2051,2052],{"name":2027,"color":2028},{"name":2053,"color":2054},"triage","ffffff",2094,"Some component doesn't have a UI prop","2025-03-17T14:27:40Z","https://github.com/nuxt/ui/issues/2094",0.7346928,{"description":2061,"labels":2062,"number":2064,"owner":1991,"repository":1992,"state":1993,"title":2065,"updated_at":2066,"url":2067,"score":2068},"### Description\n\nWe have private modules using @nuxt/ui. \r\nTheir module setup uses nuxt.hook to add files to tailwindcss.config. \r\nwith... \r\n```\r\n// nuxt.config.ts\r\ntailwindcss: {\r\n exposeConfig: true,\r\n}\r\n```\r\nWe can see at runtime our private modules were included in the tailwind content.\r\nThis is also confirmed with logs during the build and nuxt.hook\r\n\r\nEverything works as expected when building locally...\r\n``` bash\r\nnpm run dev\r\n```\r\nor\r\n``` bash\r\nnuxt build\r\n```\r\nHowever when building for production the resulting client bundle is missing any style used in a module. \r\nin other words, anything from tailwindcss.content with `node_modules` in the path was skipped.\r\n\r\nMy modules tailwind styles don't work in production.\r\n\r\nHow can I debug this?",[2063],{"name":2002,"color":2003},2253,"Expected styles from a private modules are missing in the production client bundle","2024-12-09T11:19:56Z","https://github.com/nuxt/ui/issues/2253",0.735958,{"description":2070,"labels":2071,"number":2073,"owner":1991,"repository":2074,"state":1993,"title":2075,"updated_at":2076,"url":2077,"score":2078},"A few days ago, I installed version nuxt-ui:3.0.0-alpha.6, and when I tried to connect my provider as described in the Nuxt Fonts documentation, I encountered build errors. \n\nI conducted an experiment on a clean project and got the same result. Where is my mistake? Or is it a documentation mistake?\n\n\n\nnuxt.config.ts\n\n```\nexport default defineNuxtConfig({\n compatibilityDate: '2024-04-03',\n devtools: { enabled: true },\n modules: [\n '@nuxt/ui',\n ],\n fonts: {\n experimental: {\n // // Required for TailwindCSS v4. You can enable support for processing CSS variables for font family names. This may have a performance impact.\n processCSSVariables: true,\n },\n providers: {\n // You can pass a new custom provider - see more in the providers documentation\n // for what this file should look like\n custom: '~/providers/custom',\n },\n },\n})\n```\ncustom.ts\n\nimport { defineFontProvider } from 'unifont';\n\n```\nexport default defineFontProvider('custom', async (options) => {\n // do some setup\n return {\n async resolveFont (fontFamily, options) {\n \n if (fontFamily === 'TT Fors') {\n return {\n fonts: [\n {\n src: [\n { url: '//my-cdn.cloudfront.net/fonts/TTFors/TTFors-Medium.woff2', format: 'woff2' },\n ],\n weight: 500,\n style: 'normal',\n }\n ]\n }\n }\n }\n }\n })\n```\n\npackage.json\n\n```\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.6\",\n \"nuxt\": \"^3.13.0\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n }\n}\n```\n\n",[2072],{"name":1985,"color":1986},342,"fonts","Custom provider errors on nuxt-ui:3.0.0-alpha.6","2024-10-23T11:46:10Z","https://github.com/nuxt/fonts/issues/342",0.73600197,{"description":2080,"labels":2081,"number":2088,"owner":1991,"repository":2089,"state":1993,"title":2090,"updated_at":2091,"url":2092,"score":2093},"- Nuxt: 3.1.1\r\n- nuxt-vitest: 0.6.8\r\n\r\nI followed the documentation to test the library.\r\nI created a test file that mocks 'useStorage'.\r\nWhen I run the tests, I get an error:\r\n\r\n`Error: Cannot find import \"useStorage\" to mock`\r\n\r\nDo I need to configure anything else?\r\n\r\nHere is my example on Stackblitz:\\\r\nhttps://stackblitz.com/edit/nuxt-starter-dllgrr?file=tests%2Fmytest.nuxt.test.ts\r\n\r\nCould you provide an example that works on Stackblitz?",[2082,2085],{"name":2083,"color":2084},"documentation","0075ca",{"name":2086,"color":2087},"vitest-environment","b60205",506,"test-utils","Provide a simple working example from Stackblitz","2023-12-02T00:22:10Z","https://github.com/nuxt/test-utils/issues/506",0.7371637,{"description":2095,"labels":2096,"number":2101,"owner":1991,"repository":1992,"state":1993,"title":2102,"updated_at":2103,"url":2104,"score":2105},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.12.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/devtools@1.6.4, @nuxt/ui@2.20.0, @vueuse/nuxt@12.2.0, @vueuse/motion/nuxt@2.2.6, @nuxtjs/device@3.2.4, @nuxt/image@1.8.1, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @vite-pwa/nuxt@0.10.6, nuxt-snackbar@1.1.2, nuxt-gtag@3.0.2, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n no reproduction\n\n### Description\n\nI notice there's a syntax error in the code;\nThe error is coming from a syntax error in the Headless UI Vue component code. Specifically, there's an unexpected semicolon in this line: \n(0,;__vite_ssr_import_5__.match)(i.value,{\nThis appears to be a build/compilation issue with the Headless UI Vue component. Let me check if there are any Headless UI Vue dependencies in the package.json.\n\nThe error appears when using nuxt v3.15.0 \nWith the previous \"nuxt\": \"3.14.1592\", no error. I 'm not sure if i should fill the bug Report here or in Nuxt directly!\n\n\n### Additional context\n\nUnexpected token ';'\n\n function g(e=\"\"){return e.split(/\\s+/).filter(t=>t.length>1)}let R=Symbol(\"TransitionContext\");var pe=(a=>(a.Visible=\"visible\",a.Hidden=\"hidden\",a))(pe||{});function me(){return (0,__vite_ssr_import_0__.inject)(R,null)!==null}function Te(){let e=(0,__vite_ssr_import_0__.inject)(R,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}function ge(){let e=(0,__vite_ssr_import_0__.inject)(N,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}let N=Symbol(\"NestingContext\");function L(e){return\"children\"in e?L(e.children):e.value.filter(({state:t})=>t===\"visible\").length>0}function Q(e){let t=(0,__vite_ssr_import_0__.ref)([]),a=(0,__vite_ssr_import_0__.ref)(!1);(0,__vite_ssr_import_0__.onMounted)(()=>a.value=!0),(0,__vite_ssr_import_0__.onUnmounted)(()=>a.value=!1);function s(n,r=__vite_ssr_import_6__.RenderStrategy.Hidden){let l=t.value.findIndex(({id:f})=>f===n);l!==-1&&((0,__vite_ssr_import_5__.match)(r,{[__vite_ssr_import_6__.RenderStrategy.Unmount](){t.value.splice(l,1)},[__vite_ssr_import_6__.RenderStrategy.Hidden](){t.value[l].state=\"hidden\"}}),!L(t)&&a.value&&(e==null||e()))}function h(n){let r=t.value.find(({id:l})=>l===n);return r?r.state!==\"visible\"&&(r.state=\"visible\"):t.value.push({id:n,state:\"visible\"}),()=>s(n,__vite_ssr_import_6__.RenderStrategy.Unmount)}return{children:t,register:h,unregister:s}}let W=__vite_ssr_import_6__.Features.RenderStrategy,he=(0,__vite_ssr_import_0__.defineComponent)({props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s,expose:h}){let n=(0,__vite_ssr_import_0__.ref)(0);function r(){n.value|=__vite_ssr_import_2__.State.Opening,t(\"beforeEnter\")}function l(){n.value&=~__vite_ssr_import_2__.State.Opening,t(\"afterEnter\")}function f(){n.value|=__vite_ssr_import_2__.State.Closing,t(\"beforeLeave\")}function S(){n.value&=~__vite_ssr_import_2__.State.Closing,t(\"afterLeave\")}if(!me()&&(0,__vite_ssr_import_2__.hasOpenClosed)())return()=>(0,__vite_ssr_import_0__.h)(Se,{...e,onBeforeEnter:r,onAfterEnter:l,onBeforeLeave:f,onAfterLeave:S},s);let d=(0,__vite_ssr_import_0__.ref)(null),y=(0,__vite_ssr_import_0__.computed)(()=>e.unmount?__vite_ssr_import_6__.RenderStrategy.Unmount:__vite_ssr_import_6__.RenderStrategy.Hidden);h({el:d,$el:d});let{show:v,appear:A}=Te(),{register:D,unregister:H}=ge(),i=(0,__vite_ssr_import_0__.ref)(v.value?\"visible\":\"hidden\"),I={value:!0},c=(0,__vite_ssr_import_1__.useId)(),b={value:!1},P=Q(()=>{!b.value&&i.value!==\"hidden\"&&(i.value=\"hidden\",H(c),S())});(0,__vite_ssr_import_0__.onMounted)(()=>{let o=D(c);(0,__vite_ssr_import_0__.onUnmounted)(o)}),(0,__vite_ssr_import_0__.watchEffect)(()=>{if(y.value===__vite_ssr_import_6__.RenderStrategy.Hidden&&c){if(v.value&&i.value!==\"visible\"){i.value=\"visible\";return}(0,;__vite_ssr_import_5__.match)(i.value,{[\"hidden\"]:()=>H(c),[\"visible\"]:()=>D(c)})}});let j=g(e.enter),M=g(e.enterFrom),X=g(e.enterTo),_=g(e.entered),Y=g(e.leave),Z=g(e.leaveFrom),ee=g(e.leaveTo);(0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{if(i.value===\"visible\"){let o=(0,__vite_ssr_import_3__.dom)(d);if(o instanceof Comment&&o.data===\"\")throw new Error(\"Did you forget to passthrough the ref to the actual DOM node?\")}})});function te(o){let E=I.value&&!A.value,p=(0,__vite_ssr_import_3__.dom)(d);!p||!(p instanceof HTMLElement)||E||(b.value=!0,v.value&&r(),v.value||f(),o(v.value?(0,__vite_ssr_import_7__.transition)(p,j,M,X,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&l()}):(0,__vite_ssr_import_7__.transition)(p,Y,Z,ee,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&(L(P)||(i.value=\"hidden\",H(c),S()))})))}return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watch)([v],(o,E,p)=>{te(p),I.value=!1},{immediate:!0})}),(0,__vite_ssr_import_0__.provide)(N,P),(0,__vite_ssr_import_2__.useOpenClosedProvider)((0,__vite_ssr_import_0__.computed)(()=>(0,__vite_ssr_import_5__.match)(i.value,{[\"visible\"]:__vite_ssr_import_2__.State.Open,[\"hidden\"]:__vite_ssr_import_2__.State.Closed})|n.value)),()=>{let{appear:o,show:E,enter:p,enterFrom:V,enterTo:Ce,entered:ye,leave:be,leaveFrom:Ee,leaveTo:Ve,...U}=e,ne={ref:d},re={...U,...A.value&&v.value&&__vite_ssr_import_4__.env.isServer?{class:(0,__vite_ssr_import_0__.normalizeClass)([a.class,U.class,...j,...M])}:{}};return (0,__vite_ssr_import_6__.render)({theirProps:re,ourProps:ne,slot:{},slots:s,attrs:a,features:W,visible:i.value===\"visible\",name:\"TransitionChild\"})}}}),ce=he,Se=(0,__vite_ssr_import_0__.defineComponent)({inheritAttrs:!1,props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s}){let h=(0,__vite_ssr_import_2__.useOpenClosed)(),n=(0,__vite_ssr_import_0__.computed)(()=>e.show===null&&h!==null?(h.value&__vite_ssr_import_2__.State.Open)===__vite_ssr_import_2__.State.Open:e.show);(0,__vite_ssr_import_0__.watchEffect)(()=>{if(![!0,!1].includes(n.value))throw new Error('A \u003CTransition /> is used but it is missing a :show=\"true | false\" prop.')});let r=(0,__vite_ssr_import_0__.ref)(n.value?\"visible\":\"hidden\"),l=Q(()=>{r.value=\"hidden\"}),f=(0,__vite_ssr_import_0__.ref)(!0),S={show:n,appear:(0,__vite_ssr_import_0__.computed)(()=>e.appear||!f.value)};return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{f.value=!1,n.value?r.value=\"visible\":L(l)||(r.value=\"hidden\")})}),(0,__vite_ssr_import_0__.provide)(N,l),(0,__vite_ssr_import_0__.provide)(R,S),()=>{let d=(0,__vite_ssr_import_6__.omit)(e,[\"show\",\"appear\",\"unmount\",\"onBeforeEnter\",\"onBeforeLeave\",\"onAfterEnter\",\"onAfterLeave\"]),y={unmount:e.unmount};return (0,__vite_ssr_import_6__.render)({ourProps:{...y,as:\"template\"},theirProps:{},slot:{},slots:{...s,default:()=>[(0,__vite_ssr_import_0__.h)(ce,{onBeforeEnter:()=>t(\"beforeEnter\"),onAfterEnter:()=>t(\"afterEnter\"),onBeforeLeave:()=>t(\"beforeLeave\"),onAfterLeave:()=>t(\"afterLeave\"),...a,...y,...d},s.default)]},attrs:{},features:W,visible:r.value===\"visible\",name:\"Transition\"})}}});\n\n\n SyntaxError: Unexpected token ';'\n at new Script (node:vm:116:7)\n at createScript (node:vm:268:10)\n at Object.runInThisContext (node:vm:316:10)\n at ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:398:19)\n at ViteNodeRunner.directRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:381:16) \n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async ViteNodeRunner.cachedRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:206:14) \n at async ViteNodeRunner.dependencyRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:259:12)\n at async node_modules\\@headlessui\\vue\\dist\\headlessui.esm.js:23:32\n at async ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:399:5) \n\n### Logs\n\n```shell-script\n\n```",[2097,2098],{"name":1985,"color":1986},{"name":2099,"color":2100},"duplicate","cfd3d7",2972,"Syntax error in the Headless UI Vue component code","2024-12-25T10:39:30Z","https://github.com/nuxt/ui/issues/2972",0.7381628,["Reactive",2107],{},["Set"],["ShallowReactive",2110],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"uNBpk3mBGGINLkiKe9nofUv2fuel65SBLVE7DmEWmnY":-1},"/nuxt/ui/3788"]