From 60cbc03edf9eb93aa768eafdef249736625c39ba Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 13 Dec 2025 20:58:30 -0800
Subject: [PATCH] select/multiselect: remove hover shadow, use elemental
 checkmarks

---
 src/lib/components/ui/MultiSelect.svelte | 35 +++++++-----------------
 src/lib/components/ui/Select.svelte      |  5 ++--
 2 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/ui/MultiSelect.svelte b/src/lib/components/ui/MultiSelect.svelte
index 96c1fe1c..ef1deaa5 100644
--- a/src/lib/components/ui/MultiSelect.svelte
+++ b/src/lib/components/ui/MultiSelect.svelte
@@ -3,7 +3,6 @@
 <script lang="ts" generics="T extends string | number">
 	import { Select as SelectPrimitive } from 'bits-ui'
 	import Icon from '../Icon.svelte'
-	import checkIcon from '$src/assets/icons/check.svg'
 
 	interface Option {
 		value: T
@@ -99,11 +98,12 @@
 					style={option.color ? `--option-color: ${option.color}` : ''}
 				>
 					{#snippet children({ selected })}
-						<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span
-						>
-						<span class="check-icon" class:visible={selected}>
-							<img src={checkIcon} alt="" />
-						</span>
+						<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span>
+						{#if selected}
+							<span class="indicator">
+								<Icon name="check" size={14} />
+							</span>
+						{/if}
 					{/snippet}
 				</SelectPrimitive.Item>
 			{/each}
@@ -136,8 +136,7 @@
 		@include smooth-transition($duration-quick, background-color, border-color, box-shadow);
 
 		&:hover:not(.disabled) {
-			// background-color: var(--input-bg-hover);
-			box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+			background-color: var(--input-bg-hover);
 		}
 
 		&:focus-visible {
@@ -269,23 +268,9 @@
 			}
 		}
 
-		.check-icon {
-			width: 12px;
-			height: 12px;
-			flex-shrink: 0;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			img {
-				width: 12px;
-				height: 12px;
-				opacity: 0;
-			}
-
-			&.visible img {
-				opacity: 1;
-			}
+		:global(.indicator) {
+			margin-left: auto;
+			color: var(--accent-color);
 		}
 	}
 </style>
diff --git a/src/lib/components/ui/Select.svelte b/src/lib/components/ui/Select.svelte
index 801daa97..8e27f9a3 100644
--- a/src/lib/components/ui/Select.svelte
+++ b/src/lib/components/ui/Select.svelte
@@ -318,8 +318,7 @@
 		@include smooth-transition($duration-quick, background-color, border-color, box-shadow);
 
 		&:hover:not(.disabled) {
-			// background-color: var(--input-bg-hover);
-			box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+			background-color: var(--input-bg-hover);
 		}
 
 		&:focus-visible {
@@ -481,7 +480,7 @@
 
 		:global(.indicator) {
 			margin-left: auto;
-			color: var(--accent-blue);
+			color: var(--accent-color);
 		}
 	}
 </style>