From 0fef8a69e4be7c3dddb8398052455375174567b3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 22 Dec 2025 16:26:04 -0800
Subject: [PATCH] fix select typeahead highlighting

add label prop to items for open-state typeahead, use explicit global selector for data-highlighted
---
 src/lib/components/ui/MultiSelect.svelte | 50 +++++++++++++++++-------
 src/lib/components/ui/Select.svelte      | 15 ++++---
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/ui/MultiSelect.svelte b/src/lib/components/ui/MultiSelect.svelte
index ef1deaa5..b45aac7c 100644
--- a/src/lib/components/ui/MultiSelect.svelte
+++ b/src/lib/components/ui/MultiSelect.svelte
@@ -93,17 +93,17 @@
 			{#each options as option}
 				<SelectPrimitive.Item
 					value={String(option.value)}
+					label={option.label}
 					disabled={option.disabled}
 					class="multi-item"
 					style={option.color ? `--option-color: ${option.color}` : ''}
 				>
 					{#snippet children({ selected })}
-						<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}
+						<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span
+						>
+						<span class="indicator">
+							<Icon name="check" size={12} class="check-icon {selected ? 'visible' : ''}" />
+						</span>
 					{/snippet}
 				</SelectPrimitive.Item>
 			{/each}
@@ -149,7 +149,7 @@
 		}
 
 		&[data-placeholder='true'] .text {
-			color: var(--text-tertiary);
+			color: var(--text-secondary);
 		}
 
 		&.has-value {
@@ -163,7 +163,7 @@
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			color: var(--text-tertiary);
+			color: var(--text-secondary);
 		}
 
 		:global(.chevron) {
@@ -235,7 +235,7 @@
 		@include smooth-transition($duration-quick, background-color);
 
 		&:hover {
-			background-color: var(--option-bg-hover);
+			background-color: var(--select-contained-bg-hover);
 		}
 
 		&[data-disabled] {
@@ -244,12 +244,29 @@
 			opacity: 0.5;
 		}
 
-		&[data-highlighted] {
-			background-color: var(--option-bg-hover);
+		&:first-child {
+			border-top-left-radius: $item-corner;
+			border-top-right-radius: $item-corner;
+		}
+
+		&:last-child {
+			border-bottom-left-radius: $item-corner;
+			border-bottom-right-radius: $item-corner;
+		}
+
+		:global(.check-icon) {
+			opacity: 0;
+			transition: opacity $duration-quick ease;
+			color: var(--text-tertiary);
+		}
+
+		:global(.check-icon.visible) {
+			opacity: 1;
 		}
 
 		.label {
 			flex: 1;
+			min-width: $unit-8x;
 
 			&.selected {
 				font-weight: $medium;
@@ -259,11 +276,11 @@
 				&::before {
 					content: '';
 					display: inline-block;
-					width: 8px;
-					height: 8px;
+					width: 10px;
+					height: 10px;
 					border-radius: 50%;
 					background: var(--option-color);
-					margin-right: $unit-half;
+					margin-right: $unit;
 				}
 			}
 		}
@@ -273,4 +290,9 @@
 			color: var(--accent-color);
 		}
 	}
+
+	// Highlighted state (separate global selector for typeahead)
+	:global([data-select-item].multi-item[data-highlighted]) {
+		background-color: var(--option-bg-hover);
+	}
 </style>
diff --git a/src/lib/components/ui/Select.svelte b/src/lib/components/ui/Select.svelte
index 70c2c10e..58c77011 100644
--- a/src/lib/components/ui/Select.svelte
+++ b/src/lib/components/ui/Select.svelte
@@ -164,7 +164,8 @@
 						{#each options as option}
 							<SelectPrimitive.Item
 								value={String(option.value)}
-								{...option.disabled !== undefined ? { disabled: option.disabled } : {}}
+								label={option.label}
+								disabled={option.disabled}
 								class="item"
 							>
 								{#snippet children({ selected })}
@@ -219,7 +220,8 @@
 						{#each options as option}
 							<SelectPrimitive.Item
 								value={String(option.value)}
-								{...option.disabled !== undefined ? { disabled: option.disabled } : {}}
+								label={option.label}
+								disabled={option.disabled}
 								class="item"
 							>
 								{#snippet children({ selected })}
@@ -456,10 +458,6 @@
 			opacity: 0.5;
 		}
 
-		&[data-highlighted] {
-			background-color: var(--option-bg-hover);
-		}
-
 		&[data-selected] {
 			font-weight: $medium;
 		}
@@ -495,4 +493,9 @@
 			color: var(--accent-color);
 		}
 	}
+
+	// Highlighted state (separate global selector for typeahead)
+	:global([data-select-item].item[data-highlighted]) {
+		background-color: var(--option-bg-hover);
+	}
 </style>