\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter upgrading from `alpha.8` to `alpha.9`, the border radius is wrong (different from the rest of the application) when using badge in the [NavigationMenu](https://ui3.nuxt.dev/components/navigation-menu). When inspecting HTML, this is the class (related to border radius) applied to the badge: `rounded-[calc(var(--ui-radius)]`.\n\nI also tried passing the [class](https://ui3.nuxt.dev/components/badge#class-prop) to `BadgeProps` but it doesn't work:\n```vue\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n class: \"rounded-full\", // ! NOT WORKING\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\nHowever, IMO the border radius should be inherited (no need to pass `class`).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[1997,2000],{"name":1998,"color":1999},"bug","d73a4a",{"name":2001,"color":2002},"v3","49DCB8",2766,"ui","closed","Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.6679847,{"description":2011,"labels":2012,"number":2015,"owner":1988,"repository":2004,"state":2005,"title":2016,"updated_at":2017,"url":2018,"score":2019},"### Environment\n\n- node:V18.19.1\n- pnpm: V8.15.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.1\n\n### Reproduction\n\nhttps://github.com/Jevin0/nuxt-ui-no-style-demo/blob/master/app.vue\n\n### Description\n\n\n### step\n1. `pnpm dlx nuxi@latest init \u003Cproject-name>`\n2. `npx nuxi@latest module add ui`\n3. `pnpm install`\n4. `pnpm dev`\n\n### concern\nNormal use of `UButton` component, but no background color and Color\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2013,2014],{"name":1998,"color":1999},{"name":2001,"color":2002},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.7099692,{"labels":2021,"number":2026,"owner":1988,"repository":1988,"state":2005,"title":2027,"updated_at":2028,"url":2029,"score":2030},[2022,2025],{"name":2023,"color":2024},"3.x","29bc7f",{"name":1998,"color":1999},14347,"new nuxt projects display white border around \u003CNuxtWelcome>","2023-01-19T17:34:22Z","https://github.com/nuxt/nuxt/issues/14347",0.71013725,{"description":2032,"labels":2033,"number":2042,"owner":1988,"repository":1988,"state":2005,"title":2043,"updated_at":2044,"url":2045,"score":2046},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nYou can use my old preproduction from #23051 https://stackblitz.com/edit/github-ydxe3t?file=pages%2Findex.vue\r\n\r\nSee that the scoped style (margin) applies to the component. However, if you update Nuxt to 3.7.3, the style no longer applies, since the data-v attribute was removed. \n\n### Describe the bug\n\nThe issue #23051 was fixed in #23095.\r\n\r\nHowever, this prevented scoped style from being applied to the component. \r\n\n\n### Additional context\n\nSorry for the delayed feedback. As I noted in https://github.com/nuxt/nuxt/pull/23095#issuecomment-1712583276 the removal of data-v attribute entirely lead to styles not being reproduced. I already debugged the issue and I'm going to create a PR with a simple suggested fix.\r\n\r\nThis PR will revert the expected behavior of scoped styles as in 3.7.1 while keeping @huang-julien 's fix for 404 on soft navigation due to different component hash.\n\n### Logs\n\n_No response_",[2034,2035,2036,2039],{"name":2023,"color":2024},{"name":1998,"color":1999},{"name":2037,"color":2038},"🔨 p3-minor","FBCA04",{"name":2040,"color":2041},"server components","839413",23385,"Fix for #23051 broke scoped styles in server components","2023-09-28T07:36:15Z","https://github.com/nuxt/nuxt/issues/23385",0.7152805,{"description":2048,"labels":2049,"number":2055,"owner":1988,"repository":2004,"state":2005,"title":2056,"updated_at":2057,"url":2058,"score":2059},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.2, @nuxtjs/seo@2.0.2, @nuxtjs/plausible@1.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.9\n\n### Reproduction\n\nOn a brand new project:\n\n```\nnpx nuxi@latest init my-app\ncd my-app\nnpm install @nuxt/ui@next\n```\n\nThen\n/app/app.vue\n```vue\n\u003Ctemplate>\n\t\u003CNuxtLayout>\n\t\t\u003CNuxtPage />\n\t\u003C/NuxtLayout>\n\u003C/template>\n```\n\nnuxt.config.ts\n```js\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n\tcompatibilityDate: \"2024-11-01\",\n modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo'],\n css: ['~/assets/css/main.css'],\n\n\tdevtools: { enabled: true },\n\tfuture: {\n\t\tcompatibilityVersion: 4,\n\t},\n\tui: {\n // error here\n\t\tcolorMode: false,\n\t},\n});\n\n```\n\n### Description\n\nWhen changing the ui.colorMode to false AND using the `pages` folder, it crashes the whole app (error below).\n\n\n```\n500\n[vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n\n/* Injection by vite-plugin-vue-inspector Start */\nimport { createVNode as __createVNode } from 'vue'\nfunction _interopVNode(vnode) {\n if (vnode && vnode.props && 'data-v-inspector' in vnode.props) {\n const data = vnode.props['data-v-inspector']\n delete vnode.props['data-v-inspector']\n Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false })\n }\n return vnode\n}\nfunction _createVNode(...args) { return _interopVNode(__createVNode(...args)) }\n/* Injection by vite-plugin-vue-inspector End */\nimport { defineComponent as _defineComponent } from \"vue\";\nimport { onUnmounted, onMounted, reactive } from \"vue\";\nimport { pascalCase } from \"scule\";\nimport { defineAsyncComponent, useColorMode, useRoute } from \"#imports\";\nconst _sfc_main = /* @__PURE__ */ _defineComponent({\n __name: \"DevtoolsRenderer\",\n setup(__props, { expose: __expose }) {\n __expose();\n const route = useRoute();\n const component = route.query?.example ? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`)) : route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug)}.vue`));\n const state = reactive({});\n function onUpdateRenderer(event) {\n state.props = { ...event.data.props };\n state.slots = { ...event.data.slots };\n }\n const colorMode = useColorMode();\n function setColorMode(event) {\n colorMode.preference = event.isDark ? \"dark\" : \"light\";\n }\n onMounted(() => {\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onUnmounted(() => {\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onMounted(async () => {\n const event = new Event(\"nuxt-ui-devtools:component-loaded\");\n (void 0).parent.dispatchEvent(event);\n });\n onMounted(() => {\n if (!route.query?.example) return;\n });\n const __returned__ = { route, component, state, onUpdateRenderer, colorMode, setColorMode };\n Object.defineProperty(__returned__, \"__isScriptSetup\", { enumerable: false, value: true });\n return __returned__;\n }\n});\nimport { resolveComponent as _resolveComponent, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from \"vue\";\nimport { ssrRenderVNode as _ssrRenderVNode, ssrRenderComponent as _ssrRenderComponent, ssrRenderAttrs as _ssrRenderAttrs } from \"vue/server-renderer\";\nfunction _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {\n const _component_UApp = _resolveComponent(\"UApp\");\n _push(`\u003Cdiv${_ssrRenderAttrs(_mergeProps({\n id: \"ui-devtools-renderer\",\n class: \"nuxt-ui-component-renderer\",\n \"data-v-inspector\": \"../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue:44:3\"\n }, _attrs))}>`);\n _push(_ssrRenderComponent(_component_UApp, { toaster: null }, {\n default: _withCtx((_, _push2, _parent2, _scopeId) => {\n if (_push2) {\n if ($setup.component) {\n _ssrRenderVNode(_push2, _createVNode(_resolveDynamicComponent($setup.component), _mergeProps($setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null), _parent2, _scopeId);\n } else {\n _push2(`\u003C!---->`);\n }\n } else {\n return [\n $setup.component ? (_openBlock(), _createBlock(_resolveDynamicComponent($setup.component), _mergeProps({ key: 0 }, $setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null, 16, [\"class\", \"ui\"])) : _createCommentVNode(\"v-if\", true)\n ];\n }\n }),\n _: 1\n /* STABLE */\n }, _parent));\n _push(`\u003C/div>`);\n}\nimport \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?vue&type=style&index=0&lang.css\";\nimport { useSSRContext as __vite_useSSRContext } from \"vue\";\nconst _sfc_setup = _sfc_main.setup;\n_sfc_main.setup = (props, ctx) => {\n const ssrContext = __vite_useSSRContext();\n (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add(\"../../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\");\n return _sfc_setup ? _sfc_setup(props, ctx) : void 0;\n};\nimport _export_sfc from \"\\0plugin-vue:export-helper\";\nexport default /* @__PURE__ */ _export_sfc(_sfc_main, [[\"ssrRender\", _sfc_ssrRender], [\"__file\", \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\"]]);\n\nat /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2050,2051,2054],{"name":1998,"color":1999},{"name":2052,"color":2053},"duplicate","cfd3d7",{"name":2001,"color":2002},2823,"`colorMode: false` + /pages/ crash the app","2024-12-03T09:33:17Z","https://github.com/nuxt/ui/issues/2823",0.71668833,{"description":2061,"labels":2062,"number":2069,"owner":1988,"repository":1988,"state":2005,"title":2070,"updated_at":2071,"url":2072,"score":2073},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `pnpm@8.6.11`\r\n- Builder: `vite`\r\n- User Config: `extends`, `telemetry`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\n### Create component in our Nuxt layer\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton :class=\"[$style.root]\">\r\n \u003Cspan :class=\"$style.title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle module>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n```ts\r\nexport default defineNuxtConfig({\r\n extends: [\"our-same-layer\"],\r\n});\r\n```\r\n\u003Cimg width=\"1641\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/37b8fd5c-40bf-40a2-9178-c7dbb6a8c2dd\">\r\n\r\n### But if we run only layer, we get the correct result\r\n\u003Cimg width=\"1643\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/dbfb15e0-5180-43b1-8b07-76a86bb445f4\">\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nDuplicate stylesheet in dev when using Nuxt Layer..\r\n### Additional context\r\n\r\nI tested pure css, it's reproduced on css module and pure css\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton class=\"root\">\r\n \u003Cspan class=\"title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n\u003Cimg width=\"1642\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/422ddc69-a372-4255-a7a0-b33fdf99c54a\">\r\n\r\n### Logs\r\n\r\n_No response_",[2063,2064,2065,2066],{"name":2023,"color":2024},{"name":1998,"color":1999},{"name":2037,"color":2038},{"name":2067,"color":2068},"layers","006B75",22658,"Duplicate stylesheet in dev when using Nuxt Layer","2023-09-11T13:39:19Z","https://github.com/nuxt/nuxt/issues/22658",0.7169147,{"description":2075,"labels":2076,"number":2083,"owner":1988,"repository":2084,"state":2005,"title":2085,"updated_at":2086,"url":2087,"score":2088},"",[2077,2080],{"name":2078,"color":2079},"enhancement","a2eeef",{"name":2081,"color":2082},"provider","1161A4",11,"fonts","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.72750545,{"description":2090,"labels":2091,"number":2097,"owner":1988,"repository":2004,"state":2005,"title":2098,"updated_at":2099,"url":2100,"score":2101},"### Environment\n\nOperating System: Darwin\nNode Version: v20.18.0\nNuxt Version: 3.14.1592\nPackage Manager: pnpm@9.14.4\nBuilder: -\nUser Config: default\nRuntime Modules: @nuxt/ui@3.0.0-alpha.10\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nifty-ride-lx6qlg\n\n### Description\n\nThe same problem occurs in official documents. https://ui3.nuxt.dev/components/toast\n1. Open the Toast component of the document.\n2. Click the \"Show toast\" button to show toast.\n3. Click X to close the toast when it appears.\n4. Click the \"Show toast\" button again, and the toast that appears does not have a progress bar and does not automatically close.\n\nMy production environment project also has this problem, I hope it can be solved as soon as possible.\nAlso, the progress bar sometimes flashes, so i can expect new configurations to setting the progress bar showing is true or false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2092,2093,2094],{"name":1998,"color":1999},{"name":2001,"color":2002},{"name":2095,"color":2096},"triage","ffffff",3003,"The Toast component loses the progress bar and does not automatically close","2025-03-24T13:48:53Z","https://github.com/nuxt/ui/issues/3003",0.7277146,{"description":2103,"labels":2104,"number":2105,"owner":1988,"repository":2106,"state":2005,"title":2107,"updated_at":2108,"url":2109,"score":2110},"Hi, I love the new website and thank you for listing up my avatar in landing page ❤️ \r\n\r\nBy the way, I found that \"Edit this page\" links are not correctly set.\r\n\r\nFor example,\r\n\r\n\"Edit this page\" text in the right side bar in https://nuxt.com/docs/getting-started/introduction\r\n\r\nis linked to\r\n\r\nhttps://nuxt.com/docs/getting-started/introduction.",[],1378,"nuxt.com","\"Edit this page\" link is wrong","2023-10-19T09:15:05Z","https://github.com/nuxt/nuxt.com/issues/1378",0.72806287,["Reactive",2112],{},["Set"],["ShallowReactive",2115],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"1pLngxEOLPZvDtO154t5VKLlTMMoiubmnpfyqcPu0Lg":-1},"/nuxt/ui/2742"]