\n \u003C/template>\n \u003C/USelect>\n \u003C/UFormField>```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3164,3167],{"name":3165,"color":3166},"bug","d73a4a",{"name":3168,"color":3169},"v3","49DCB8",3148,"ui","V3 In Select slot trailing","2025-01-25T13:13:41Z","https://github.com/nuxt/ui/issues/3148",0.751163,{"description":3177,"labels":3178,"number":3184,"owner":3138,"repository":3171,"state":3156,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Environment\n\n- Operating System: Darwin\n- Node Version: -\n- Nuxt Version: -\n- CLI Version: -\n- Nitro Version: -\n- Package Manager: -\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.16.1\n\n### Reproduction\n\nhttps://dashboard-template.nuxt.dev/\n\nhttps://github.com/user-attachments/assets/c7c84465-1507-4ba8-a321-1e4f7def60f1\n\n### Description\n\nI was checking the pro dashboard template and found that.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3179,3180,3181],{"name":3165,"color":3166},{"name":3168,"color":3169},{"name":3182,"color":3183},"pro","5BD3CB",3713,"Command behind Slideover in Nuxt UI Pro Template","2025-03-28T15:16:02Z","https://github.com/nuxt/ui/issues/3713",0.75845814,{"description":3190,"labels":3191,"number":3196,"owner":3138,"repository":3171,"state":3156,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Description\n\nThis is highly experimental and potentially canceled, I'm opening this issue to both track down best approach and naming conventions before working on a PR. **I'll update this issue as I work on it**\n\n## Idea\n\nWith the current [Design Tokens](https://ui3.nuxt.dev/getting-started/theme#tokens) we control colors, radius and container width. This greatly simplifies both prototyping process and agencies working on templates built with Nuxt UI.\nPersonally there is one missing feature about colors: their opacity/shades, that you can find in the various states and variants.\n\nTaking in example any variant for the `Button` component, we have a set of hardcoded opacities (in this case: `/25`, `/10` and `/15`):\nhttps://github.com/nuxt/ui/blob/7f64198a70104436f39f2f9d8527df0508fd84f6/src/theme/button.ts#L91-L95\n\nIn a design first approach, especially when working on bigger projects, it is often to have the brand colors pre-defined for things like hover, disabled and such. This means that, if the project requires them, you are most probably forced to edit each very component's color in the `app.config`.\n\n### What we have\n\nWe auto generate a series of css variables as `--ui-{color}` based on `ui.theme.colors` inside the `nuxt.config.ts`. Then use them as `(text/bg/ring)-[var(--ui-{color})]/{opacity}` both as base and with modifiers (hover, disabled and so on).\n\nThey are used 40 times in total (7 unique: `/10`, `/15`, `/20`, `/25`, `/50`, `/75` and `/90`), distributed as:\n- **24** on `--ui-{color}`\n - ...\n- **7** on `--ui-bg-elevated`\n - `/50` for bg, hover and `data-highlighted`\n- **4** on `--ui-bg-accented`\n - `/75` for hover\n- **3** on `--ui-bg`\n - `/75` for pinned and sticky in UTable\n- **2** on `--ui-bg-inverted`\n - `/20` for `data-[highlighted]`\n - `/90` for hover\n\n### My approach\n\nI would like to group the various opacities into two categories: those that are actual opacities (mainly for `--ui-bg*`) and those that are for colors.\n- for the background ones I would mostly group them as three type of opacities (potentially creating three named variants)\n- for colors I would simply replace them with another named css variable, with follows the naming convention of `--ui-bg-(elevated/inverted/accented/*)`, becoming something like `--ui-{color}-(elevated/inverted/accented/*)`. For its default value I would use `color-mix(oklab, var(--ui-{color}) {opacity});`, keeping the current functionality of requiring a single starting color.\n\n### Additional context\n\n_No response_",[3192,3195],{"name":3193,"color":3194},"enhancement","a2eeef",{"name":3168,"color":3169},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.7620906,{"description":3202,"labels":3203,"number":3209,"owner":3138,"repository":3171,"state":3156,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### Description\r\n\r\nFor elements like UAvatar that use images, it would be a good idea to integrate with Nuxt Image for those who have it installed to benefit from image optimizations like setting image format, applying modifiers, and all the other features that Nuxt Image offers.\r\n\r\n### Additional context\r\n\r\n_No response_",[3204,3205,3208],{"name":3193,"color":3194},{"name":3206,"color":3207},"wontfix-v2","ffffff",{"name":3168,"color":3169},2078,"[Avatar] Integration with Nuxt Image for built in image optimization","2024-11-07T12:02:04Z","https://github.com/nuxt/ui/issues/2078",0.76216274,{"description":3215,"labels":3216,"number":3218,"owner":3138,"repository":3171,"state":3156,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.9.0\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Version\r\n\r\nv2.8.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-u8opw1?file=app.vue\r\n\r\n### Description\r\n\r\nOverflow problem, the select menu is open inside the table\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[3217],{"name":3165,"color":3166},2255,"Overflow probem with SelectMenu inside a table","2024-09-26T10:21:43Z","https://github.com/nuxt/ui/issues/2255",0.7636756,{"description":3224,"labels":3225,"number":3227,"owner":3138,"repository":3171,"state":3156,"title":3228,"updated_at":3229,"url":3230,"score":3231},"# tldr\r\nWhen using nuxt UI v2.18.5 or higher -> `\u003CUInput value=\"'12714274'\" readonly />` change it to `\u003CUInput :model-value=\"'12714274'\" readonly />`\r\n\r\n\r\n\r\n--------- \r\n\r\n\r\n### Version\r\n\r\nedit: v2.18.5\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-uds7la?file=app.vue\r\n\r\n### Description\r\n\r\nSo i have a few grouped form inputs and noticed all values being empty since last update, reverted back to 2.18.4 and worked again. \r\n\r\n_(👀 or you can tell me im using it wrong)_\r\n\r\n### Why i am using :value= ? \r\n\r\n```\r\n\u003CUInput\r\n :value=\"firstname\"\r\n @input=\"$emit('update:firstname', $event.target.value)\"\r\n />\r\n \u003CUInput\r\n :value=\"lastname\"\r\n @input=\"$emit('update:lastname', $event.target.value)\"\r\n />\r\n```\r\n\r\nand using \r\n```\r\n\u003CAccountFormDetails\r\n v-model:firstname=\"formState.firstname\"\r\n v-model:lastname=\"formState.lastname\"\r\n/>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\nno logs,no errors\r\n```\r\n\r\nedit: added repro\r\nedit: pinpointed on 2.18.5, this happened between 18.4 and 18.5",[3226],{"name":3165,"color":3166},2238,"UInput :value not working in v2.18.5","2024-09-25T08:36:59Z","https://github.com/nuxt/ui/issues/2238",0.763697,{"description":3233,"labels":3234,"number":3237,"owner":3138,"repository":3171,"state":3156,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Environment\n\nMacOS 15.0.1 / Arc 1.63.0\nAlso tested on iOS 18.0.1 / Safari\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/modal\n\n### Description\n\nIn version 3.0-alpha, I noticed that modals are now displayed in fullscreen mode on mobile devices / small screens by default. This can be reproduced with the examples in the documentation. \n\nI don't expect this to be intended as default. Also in the first example in the modal documentation it's hard to leave the dialoge, as there is no button for closing.\n\n\n### Additional context\n\n\n\n### Logs\n\n_No response_",[3235,3236],{"name":3165,"color":3166},{"name":3168,"color":3169},2463,"[v3] Modal always render fullscreen on mobile","2025-01-10T09:30:40Z","https://github.com/nuxt/ui/issues/2463",0.76502985,{"description":3243,"labels":3244,"number":3246,"owner":3138,"repository":3171,"state":3156,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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_",[3245],{"name":3165,"color":3166},2285,"CommandPalette: visual item selection inconsistent","2024-11-19T15:26:05Z","https://github.com/nuxt/ui/issues/2285",0.767362,["Reactive",3252],{},["Set"],["ShallowReactive",3255],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feJKGCThKFFrCO-sKUlA2OXvPDdR4qempZoFCw8Gasc8":-1},"/nuxt/ui/3314"]