Handle mouse and keyboard navigation on select and dropdown

src/css/basecoat.css

@@ -516,7 +516,7 @@
         @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
 
         &:not([aria-disabled='true']) {
-          @apply focus-visible:bg-accent focus-visible:text-accent-foreground hover:bg-accent hover:text-accent-foreground;
+          @apply focus-visible:bg-accent focus-visible:text-accent-foreground;
         }
 
         &.active {
@@ -530,6 +530,13 @@
         @apply border-border -mx-1 my-1;
       }
     }
+    &:not([data-dropdown-menu-initialized]) [data-popover] {
+      [role='menuitem'],
+      [role='menuitemcheckbox'],
+      [role='menuitemradio'] {
+        @apply hover:bg-accent hover:text-accent-foreground;
+      }
+    }
   }
 }
 
@@ -737,6 +744,10 @@
         &[aria-selected='true'] {
           @apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
         }
+        &.active,
+        &:focus-visible {
+          @apply bg-accent text-accent-foreground;
+        }
       }
       [role='listbox'] [role='heading'] {
         @apply flex text-muted-foreground px-2 py-1.5 text-xs;
@@ -767,11 +778,8 @@
         @apply content-['No_results_found'];
       }
     }
-
-    [role='option']:hover,
-    &[data-select-initialized] [role='option'].active,
-    &[data-select-initialized] [role='option']:focus-visible {
-      @apply bg-accent text-accent-foreground;
+    &:not([data-select-idnitialized]) [data-popover] [role='option'] {
+      @apply hover:bg-accent hover:text-accent-foreground;
     }
   }
 }