build/deps: Update Svelecte to 4.2.2

This includes changes to CSS in order to bring the look & feel in line
with the previous version as much as possible. We can now remove the
warning about TypeScript types (Svelecte 4 now includes them) and retire
the clunky handling of pending options.

Additionally, the focus issue has been fixed, allowing users to tab
through controls without getting stuck.

2 files changed, 31 insertions, 43 deletions

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 13a7883..e1b6ca0 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -148,33 +148,41 @@
 	}
 }
 
-.svelecte-control {
-	--sv-item-color: inherit !important;
-	--sv-bg: theme(colors.slate.900) !important;
-	--sv-disabled-bg: theme(colors.slate.900) !important;
-	--sv-border: 1px solid rgba(0, 0, 0, 0) !important;
-	--sv-disabled-border-color: rgba(0, 0, 0, 0) !important;
-	--sv-border-color: theme(colors.slate.600) !important;
-	--sv-active-border: 1px solid theme(colors.slate.500) !important;
-	--sv-item-selected-bg: theme(colors.indigo.800) !important;
-	--sv-item-active-bg: theme(colors.indigo.800) !important;
-	--sv-highlight-bg: none !important;
-	--sv-item-btn-bg-hover: theme(colors.rose.900) !important;
-	--sv-placeholder-color: theme(colors.gray.500) !important;
+.svelecte {
+	--sv-bg: theme(colors.slate.900);
+	--sv-disabled-bg: theme(colors.slate.900);
+	--sv-border: 1px solid rgba(0, 0, 0, 0);
+	--sv-dropdown-active-bg: theme(colors.indigo.800);
+	--sv-item-selected-bg: theme(colors.indigo.800);
+	--sv-item-btn-bg-hover: theme(colors.rose.900);
+	--sv-item-btn-color-hover: theme(colors.rose.100);
+	--sv-separator-bg: theme(colors.gray.700);
+	--sv-min-height: 38px;
+	--sv-item-wrap-padding: 3px 3px 3px 5px;
 }
 
-.svelecte-control input {
-	@apply !h-8;
+.svelecte.is-focused {
+	--sv-border: 1px solid theme(colors.slate.500);
 }
 
-.exclude .svelecte-control {
-	--sv-border: 1px solid theme('colors.red.900') !important;
-	--sv-active-border: 1px solid theme('colors.red.700') !important;
+.svelecte input::placeholder {
+	color: theme(colors.gray.500);
+}
+
+.exclude .svelecte {
+	--sv-border: 1px solid theme(colors.red.900);
+	--sv-item-selected-bg: theme(colors.rose.800);
+	--sv-dropdown-active-bg: theme(colors.rose.800);
+}
+
+.sv-item--btn {
+	border-radius: 0 2px 2px 0 !important;
+}
 
-	--sv-item-selected-bg: theme(colors.rose.800) !important;
-	--sv-item-active-bg: theme(colors.rose.800) !important;
+.sv-item--wrap {
+	border-radius: 2px 0 0 2px !important;
 }
 
-.sv-dropdown {
-	@apply my-1 !bg-slate-950;
+.sv-item--wrap.in-dropdown {
+	border-radius: 2px !important;
 }
diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
index f7e87a4..dece4a5 100644
--- a/frontend/src/lib/components/Select.svelte
+++ b/frontend/src/lib/components/Select.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import type { ListItem } from '$lib/Utils';
-
-	// @ts-expect-error Svelecte 3 does not have types, and 4 (which does) is pending stabilization
 	import Svelecte from 'svelecte';
 
 	let inputId: string;
@@ -17,12 +15,6 @@
 	export let value: Value;
 
 	export { inputId as id, valueAsObject as object, multiple as multi };
-
-	function optionsPlaceholder(from: Value): Item[] {
-		if (from === undefined || from === null) return [];
-
-		return Array.isArray(from) ? from : [from];
-	}
 </script>
 
 {#if options !== null && options !== undefined}
@@ -39,17 +31,5 @@
 		bind:value
 	/>
 {:else}
-	<Svelecte
-		virtualList
-		valueField="id"
-		labelField="name"
-		disabled
-		options={optionsPlaceholder(value)}
-		{multiple}
-		{clearable}
-		{inputId}
-		{valueAsObject}
-		{placeholder}
-		{value}
-	/>
+	<Svelecte {placeholder} />
 {/if}