\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[2949,2951,2954],{"name":2933,"color":2950},"a2eeef",{"name":2952,"color":2953},"v3","49DCB8",{"name":2955,"color":2956},"triage","ffffff",3094,"ui","[RFP] The Inputs Update","2025-04-24T16:04:12Z","https://github.com/nuxt/ui/issues/3094",0.7951441,{"description":2964,"labels":2965,"number":2970,"owner":2911,"repository":2958,"state":2971,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.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.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.11, @vueuse/nuxt@10.11.1, @nuxtjs/mdc@0.6.1, @formkit/auto-animate/nuxt@0.8.2, @vite-pwa/nuxt@0.10.5\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.11\n\n### Reproduction\n\nhttps://github.com/user-attachments/assets/ccb59d22-36d8-46b0-a773-aa4ff38c26ce\n\n### Description\n\nWhen I use the select component and use the trailing slot and add a button, the button click does not work\n\n```\u003CUFormField label=\"Sustento Tributario\">\n \u003CUSelect\n v-model=\"formDetailRT.codeSustento\"\n label-key=\"shortName\" value-key=\"code\"\n :items=\"typeSustentoInv\"\n :ui=\"{ trailing: 'p-0' }\"\n class=\"max-w-[280px]\"\n >\n \u003Ctemplate #trailing>\n \u003CUButton\n color=\"primary\"\n size=\"sm\"\n icon=\"i-carbon-add-large\"\n @click=\"addToRetention\"\n />\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```",[2966,2969],{"name":2967,"color":2968},"bug","d73a4a",{"name":2952,"color":2953},3148,"closed","V3 In Select slot trailing","2025-01-25T13:13:41Z","https://github.com/nuxt/ui/issues/3148",0.6883046,{"description":2977,"labels":2978,"number":2981,"owner":2911,"repository":2958,"state":2971,"title":2982,"updated_at":2983,"url":2984,"score":2985},"### Description\n\ncan you add Scroll-area component ? like the one in shadcn \"https://ui.shadcn.com/docs/components/scroll-area\"\n\n### Additional context\n\n_No response_",[2979,2980],{"name":2933,"color":2950},{"name":2952,"color":2953},3425,"Scroll-area","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3425",0.73288035,{"description":2987,"labels":2988,"number":2995,"owner":2911,"repository":2911,"state":2971,"title":2996,"updated_at":2997,"url":2998,"score":2999},"### Describe the feature\n\nWhen you are behind a reverse proxy that handles HTTPS for you, there should be a way to have a different protocol on the server and on the client for HMR websockets.\r\n\r\nWe already have \"clientPort\", so you can have a different port on the server and in the client.\r\n\r\nThe feature would be a \"clientProtocol\" option, so the server can use \"ws://\" while the client uses \"wss://\".\r\n\r\nUsage:\r\n```javascript\r\n{\r\n vite: {\r\n server: {\r\n hmr: {\r\n protocol: \"wss\",\r\n clientProtocol: \"ws\",\r\n },\r\n },\r\n },\r\n}\r\n```\r\n\r\nThis could also be a solution for issue nuxt/nuxt.js#12003\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2989,2992],{"name":2990,"color":2991},"3.x","29bc7f",{"name":2993,"color":2994},"pending triage","E99695",12408,"Add \"clientProtocol\" option to HMR config","2023-01-19T16:18:48Z","https://github.com/nuxt/nuxt/issues/12408",0.75678205,{"description":3001,"labels":3002,"number":3005,"owner":2911,"repository":2958,"state":2971,"title":3006,"updated_at":3007,"url":3008,"score":3009},"### 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_",[3003,3004],{"name":2933,"color":2950},{"name":2952,"color":2953},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.76891154,{"description":3011,"labels":3012,"number":3013,"owner":2911,"repository":3014,"state":2971,"title":3015,"updated_at":3016,"url":3017,"score":3018},"## Issue\nIn dev mode contributor images are not rendered as expected on landing page:\n\n\n\n\n## Repro\n1. Run `pnpm dev`\n2. Browse to `http://localhost:3000/` and scroll down to **Built by developers...**\n\n## Root cause\n`nuxt.config.ts` is missing config `$development.image.ipx.baseURL`.",[],1785,"nuxt.com","contributor images on landing page not rendered as expected in dev mode","2025-03-21T16:12:54Z","https://github.com/nuxt/nuxt.com/issues/1785",0.7695929,{"description":3020,"labels":3021,"number":3024,"owner":2911,"repository":2958,"state":2971,"title":3025,"updated_at":2983,"url":3026,"score":3027},"### Environment\n\nHi, I just wanted to share that the styling on the docs website appears broken when viewed in Firefox. I checked on Chrome, and it displays correctly there.\n\nHere’s a screenshot:\n\n\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nN/A\n\n### Reproduction\n\nN/A\n\n### Description\n\nN/A\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3022,3023],{"name":2967,"color":2968},{"name":2952,"color":2953},3397,"Nuxt UI v3 docs styling broken","https://github.com/nuxt/ui/issues/3397",0.77166307,["Reactive",3029],{},["Set"],["ShallowReactive",3032],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYe4RO8fesqX5-KnKecG0B3XkDeMTw9bb51xeH_vztbE":-1},"/nuxt/ui/2861"]