youhua

components/i/Create.vue

 <template>
     <div class="max-w-screen-md w-full flex flex-col space-y-4 p-6">
         <UCard
-            class="transition-[box-shadow] hover:ring-2 has-[:focus]:ring-2 has-[:focus]:ring-green-500 dark:has-[:focus]:ring-green-400"
+            class="transition-[box-shadow] hover:ring-2 has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-green-500 dark:has-[textarea:focus]:ring-green-400"
             :ui="cardUI"
         >
             <UTextarea

components/i/search/Ask.vue

 <template>
     <div class="flex w-full justify-center">
         <UCard
-            class="hover:ring-2 has-[:focus]:ring-2 has-[:focus]:ring-green-500 dark:has-[:focus]:ring-green-400"
+            class="hover:ring-2 has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-green-500 dark:has-[textarea:focus]:ring-green-400"
             :ui="cardUI"
         >
             <UTextarea
@@ -33,7 +33,7 @@
                         trailing-icon="i-heroicons-stop-20-solid"
                         size="xl"
                         variant="ghost"
-                        @click="handleStop"
+                        @click.stop="handleStop"
                     />
                 </UTooltip>
             </div>
@@ -55,7 +55,7 @@ const cardUI = {
         padding: '',
         base: 'flex items-end has-[textarea[rows="1"]]:items-center pl-4 pr-1 py-1 gap-2'
     },
-    base: 'transition-[width] w-3/5 has-[:focus]:w-full',
+    base: 'transition-[width] w-3/5 has-[textarea:focus]:w-full',
     rounded: 'rounded has-[textarea[rows="1"]]:rounded-full'
 }
 defineShortcuts({