\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```",[2924,2925],{"name":2857,"color":2858},{"name":2860,"color":2861},3148,"V3 In Select slot trailing","2025-01-25T13:13:41Z","https://github.com/nuxt/ui/issues/3148",0.75116307,{"description":2932,"labels":2933,"number":2939,"owner":2866,"repository":2867,"state":2916,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### 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```",[2934,2935,2936],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2937,"color":2938},"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":2945,"labels":2946,"number":2949,"owner":2866,"repository":2867,"state":2916,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### 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_",[2947,2948],{"name":2887,"color":2888},{"name":2860,"color":2861},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.7620906,{"description":2955,"labels":2956,"number":2961,"owner":2866,"repository":2867,"state":2916,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### 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_",[2957,2958,2960],{"name":2887,"color":2888},{"name":2959,"color":2864},"wontfix-v2",{"name":2860,"color":2861},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":2967,"labels":2968,"number":2970,"owner":2866,"repository":2867,"state":2916,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### 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_",[2969],{"name":2857,"color":2858},2255,"Overflow probem with SelectMenu inside a table","2024-09-26T10:21:43Z","https://github.com/nuxt/ui/issues/2255",0.7636756,["Reactive",2976],{},["Set"],["ShallowReactive",2979],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feJKGCThKFFrCO-sKUlA2OXvPDdR4qempZoFCw8Gasc8":-1},"/nuxt/ui/3314"]