Add .file class + Generator user agent

src/components/Button.svelte

@@ -5,7 +5,7 @@
 	import { classCombine } from '../utils/classCombine'
 
 	/** The element to be styled as a button */
-	export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
+	export let as: 'button' | 'a' | 'summary' | 'input' | 'file' = 'button'
 	export let href = ''
 	if (href) as = 'a'
 
@@ -15,7 +15,6 @@
 	export let size: 'sm' | 'md' | 'lg' = 'md'
 	export let color:
 		| ''
-		| 'raised'
 		| 'primary'
 		| 'primary-light'
 		| 'secondary'
@@ -24,6 +23,9 @@
 		| 'danger-light'
 		| 'transparent' = ''
 
+	/** Applies a stronger shadow to the element. To be used when the button isn't on a card  */
+	export let raised = false
+
 	/** Show notification badge in the upper right of button */
 	export let badge = false
 
@@ -40,6 +42,7 @@
 		'button',
 		`button--size-${size}`,
 		`button--color-${color}`,
+		raised && 'button--raised',
 		badge && 'has-badge',
 	])
 
@@ -48,6 +51,10 @@
 	function dispatchClick() {
 		if (!disabled) dispatch('click')
 	}
+
+	function dispatchFiles(event: Event) {
+		if (!disabled) dispatch('files', (event.target as HTMLInputElement).files || new FileList())
+	}
 </script>
 
 {#if as === 'a'}
@@ -56,6 +63,11 @@
 	</a>
 {:else if as === 'input'}
 	<input class={className} {value} {disabled} {title} on:click={dispatchClick} />
+{:else if as === 'file'}
+	<label class={className} {disabled} {title}>
+		<input type="file" on:change={dispatchFiles} />
+		<slot />
+	</label>
 {:else}
 	<svelte:element this={as} class={className} {disabled} {title} on:click={dispatchClick}>
 		<slot />
@@ -83,6 +95,11 @@
 		transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
 			outline 0.2s ease-in-out;
 
+		&--raised {
+			background-color: var(--color-raised-bg);
+			box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+		}
+
 		&:hover:not(&--color-transparent, &:disabled) {
 			filter: brightness(0.85);
 		}
@@ -93,11 +110,6 @@
 		}
 
 		&--color {
-			&-raised {
-				background-color: var(--color-raised-bg);
-				box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
-			}
-
 			&-primary {
 				background-color: var(--color-brand);
 				color: var(--color-brand-contrast);
@@ -166,5 +178,10 @@
 			top: 0.5rem;
 			right: 0.5rem;
 		}
+
+		/* Hides default file input */
+		input[type='file'] {
+			display: none;
+		}
 	}
 </style>

src/components/CheckboxVirtualList.svelte

@@ -11,7 +11,12 @@
 	export let value = []
 	export let options: Option[] = []
 
