\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2899,2900],{"name":2888,"color":2889},{"name":2874,"color":2875},3583,"Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.6991222,{"description":2907,"labels":2908,"number":2909,"owner":2877,"repository":2910,"state":2879,"title":2911,"updated_at":2912,"url":2913,"score":2914},"Hello\nIn your playground where is a possibility to set `mode: css` and image span will have `--svg` variable which could be used as value for `mask-image`\nIn `getIconCss` method there is property `mode: mask` which can return this variable\nhttps://iconify.design/docs/libraries/utils/get-icon-css.html#geticoncss\n\nIn latest `@nuxt/icon` svg content in `mode: css` always uses as `background-image` value/\n\nCan you add property which allows to get `--svg` variable which could be used as value for `mask-image`?",[],367,"icon","Use css icon data as mask-image","2025-03-12T12:15:51Z","https://github.com/nuxt/icon/issues/367",0.7029982,{"description":2916,"labels":2917,"number":2918,"owner":2877,"repository":2910,"state":2879,"title":2919,"updated_at":2920,"url":2921,"score":2922},"It would be nice if you could alias and entire collection instead of just an icon.\n\nRight now I do it this way.\n```ts\nconst createIconAliases = (newPrefix: string, iconifyJson: IconifyJSON) => {\n const exisitngPrefix = iconifyJson.prefix;\n const icons = Object.keys(iconifyJson.icons);\n\n return icons.reduce(\n (object, value) => {\n object[`${newPrefix}:${value}`] = `${exisitngPrefix}:${value}`;\n return object;\n },\n {} as Record\u003Cstring, string>,\n );\n};\n```",[],362,"[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.70735836,{"description":2924,"labels":2925,"number":2931,"owner":2877,"repository":2878,"state":2932,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Environment\n\n- Operating System: Linux\n- Node Version: v23.5.0\n- Nuxt Version: -\n- CLI Version: 3.23.0\n- Nitro Version: -\n- Package Manager: pnpm@10.6.2\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\nv3.0.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/button#label\n\n### Description\n\nthe buttons should have cursor pointer by default.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2926,2927,2930],{"name":2888,"color":2889},{"name":2928,"color":2929},"duplicate","cfd3d7",{"name":2871,"color":2872},3552,"closed","Button | should have `cursor-pointer` by default","2025-03-19T20:46:13Z","https://github.com/nuxt/ui/issues/3552",0.6517854,{"description":2938,"labels":2939,"number":2940,"owner":2877,"repository":2941,"state":2932,"title":2942,"updated_at":2943,"url":2944,"score":2945},"Open https://nuxt.com/docs/guide/directory-structure/composables, **Introduction** page is shown instead of **Composables**\n\n\n\nI think the regression is due to 43b0f43",[],1752,"nuxt.com","All docs/[...slug] routes show Introduction page","2025-01-14T11:25:53Z","https://github.com/nuxt/nuxt.com/issues/1752",0.66744447,{"description":2947,"labels":2948,"number":2949,"owner":2877,"repository":2941,"state":2932,"title":2950,"updated_at":2951,"url":2952,"score":2953},"On the \"Enterprise Support\" page, the icons are shrinking when the device width is less than 900 pixels or in tablet view(768px). To resolve this, we can apply the Tailwind CSS class `shrink-0` to three specific child elements and it will prevent shrinking. It will work fine from mobile to desktop device. I'm new to open source contribution. Any suggestions or advice are appreciated.\r\n\r\n**Current code**\r\n```\r\n\u003Cdiv class=\"flex flex-col sm:flex-row items-center gap-4 mb-8\">\r\n \u003Cdiv class=\"w-14 h-14 bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-300 dark:ring-gray-700 rounded-md flex items-center justify-center\">\r\n \u003CUIcon :name=\"icon\" class=\"w-8 h-8\" />\r\n \u003C/div>\r\n\r\n \u003Cdiv>\r\n \u003Ch2 class=\"text-lg font-semibold my-0\">\r\n \u003CContentSlot :use=\"$slots.title\" unwrap=\"p\" />\r\n \u003C/h2>\r\n\r\n \u003Cp class=\"text-gray-500 dark:text-gray-400 text-base mt-1 mb-0\">\r\n \u003CContentSlot :use=\"$slots.description\" unwrap=\"p\" />\r\n \u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n```\r\n**My Solution**\r\n```\r\n\u003Cdiv class=\"flex flex-col sm:flex-row items-center gap-4 mb-8\">\r\n \u003Cdiv class=\"w-14 h-14 bg-gray-100 dark:bg-gray-800 ring-1 shrink-0 ring-gray-300 dark:ring-gray-700 rounded-md flex items-center justify-center\">\r\n \u003CUIcon :name=\"icon\" class=\"w-8 h-8\" />\r\n \u003C/div>\r\n\r\n \u003Cdiv>\r\n \u003Ch2 class=\"text-lg font-semibold my-0\">\r\n \u003CContentSlot :use=\"$slots.title\" unwrap=\"p\" />\r\n \u003C/h2>\r\n\r\n \u003Cp class=\"text-gray-500 dark:text-gray-400 text-base mt-1 mb-0\">\r\n \u003CContentSlot :use=\"$slots.description\" unwrap=\"p\" />\r\n \u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n```\r\n**Example 1:**\r\n[\r\n\r\n](url)\r\n\r\n**Example 2**\r\n\r\n\r\n**After Solution**\r\n\r\n\r\nShould I create a pull req?\r\n\r\n\r\n\n```[tasklist]\n### Tasks\n```\n",[],1399,"Icons Shrinking below 900px width and in Tablet View(768) on enterprise support page","2023-10-27T09:01:27Z","https://github.com/nuxt/nuxt.com/issues/1399",0.67152995,{"description":2955,"labels":2956,"number":2961,"owner":2877,"repository":2878,"state":2932,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn my Nuxt 3 project (that uses Nuxt UI `v3.0.0-alpha9`), I have a Vue component like this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\n...\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"section\">\n ...\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cstyle scoped lang=\"scss\">\n@use \"tailwindcss\";\n\n.section + .section {\n @apply mt-8 lg:mt-12;\n}\n\u003C/style>\n```\n\nThe problem is that `@apply mt-8 lg:mt-12;` doesn't work unless I add this to my `nuxt.config.ts`:\n```\npostcss: {\n plugins: {\n \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n },\n},\n```\n\nHowever, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the `@apply ...` work without breaking the Nuxt UI components?\n\nThis is my `package.json`:\n```json\n{\n \"name\": \"frontend\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"postinstall\": \"husky install && nuxt prepare\",\n \"dev\": \"nuxt dev\",\n \"build\": \"nuxt build\",\n \"preview\": \"nuxt preview\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.9\",\n \"nuxt\": \"latest\",\n \"nuxt-svgo\": \"latest\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"latest\",\n \"@commitlint/config-conventional\": \"latest\",\n \"husky\": \"latest\",\n \"sass\": \"latest\"\n }\n}\n```\n\nThis is my `nuxt.config.ts`:\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: \"2024-04-03\",\n devtools: { enabled: false },\n modules: [\"@nuxt/ui\", \"nuxt-svgo\"],\n css: [\"@/assets/css/main.css\"],\n // postcss: {\n // plugins: {\n // \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n // },\n // },\n appConfig: {\n // https://ui3.nuxt.dev/getting-started/theme#colors\n ui: {\n colors: {\n primary: \"primary\", // Defined in `assets/css/theme.css`\n secondary: \"secondary\", // Defined in `assets/css/theme.css`\n },\n },\n },\n});\n```\n\nThis is my `assets/main.css`:\n```css\n/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```",[2957,2960],{"name":2958,"color":2959},"question","d876e3",{"name":2871,"color":2872},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.6807959,{"description":2967,"labels":2968,"number":2971,"owner":2877,"repository":2878,"state":2932,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\n[CommandPalette](https://ui3.nuxt.dev/components/command-palette) is great but I wish it could display only an input by default and then open the content in a popper when clicking in the input. I think this is currently not possible but a very common use case. \n\nThis is what I would like to archive, screenshots from Shopify:\n\n\n\n\n\n\n\n### Additional context\n\n_No response_",[2969,2970],{"name":2868,"color":2869},{"name":2871,"color":2872},2832,"v3 CommandPalette: Open only content within popper","2024-12-05T13:24:12Z","https://github.com/nuxt/ui/issues/2832",0.6811173,["Reactive",2977],{},["Set"],["ShallowReactive",2980],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMRUaQu3yk9iQJSCQq8Q42wbybbLqzdcMo7If49B5VoI":-1},"/nuxt/ui/3486"]