\n \u003Cslot>\u003C/slot>\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript lang=\"ts\" setup>\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\nconst items = useBreadcrumbItems({\n schemaOrg: true,\n});\n\u003C/script>\n\n\n### Description\n\nthis will render the breadcrumbs in a \u003Cdiv> with an aria-label, which is a violation of this rule: https://html-validate.org/rules/aria-label-misuse.html\n\n- Rule ID: aria-label-misuse\n- Category: Accessibility\n- Standards: WCAG 2.2 (A)WCAG 2.1 (A)WCAG 2.0 (A)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n ERROR HTML validation errors found for /song/justice-genesis-1\n\ninline\n 129:21990 error \"aria-label\" cannot be used on this element aria-label-misuse\n\n✖ 1 problem (1 error, 0 warnings)\n\nMore information:\n https://html-validate.org/rules/aria-label-misuse.html\n\n```",[2900,2902],{"name":2888,"color":2901},"d73a4a",{"name":2871,"color":2872},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.73041916,{"description":2909,"labels":2910,"number":2918,"owner":2877,"repository":2878,"state":2892,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Description\n\nThere is currently no easy way to know what state the modal is in. Adding a `toggle` method would make life very much easier.\n\nI'm willing to make a PR\n\n### Additional context\n\n_No response_",[2911,2914,2915],{"name":2912,"color":2913},"enhancement","a2eeef",{"name":2871,"color":2872},{"name":2916,"color":2917},"triage","ffffff",3720,"feat: add toogle for useOverlay","2025-04-09T15:26:14Z","https://github.com/nuxt/ui/issues/3720",0.7327579,{"description":2924,"labels":2925,"number":2926,"owner":2877,"repository":2891,"state":2892,"title":2927,"updated_at":2928,"url":2929,"score":2930},"Hover effect icon https://www.notion.so/nuxt/Hover-effect-icon-6bd48c2f9b23479689993c1492c287de",[],1087,"[Review] HomeCardItem","2023-02-15T12:31:07Z","https://github.com/nuxt/nuxt.com/issues/1087",0.73493576,{"description":2932,"labels":2933,"number":2938,"owner":2877,"repository":2878,"state":2892,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nI would like to have some way to customize the modal width. There isn't not even a \"size\" property and I can't change it by the \"ui\" prop.\n\n### Additional context\n\n_No response_",[2934,2937],{"name":2935,"color":2936},"question","d876e3",{"name":2871,"color":2872},2774,"[v3][UModal] Size property or way to customize modal width","2024-11-26T14:41:52Z","https://github.com/nuxt/ui/issues/2774",0.7350958,{"description":2944,"labels":2945,"number":2948,"owner":2877,"repository":2878,"state":2892,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: compatibilityDate, modules, devtools, experimental, app, css, site, runtimeConfig, build, ui, sourcemap, fonts, future, vite, typescript, eslint, prismic, pwa, sentry \n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui@3.0.2, @nuxt/image@1.10.0, @nuxtjs/prismic@4.1.0, @nuxtjs/robots@5.2.9, @sentry/nuxt/module@9.12.0, @vite-pwa/nuxt@1.0.0, @vueuse/nuxt@13.1.0, @zadigetvoltaire/nuxt-gtm@0.0.13, nuxt-lodash@2.5.3, @nuxt/scripts@0.11.5\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nhttps://pkg.pr.new/@nuxt/ui@3deed4c\n\n### Reproduction\n\nnot working with: \"@nuxt/ui\": \"https://pkg.pr.new/@nuxt/ui@3deed4c\",\n\n\n### Description\n\nSince upgrading i get the following error:\n\nType '(event: FormSubmitEvent\u003CSchema>) => Promise\u003Cvoid>' is not assignable to type '(payload: FormSubmitEvent\u003Cobject>) => void'.\n Types of parameters 'event' and 'payload' are incompatible.\n Type 'FormSubmitEvent\u003Cobject>' is not assignable to type 'FormSubmitEvent\u003C{ email: string; firstName: string; lastName: string; phone: string; terms: boolean; attachmentUri?: string | undefined; comment?: string | undefined; }>'.\n Type 'FormSubmitEvent\u003Cobject>' is not assignable to type '{ data: { email: string; firstName: string; lastName: string; phone: string; terms: boolean; attachmentUri?: string | undefined; comment?: string | undefined; }; }'.\n Types of property 'data' are incompatible.\n Type '{}' is missing the following properties from type '{ email: string; firstName: string; lastName: string; phone: string; terms: boolean; attachmentUri?: string | undefined; comment?: string | undefined; }': email, firstName, lastName, phone, termsts-plugin(2322)\n\n(property) onSubmit?: ((payload: FormSubmitEvent\u003Cobject>) => void) | undefined\n\n\n### Additional context\n\nwas working in 3.0.2\n\n### Logs\n\n```shell-script\n\n```",[2946,2947],{"name":2888,"color":2901},{"name":2871,"color":2872},3843,"UForm @submit event type error","2025-04-21T09:04:24Z","https://github.com/nuxt/ui/issues/3843",0.7393775,{"description":2954,"labels":2955,"number":2957,"owner":2877,"repository":2878,"state":2892,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Description\n\nPlease help, I would like to add an item to my array when I click on one, at the moment, when I click on an item, all get selected, here is my code:\r\n`\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUButton label=\"Open\" @click=\"isOpen = true\" />\r\n\r\n \u003CUModal v-model=\"isOpen\">\r\n \u003C!-- Display the command palette -->\r\n \u003CUCommandPalette\r\n @select=\"onSelectKeyword\"\r\n v-model=\"selected\"\r\n multiple\r\n nullable\r\n :groups=\"[{ key: 'items', commands: items }]\"\r\n />\r\n\r\n \u003C!-- Input and button to add a new keyword -->\r\n \u003Cdiv class=\"mt-4\">\r\n \u003CUInput\r\n v-model=\"newKeyword\"\r\n placeholder=\"Enter a new keyword\"\r\n class=\"w-full\"\r\n />\r\n \u003CUButton\r\n @click=\"addKeyword\"\r\n label=\"Add Keyword\"\r\n color=\"green\"\r\n class=\"mt-2\"\r\n />\r\n \u003C/div>\r\n\r\n \u003C!-- Display the selected keyword -->\r\n \u003Cdiv v-if=\"selectedKeyword\" class=\"mt-4 text-lg\">\r\n Selected Keyword: \u003Cspan class=\"font-bold\">{{ selectedKeyword }}\u003C/span>\r\n \u003C/div>\r\n \u003C/UModal>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst props = defineProps({\r\n items: {\r\n type: Array,\r\n required: true,\r\n },\r\n});\r\nconst isOpen = ref(false)\r\nconst selected = ref([])\r\n// Log to check if items are being passed correctly\r\nconsole.log('Command Items in Child Component:', props.items);\r\nconst emit = defineEmits(['add-new-keyword']);\r\nconst selectedKeyword = ref([]);\r\nconst newKeyword = ref('');\r\n\r\n// Function to handle keyword selection\r\nconst onSelectKeyword = (item) => {\r\n const index = selectedKeyword.value.findIndex(i => i === item.value);\r\n\r\n if (index === -1) {\r\n // Add item if not already selected\r\n selectedKeyword.value.push(item.value);\r\n } else {\r\n // Remove item if already selected (deselect)\r\n selectedKeyword.value.splice(index, 1);\r\n }\r\n};\r\n\r\n// Function to add a new keyword\r\nconst addKeyword = () => {\r\n const trimmedKeyword = newKeyword.value.trim().toLowerCase();\r\n\r\n // Emit the new keyword to the parent component if it's valid\r\n if (trimmedKeyword && !props.items.includes(trimmedKeyword)) {\r\n emit('add-new-keyword', trimmedKeyword); // Emit the event to the parent\r\n newKeyword.value = ''; // Reset the input field\r\n } else {\r\n alert('Keyword is either empty or already exists.');\r\n }\r\n};\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle scoped>\r\n.UCommandPalette {\r\n border: 1px solid red;\r\n background-color: lightyellow;\r\n}\r\n/* Optional styling for better UI */\r\n.mt-4 {\r\n margin-top: 1rem;\r\n}\r\n.mt-2 {\r\n margin-top: 0.5rem;\r\n}\r\n.w-full {\r\n width: 100%;\r\n}\r\n\u003C/style>\r\n`",[2956],{"name":2935,"color":2936},2202,"when using the UCommandPalette I click on one item and all get selected","2024-09-30T12:46:35Z","https://github.com/nuxt/ui/issues/2202",0.7394956,{"description":2963,"labels":2964,"number":2965,"owner":2877,"repository":2891,"state":2892,"title":2966,"updated_at":2967,"url":2968,"score":2969},"- [x] Colors & Fonts\n- [x] Landing page (Home)\n- [x] Showcase categories/hero\n- [x] Modules categories/hero\n- [x] Blog categories/hero\n- [x] Support hero/content",[],1305,"Marketing Update","2023-07-04T10:00:31Z","https://github.com/nuxt/nuxt.com/issues/1305",0.7457256,{"description":2971,"labels":2972,"number":2975,"owner":2877,"repository":2878,"state":2892,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nRepo: https://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo3\n\nCode: https://github.com/Cyanhall/nuxt-ui-v3-demo/blob/main/demo3/app/components/SearchPalette.vue#L46\n\n### Description\n\nThe placeholder in UInput within UModal does not display.\n\n```vue\n\u003CUInput\n class=\"w-full mb-4\"\n size=\"sm\"\n icon=\"i-lucide-search\"\n placeholder=\"Search...\"\n>\n \u003Ctemplate #trailing>\n \u003CUKbd value=\"shift\" />\n \u003CUKbd value=\"G\" />\n \u003C/template>\n\u003C/UInput>\n```\n\u003Cimg width=\"496\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/be2e8457-b3ac-4b70-838b-2b2b7399c091\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2973,2974],{"name":2888,"color":2901},{"name":2871,"color":2872},2977,"The placeholder in UInput within UModal does not display","2025-03-03T09:06:21Z","https://github.com/nuxt/ui/issues/2977",0.7535845,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJhKmhfq5EzT6t3BNQNKSIS6kD6rRwfmn5nlBzktrkh8":-1},"/nuxt/ui/3936"]