+	// Scroll into view selected options when created
+	let scrollToIndex =
+		Math.min(...value.map((val) => options.map((it) => it.value).indexOf(val))) || null
+
 	const handleChange = (event: any, key: string | number) => {
+		scrollToIndex = null
 		if (event.target.checked) {
 			if (!value) value = []
 			value = [key, ...value]
@@ -21,7 +26,14 @@
 	}
 </script>
 
-<VirtualList width="100%" {height} itemCount={options.length} itemSize={26}>
+<VirtualList
+	width="100%"
+	{height}
+	itemCount={options.length}
+	itemSize={26}
+	{scrollToIndex}
+	scrollToAlignment="center"
+	scrollToBehaviour="smooth">
 	<div
 		slot="item"
 		let:index

src/components/FileUpload.svelte

@@ -7,21 +7,35 @@
 	import Button from './Button.svelte'
 	import { classCombine } from '../utils/classCombine'
 
+	interface RemoteFile {
+		name: string
+		remote: true
+	}
+
 	export let multiple = false
 	export let accept: string
 	/** Prevents width from expanding due to large file names or images */
 	export let constrained = false
 
-	export let files: File[] = []
-	export let file: File | undefined
+	export let files: (File | RemoteFile)[] = []
+	export let file: File | RemoteFile | undefined
 	$: if (files) file = files[0] || undefined
 
 	let inputElement: HTMLInputElement
 
 	function addFiles(fileList: FileList) {
 		for (const file of Array.from(fileList)) {
-			// Check for duplicate files
-			if (!files.map((file) => file.name).includes(file.name)) {
+			// Check for duplicate files that aren't remote
+			if (
+				!files
+					.filter((it) => it instanceof File)
+					.map((file) => file.name)
+					.includes(file.name)
+			) {
+				if (files.map((file) => file.name).includes(file.name)) {
+					// Remove remote file with the same name
+					files = files.filter((it) => it.name !== file.name)
+				}
 				files = [...files, file]
 			}
 		}
@@ -53,7 +67,7 @@
 	{#each files as file (file.name)}
 		<div class="file">
 			<div class="file__tab">
-				{#if file.type.startsWith('image/')}
+				{#if file instanceof File && file.type.startsWith('image/')}
 					<IconPhotograph />
 				{:else}
 					<IconFile />
@@ -65,7 +79,7 @@
 						files = files.filter((it) => it.name !== file.name)
 					}}><IconTrash /> Remove</Button>
 			</div>
-			{#if file.type.startsWith('image/')}
+			{#if file instanceof File && file.type.startsWith('image/')}
 				<div class="file__preview">
 					<img
 						class="file__preview__image"
@@ -99,47 +113,5 @@
 			cursor: pointer;
 			color: var(--color-text-light);
 		}
-
-		.file {
-			border-radius: var(--rounded);
-			background-color: var(--color-button-bg);
-			box-shadow: var(--shadow-raised-sm), var(--shadow-inset);
-
-			&__tab {
-				display: flex;
-				align-items: center;
-				padding: 0.75rem 1rem;
-				gap: 1rem;
-
-				:global(.icon) {
-					/* Uses `px` to make icons slightly larger */
-					min-width: 18px;
-					height: 18px;
-				}
-
-				&__name {
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					margin-right: auto;
-				}
-			}
-
-			&__preview {
-				width: 100%;
-				border-radius: var(--rounded-bottom);
-				overflow: hidden;
-				display: flex;
-				justify-content: center;
-				background-color: black;
-
-				&__image {
-					height: auto;
-					max-height: 22rem;
-					width: 100%;
-					object-fit: contain;
-				}
-			}
-		}
 	}
 </style>

src/components/Pagination.svelte

@@ -25,7 +25,7 @@
 {#if count > 1}
 	<div class="pagination">
 		<Button
-			color="raised"
+			raised
 			on:click={() => dispatch('change', page - 1)}
 			disabled={page <= 1}
 			title="Last page"
@@ -36,12 +36,13 @@
 				<IconMinus class="pagination__dash" />
 			{:else}
 				<Button
-					color={option === page ? 'primary' : 'raised'}
+					color={option === page ? 'primary' : ''}
+					raised
 					on:click={() => dispatch('change', option)}>{option}</Button>
 			{/if}
 		{/each}
 		<Button
-			color="raised"
+			raised
 			on:click={() => dispatch('change', page + 1)}
 			disabled={page >= count}
 			title="Next page">

src/components/Select.svelte

@@ -134,7 +134,7 @@
 
 		const debounced = debounce(100, checkDirection)
 		window.addEventListener('resize', debounced)
-		window.addEventListener('scroll;', debounced)
+		window.addEventListener('scroll', debounced)
 	})
 </script>
 

src/components/TextInput.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { classCombine } from '$lib/utils/classCombine'
+
 	export let placeholder = ''
 	/** A Svelte component */
 	export let icon: any = undefined
@@ -7,9 +9,10 @@
 	/** An ID for better accessibility */
 	export let id: string = undefined
 	export let fill = false
+	export let raised = false
 </script>
 
-<div class="text-input" class:fill>
+<div class={classCombine(['text-input', raised && 'text-input--raised'])} class:fill>
 	{#if multiline}
 		<textarea {id} {placeholder} bind:value />
 	{:else}
@@ -43,6 +46,12 @@
 			max-width: 100%;
 		}
 
+		&--raised > input,
+		&--raised > textarea {
+			border: 2px solid var(--color-text-lightest);
+			box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+		}
+
 		input {
 			padding: 0.25rem 1rem;