fix eslint errors

eslint.config.js

@@ -20,7 +20,21 @@ export default ts.config(
 		languageOptions: {
 			globals: { ...globals.browser, ...globals.node }
 		},
-		rules: { 'no-undef': 'off' }
+		rules: {
+			'no-undef': 'off',
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					args: 'all',
+					argsIgnorePattern: '^_',
+					caughtErrors: 'all',
+					caughtErrorsIgnorePattern: '^_',
+					destructuredArrayIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+					ignoreRestSiblings: true
+				}
+			]
+		}
 	},
 	{
 		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],

src/lib/ActionSelect.svelte

@@ -2,9 +2,7 @@
 	export type ActionSelectOption = {
 		/** value is a convenience field, it has no internal use */
 		value?: string;
-		icon?:
+		icon?: IconDef | Snippet<[opt: ActionSelectOption]>;
-			| { component: Component; props: Record<string, any> }
-			| Snippet<[opt: ActionSelectOption]>;
 		label: string | Snippet<[opt: ActionSelectOption]>;
 		disabled?: boolean;
 		onchoose?: (opt: ActionSelectOption) => void;
@@ -13,11 +11,12 @@
 
 <script lang="ts">
 	import { Select } from 'melt/builders';
-	import { tick, type Component, type Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import Label from './Label.svelte';
 	import Button from './Button.svelte';
 	import { CaretDown, Check } from 'phosphor-svelte';
 	import type { ClassValue } from 'svelte/elements';
+	import type { IconDef } from './util';
 
 	interface Props {
 		label?: string;
@@ -109,7 +108,7 @@
 		{...select.content}
 		class={['border-sui-accent flex flex-col gap-1 rounded-xl border p-2 shadow-md']}
 	>
-		{#each options as option}
+		{#each options as option (option.label)}
 			<div
 				{...select.getOption(option, typeof option.label === 'string' ? option.label : undefined)}
 				class={[

src/lib/DateInput.svelte

@@ -18,7 +18,7 @@
 		name?: string;
 		value?: CalendarDate;
 		min?: CalendarDate;
-		max?: CalendarDate;
+		// max?: CalendarDate; // TODO: Implement validation.
 		label?: string;
 		required?: boolean;
 		invalidMessage?: string;
@@ -32,7 +32,7 @@
 		/** min specifies lower bounds for the date input (WARNING: NOT IMPLEMENTED) */
 		min = new CalendarDate(1900, 0, 1),
 		/** max specifies upper bounds for the date input (WARNING: NOT IMPLEMENTED) */
-		max = new CalendarDate(2100, 11, 31),
+		// max = new CalendarDate(2100, 11, 31),
 		label,
 		required = false,
 		invalidMessage = 'Valid date is required',

src/lib/PinInput.svelte

@@ -174,7 +174,7 @@
 
 	<div>
 		<div class="flex gap-4">
-			{#each { length: length } as _, i}
+			{#each { length: length } as _, i (i)}
 				<input
 					type="text"
 					class={[

src/lib/RadioGroup.svelte

@@ -34,7 +34,7 @@
 		<Label {...group.label}>{label}</Label>
 	{/if}
 	<div class="flex {isVert ? 'flex-col gap-1' : 'flex-row justify-center gap-3'}">
-		{#each options as opt}
+		{#each options as opt (getValue(opt))}
 			{@const item = group.getItem(getValue(opt))}
 			<div
 				class="ring-sui-accent-500 group -ml-1 flex items-center gap-3 rounded p-1 outline-hidden focus-visible:ring-3

src/lib/StateMachine.svelte

@@ -310,7 +310,7 @@
 
 <!-- Form progress bar -->
 {#snippet progress()}
-	{#each { length: pages.length - 2 } as _, i}
+	{#each { length: pages.length - 2 } as _, i (i)}
 		<div
 			class="relative flex h-6 w-7 items-center justify-center rounded-3xl bg-white
 					text-sm dark:bg-slate-600 {index === i

src/lib/TimeInput.svelte

@@ -192,7 +192,7 @@
 		}
 
 		if ('userAgentData' in navigator) {
-			if (!(navigator.userAgentData as any).mobile) type = 'text';
+			if (!(navigator.userAgentData as { mobile: boolean }).mobile) type = 'text';
 		}
 	});
 </script>

src/lib/TimezoneInput.svelte

@@ -107,5 +107,6 @@
 />
 
 {#snippet timezoneLabel(item: ComboboxOption)}
+	<!-- eslint-disable svelte/no-at-html-tags -->
 	{@html wbr(item.label ?? 'Missing label')}
 {/snippet}