selector

src/lib/components/Playground/Playground.svelte

@@ -306,20 +306,20 @@
 				}}
 				type="button"
 				disabled={loading}
-				class="flex h-[39px] w-24 items-center justify-center gap-2 rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 disabled:opacity-50 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
+				class="flex h-[39px] w-24 items-center justify-center gap-2 rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
 			>
 				{#if loading}
 					<div class="flex flex-none items-center gap-[3px]">
 						<div
-							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-200"
+							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
 							style="animation-delay: 0.25s;"
 						/>
 						<div
-							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-200"
+							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
 							style="animation-delay: 0.5s;"
 						/>
 						<div
-							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-200"
+							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
 							style="animation-delay: 0.75s;"
 						/>
 					</div>

src/lib/components/Playground/PlaygroundModelSelectorV2.svelte

@@ -1,6 +1,14 @@
+<script>
+</script>
+
 <div class="relative z-10">
+	<label
+		for="countries"
+		class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
+		>Models<span class="ml-4 font-normal text-gray-400">12</span>
+	</label>
 	<button
-		class="flex items-center gap-5 whitespace-nowrap rounded-lg border bg-white px-3 py-1.5 leading-tight shadow dark:bg-gray-700"
+		class="peer flex items-center gap-5 whitespace-nowrap rounded-lg border bg-white px-3 py-1.5 leading-tight shadow dark:bg-gray-700"
 	>
 		<div class="flex flex-col items-start text-sm">
 			<div class="text-gray-500 dark:text-gray-300">meta-llama</div>
@@ -9,7 +17,7 @@
 		<div class="size-5 bg-red-50"></div>
 	</button>
 	<div
-		class="absolute right-0 z-10 w-96 overflow-hidden rounded-lg border bg-white shadow-lg dark:bg-gray-700"
+		class="absolute right-0 z-10 hidden w-96 overflow-hidden rounded-lg border bg-white shadow-lg hover:block peer-focus-within:block dark:bg-gray-700"
 	>
 		<div>
 			<label for="input-group-search" class="sr-only">Search Models</label>