@delightstack/components 0.1.0

package/dist/form/FileUpload.svelte

@@ -0,0 +1,934 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	import { ripple } from '@delightstack/utilities';
+	import Button from '../actions/Button.svelte';
+
+	function humanizeAccept(accept_str: string): string {
+		const tokens = accept_str.split(',').map((t) => t.trim().toLowerCase());
+		const labels = new Set<string>();
+		for (const tok of tokens) {
+			if (tok === 'image/*') labels.add('Images');
+			else if (tok === 'video/*') labels.add('Videos');
+			else if (tok === 'audio/*') labels.add('Audio');
+			else if (tok === 'application/pdf' || tok === '.pdf') labels.add('PDF');
+			else if (tok.startsWith('.')) labels.add(tok.slice(1).toUpperCase());
+			else if (tok.includes('/')) {
+				const sub = tok.split('/')[1];
+				if (sub && sub !== '*') labels.add(sub.toUpperCase());
+			}
+		}
+		const arr = [...labels];
+		if (arr.length === 0) return '';
+		if (arr.length === 1) return `${arr[0]} only`;
+		if (arr.length === 2) return `${arr[0]} or ${arr[1]}`;
+		return `${arr.slice(0, -1).join(', ')}, or ${arr[arr.length - 1]}`;
+	}
+
+	const propId = $props.id();
+	let {
+		/** The list of selected files */
+		files = $bindable([]) as File[],
+
+		/** Accepted file types (e.g. "image/*,.pdf") */
+		accept = undefined as string | undefined,
+
+		/** Whether multiple files can be selected */
+		multiple = false,
+
+		/** Maximum file size in bytes */
+		max_size = undefined as number | undefined,
+
+		/** Maximum number of files allowed */
+		max_files = undefined as number | undefined,
+
+		/** Whether the file upload is disabled */
+		disabled = false,
+
+		/** Whether to show image previews */
+		preview = true,
+
+		/** Large drop area variant (default) */
+		dropzone = true,
+
+		/** Button-style compact variant */
+		compact = false,
+
+		/** Circular avatar variant */
+		avatar = false,
+
+		/** Size preset: 0=small, 1=medium, 2=large, 3=xlarge */
+		size = '1' as '0' | '1' | '2' | '3',
+
+		/** Whether to show a skeleton loading state */
+		skeleton = false,
+
+		/** Label text displayed above the upload area */
+		label = undefined as string | undefined,
+
+		/** Error message displayed below the upload area */
+		error = undefined as string | undefined,
+
+		/** Whether to use dense spacing */
+		dense = false,
+
+		/** Whether to use comfortable spacing */
+		comfortable = false,
+
+		/** The id of the file input element */
+		id = propId,
+
+		/** The name attribute for the file input */
+		name = undefined as string | undefined,
+
+		/** Custom class name */
+		class: class_name = '',
+
+		/** Called when files are selected */
+		onselect = undefined as ((detail: { files: File[] }) => void) | undefined,
+
+		/** Called when a file is removed */
+		onremove = undefined as ((detail: { file: File; index: number }) => void) | undefined,
+
+		/** Called when a file fails validation */
+		onerror = undefined as ((detail: { file: File; error: string }) => void) | undefined,
+
+		/** Custom snippet for rendering each file item */
+		file_item = undefined as
+			| Snippet<[{ file: File; index: number; remove: () => void }]>
+			| undefined,
+	} = $props();
+
+	let drag_counter = $state(0);
+	let input_element = $state<HTMLInputElement | undefined>(undefined);
+	let preview_urls = $state<Map<File, string>>(new Map());
+
+	const is_drag_over = $derived(drag_counter > 0);
+
+	const variant = $derived(avatar ? 'avatar' : compact ? 'compact' : 'dropzone');
+
+	const avatar_preview_url = $derived(
+		avatar && files.length > 0 && isImage(files[0])
+			? preview_urls.get(files[0])
+			: undefined,
+	);
+
+	/**
+	 * Sync preview_urls with the given file list:
+	 * - Create object URLs for new image files
+	 * - Revoke object URLs for files that are no longer present
+	 * Called imperatively from validateAndAddFiles/removeFile/etc.
+	 */
+	function syncPreviewUrls(next_files: File[]) {
+		const next = new Map<File, string>();
+		for (const file of next_files) {
+			if (!isImage(file)) continue;
+			const existing = preview_urls.get(file);
+			next.set(file, existing ?? URL.createObjectURL(file));
+		}
+		// Revoke URLs for files that have been removed
+		for (const [file, url] of preview_urls) {
+			if (next.get(file) !== url) URL.revokeObjectURL(url);
+		}
+		preview_urls = next;
+	}
+
+	// Note: remaining object URLs are left to be garbage-collected by the
+	// browser when the page unloads; revoking them here would require reading
+	// the reactive `preview_urls` state which caused effect loops.
+
+	function isImage(file: File): boolean {
+		return file.type.startsWith('image/');
+	}
+
+	function formatSize(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+
+	function matchesAccept(file: File, accept_str: string): boolean {
+		const tokens = accept_str.split(',').map((t) => t.trim().toLowerCase());
+		const file_type = file.type.toLowerCase();
+		const file_ext = '.' + file.name.split('.').pop()?.toLowerCase();
+
+		for (const token of tokens) {
+			if (token.startsWith('.')) {
+				if (file_ext === token) return true;
+			} else if (token.endsWith('/*')) {
+				const category = token.slice(0, token.indexOf('/'));
+				if (file_type.startsWith(category + '/')) return true;
+			} else {
+				if (file_type === token) return true;
+			}
+		}
+		return false;
+	}
+
+	function validateAndAddFiles(incoming: File[]) {
+		const valid_files: File[] = [];
+
+		for (const file of incoming) {
+			// Type validation
+			if (accept && !matchesAccept(file, accept)) {
+				onerror?.({
+					file,
+					error: `File type "${file.type || file.name}" is not accepted`,
+				});
+				continue;
+			}
+
+			// Size validation
+			if (max_size && file.size > max_size) {
+				onerror?.({
+					file,
+					error: `File exceeds maximum size of ${formatSize(max_size)}`,
+				});
+				continue;
+			}
+
+			valid_files.push(file);
+		}
+
+		if (valid_files.length === 0) return;
+
+		// For avatar, always replace
+		if (avatar) {
+			const next = [valid_files[0]];
+			files = next;
+			syncPreviewUrls(next);
+			onselect?.({ files: next });
+			return;
+		}
+
+		let new_files: File[];
+		if (multiple) {
+			new_files = [...files, ...valid_files];
+			// Count validation
+			if (max_files && new_files.length > max_files) {
+				const excess = new_files.slice(max_files);
+				for (const file of excess) {
+					onerror?.({ file, error: `Maximum of ${max_files} files allowed` });
+				}
+				new_files = new_files.slice(0, max_files);
+			}
+		} else {
+			new_files = [valid_files[0]];
+		}
+
+		files = new_files;
+		syncPreviewUrls(new_files);
+		onselect?.({ files: new_files });
+	}
+
+	function removeFile(index: number) {
+		const file = files[index];
+		if (!file) return;
+		const next = files.filter((_, i) => i !== index);
+		files = next;
+		syncPreviewUrls(next);
+		onremove?.({ file, index });
+	}
+
+	function openFilePicker() {
+		if (disabled || skeleton) return;
+		input_element?.click();
+	}
+
+	function onInputChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (!input.files?.length) return;
+		validateAndAddFiles(Array.from(input.files));
+		// Reset input so same file can be re-selected
+		input.value = '';
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			openFilePicker();
+		}
+	}
+
+	function onDragEnter(e: DragEvent) {
+		e.preventDefault();
+		if (disabled || skeleton) return;
+		drag_counter++;
+	}
+
+	function onDragOver(e: DragEvent) {
+		e.preventDefault();
+	}
+
+	function onDragLeave(e: DragEvent) {
+		e.preventDefault();
+		if (disabled || skeleton) return;
+		drag_counter--;
+	}
+
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		if (disabled || skeleton) return;
+		drag_counter = 0;
+		if (!e.dataTransfer?.files?.length) return;
+		validateAndAddFiles(Array.from(e.dataTransfer.files));
+	}
+
+	const error_id = `${id}-error`;
+	const label_id = `${id}-label`;
+</script>
+
+<div
+	class={['file-upload', `size-${size}`, `variant-${variant}`, class_name]
+		.filter(Boolean)
+		.join(' ')}
+	class:disabled
+	class:dense
+	class:comfortable
+	class:skeleton
+	class:has-error={!!error}>
+	{#if label}
+		<label id={label_id} for={id}>{label}</label>
+	{/if}
+
+	<input
+		type="file"
+		bind:this={input_element}
+		{id}
+		{name}
+		{accept}
+		multiple={avatar ? false : multiple}
+		{disabled}
+		onchange={onInputChange}
+		tabindex={-1}
+		aria-hidden="true" />
+
+	{#if variant === 'avatar'}
+		<!-- Avatar variant: circular preview area -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="avatar-upload"
+			class:drag-over={is_drag_over}
+			class:has-image={!!avatar_preview_url}
+			role="button"
+			tabindex={disabled ? -1 : 0}
+			aria-label={label || 'Upload avatar'}
+			ondragenter={onDragEnter}
+			ondragover={onDragOver}
+			ondragleave={onDragLeave}
+			ondrop={onDrop}
+			onclick={openFilePicker}
+			onkeydown={onKeyDown}
+			{@attach ripple({ enabled: !disabled && !skeleton })}>
+			{#if avatar_preview_url}
+				<img class="avatar-preview" src={avatar_preview_url} alt="Avatar preview" />
+			{:else}
+				<!-- Default state shows a clear "add photo" affordance so it's
+				     not just an empty circle. -->
+				<div class="avatar-placeholder" aria-hidden="true">
+					<svg viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"
+							stroke="currentColor"
+							stroke-width="1.6"
+							fill="none" />
+						<circle
+							cx="12"
+							cy="13"
+							r="4"
+							stroke="currentColor"
+							stroke-width="1.6"
+							fill="none" />
+					</svg>
+				</div>
+			{/if}
+			<div class="avatar-overlay">
+				<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+					<path
+						d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"
+						stroke="currentColor"
+						stroke-width="2"
+						fill="none" />
+					<circle
+						cx="12"
+						cy="13"
+						r="4"
+						stroke="currentColor"
+						stroke-width="2"
+						fill="none" />
+				</svg>
+			</div>
+		</div>
+	{:else if variant === 'compact'}
+		<!-- Compact variant: uses the delightstack Button so it picks up ripple,
+		     :active scaling, and consistent styling. The wrapping div carries
+		     the drag/drop listeners. -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="compact-wrapper"
+			class:drag-over={is_drag_over}
+			ondragenter={onDragEnter}
+			ondragover={onDragOver}
+			ondragleave={onDragLeave}
+			ondrop={onDrop}>
+			<Button outline {disabled} onclick={openFilePicker}>
+				<svg
+					class="upload-icon"
+					viewBox="0 0 24 24"
+					width="16"
+					height="16"
+					aria-hidden="true">
+					<path
+						d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						fill="none" />
+				</svg>
+				<span>Choose file{multiple ? 's' : ''}</span>
+			</Button>
+		</div>
+	{:else}
+		<!-- Dropzone variant: large dashed border area -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="dropzone"
+			class:drag-over={is_drag_over}
+			role="button"
+			tabindex={disabled ? -1 : 0}
+			aria-label={label || 'Drop files here or click to browse'}
+			ondragenter={onDragEnter}
+			ondragover={onDragOver}
+			ondragleave={onDragLeave}
+			ondrop={onDrop}
+			onclick={openFilePicker}
+			onkeydown={onKeyDown}
+			{@attach ripple({ enabled: !disabled && !skeleton })}>
+			<svg class="upload-icon" viewBox="0 0 24 24" aria-hidden="true">
+				<path
+					d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					fill="none" />
+			</svg>
+			<p class="dropzone-text">
+				Drop files here or <span class="browse-link">browse</span>
+			</p>
+			{#if accept && humanizeAccept(accept)}
+				<p class="dropzone-hint">{humanizeAccept(accept)}</p>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- File list (shown for dropzone and compact variants) -->
+	{#if !avatar && files.length > 0}
+		<div class="file-list" role="list" aria-label="Selected files">
+			{#each files as file, index (file)}
+				{#if file_item}
+					{@render file_item({ file, index, remove: () => removeFile(index) })}
+				{:else}
+					<div class="file-item" role="listitem">
+						{#if preview && isImage(file) && preview_urls.get(file)}
+							<img class="file-preview" src={preview_urls.get(file)} alt={file.name} />
+						{/if}
+						<div class="file-info">
+							<span class="file-name">{file.name}</span>
+							<span class="file-size">{formatSize(file.size)}</span>
+						</div>
+						<button
+							type="button"
+							class="remove-button"
+							aria-label="Remove {file.name}"
+							onclick={() => removeFile(index)}>
+							<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+								<path
+									d="M18 6L6 18M6 6l12 12"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									fill="none" />
+							</svg>
+						</button>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+
+	{#if error}
+		<p class="error-message" id={error_id} role="alert">{error}</p>
+	{/if}
+</div>
+
+<style>
+	/* Visually-hidden native file input (the visible controls proxy to it) */
+	input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.file-upload {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		font-size: 1em;
+
+		&.dense {
+			gap: 0.25em;
+		}
+		&.comfortable {
+			gap: 0.75em;
+		}
+
+		/* Sizes */
+		&.size-0 {
+			font-size: var(--text-sm, 0.75rem);
+		}
+		&.size-1 {
+			font-size: var(--text-base, 0.875rem);
+		}
+		&.size-2 {
+			font-size: var(--text-lg, 1rem);
+		}
+		&.size-3 {
+			font-size: var(--text-xl, 1.125rem);
+		}
+	}
+
+	/* Skeleton — the real dropzone/avatar keeps its exact box (padding, border
+	   width, min-height, corner radius — including the avatar's circle) with
+	   its content made invisible, so swapping to the live control causes no
+	   layout shift. The well carries the canonical sweep; faint static shapes
+	   over the hidden icon/text hint at the layout inside. */
+	.file-upload.skeleton {
+		pointer-events: none;
+
+		/* Label — invisible text keeps the gutter; a pill bar stands in for it.
+		   The bar is a pseudo-element (it can't host its own ::after), so the
+		   sweep is emulated with background-position using the same geometry and
+		   timing as the global delight-skeleton-shimmer. */
+		label {
+			position: relative;
+			visibility: hidden;
+
+			&::before {
+				content: '';
+				visibility: visible;
+				position: absolute;
+				top: 50%;
+				translate: 0 -50%;
+				height: 0.7em;
+				width: 7em;
+				border-radius: var(--radius-full, 1e5px);
+				background-color: var(
+					--skeleton-bg,
+					rgb(from var(--color-text, #888) r g b / 0.1)
+				);
+				background-image: linear-gradient(
+					105deg,
+					transparent 37.5%,
+					var(--skeleton-sheen, rgb(from var(--color-text, #888) r g b / 0.12)) 50%,
+					transparent 62.5%
+				);
+				background-size: 200% 100%;
+				background-repeat: no-repeat;
+				background-position: 150% 0;
+				animation: file-upload-skeleton-sweep var(--skeleton-duration, 2.4s) ease-in-out
+					infinite;
+			}
+		}
+
+		/* Wells: keep the real shape, swap the dashed border for a flat fill and
+		   sweep a sheen across (both have overflow:hidden + position:relative).
+		   Staggered 120ms after the label bar. */
+		.dropzone,
+		.avatar-upload {
+			--shimmer-delay: 120ms;
+			background: var(--skeleton-bg, rgb(from var(--color-text, #888) r g b / 0.1));
+			border-color: transparent;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				transform: translateX(-100%);
+				background-image: linear-gradient(
+					105deg,
+					transparent 25%,
+					var(--skeleton-sheen, rgb(from var(--color-text, #888) r g b / 0.12)) 50%,
+					transparent 75%
+				);
+				animation: delight-skeleton-shimmer var(--skeleton-duration, 2.4s) ease-in-out
+					infinite;
+				animation-delay: var(--shimmer-delay, 0s);
+			}
+		}
+
+		/* Hide the real content but keep it in the layout (currentColor strokes
+		   and text both vanish with `color: transparent`). */
+		.dropzone :is(.upload-icon, .dropzone-text, .dropzone-hint, .browse-link),
+		.avatar-upload .avatar-placeholder {
+			color: transparent;
+		}
+		.avatar-upload .avatar-overlay {
+			visibility: hidden;
+		}
+
+		/* Glyph hint: fill the icon's own box — the translucent fills stack, so it
+		   reads slightly darker than the well beneath it. */
+		.dropzone .upload-icon {
+			background: var(--skeleton-bg, rgb(from var(--color-text, #888) r g b / 0.1));
+			border-radius: var(--radius-md, 4px);
+		}
+
+		/* Text/hint bars centered over the real lines they stand in for. */
+		.dropzone-text,
+		.dropzone-hint {
+			position: relative;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				translate: -50% -50%;
+				height: 0.7em;
+				width: 12em;
+				border-radius: var(--radius-full, 1e5px);
+				background: var(--skeleton-bg, rgb(from var(--color-text, #888) r g b / 0.1));
+			}
+		}
+		.dropzone-hint::before {
+			width: 8em;
+		}
+	}
+
+	@keyframes -global-delight-skeleton-shimmer {
+		0% {
+			transform: translateX(-100%);
+		}
+		55%,
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+	/* background-position twin of delight-skeleton-shimmer for pseudo-element
+	   placeholders: a 200%-wide image whose centered band spans half the box,
+	   travelling the same -100% → +100% distance with the same rest beat. */
+	@keyframes file-upload-skeleton-sweep {
+		0% {
+			background-position: 150% 0;
+		}
+		55%,
+		100% {
+			background-position: -50% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.file-upload.skeleton label::before,
+		.file-upload.skeleton .dropzone::after,
+		.file-upload.skeleton .avatar-upload::after {
+			animation: none;
+		}
+	}
+
+	/* Label */
+	label {
+		font-weight: 600;
+		font-size: 0.875em;
+		color: var(--color-text, inherit);
+		line-height: 1.4;
+	}
+
+	/* Dropzone variant */
+	.dropzone {
+		position: relative;
+		border: 2px dashed var(--color-border, hsl(0 0% 80%));
+		border-radius: var(--radius-lg, 8px);
+		padding: 2rem;
+		text-align: center;
+		cursor: pointer;
+		overflow: hidden;
+		transition:
+			border-color 200ms,
+			background 200ms,
+			translate 200ms ease;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5em;
+		outline: none;
+		-webkit-tap-highlight-color: transparent;
+
+		&:active:not([aria-disabled='true']) {
+			translate: 0 1px;
+			transition: translate 100ms ease;
+		}
+
+		&:hover {
+			border-color: var(--color-action, hsl(220 70% 55%));
+			transition: none;
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--color-border-active, currentColor);
+			outline-offset: 2px;
+		}
+
+		&.drag-over {
+			border-color: var(--color-action, hsl(220 70% 55%));
+			background: color-mix(
+				in oklch,
+				var(--color-action, hsl(220 70% 55%)) 5%,
+				transparent
+			);
+			transition: none;
+		}
+	}
+
+	.disabled .dropzone {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	.upload-icon {
+		width: 2em;
+		height: 2em;
+		color: var(--color-text-muted, hsl(0 0% 45%));
+	}
+
+	.dropzone-text {
+		margin: 0;
+		color: var(--color-text-muted, hsl(0 0% 45%));
+		font-size: 0.9em;
+	}
+
+	.browse-link {
+		color: var(--color-action, hsl(220 70% 55%));
+		text-decoration: underline;
+		font-weight: 500;
+	}
+
+	.dropzone-hint {
+		margin: 0;
+		color: var(--color-text-disabled, hsl(0 0% 60%));
+		font-size: 0.75em;
+	}
+
+	/* Compact wrapper (drag/drop area around delightstack Button) */
+	.compact-wrapper {
+		display: inline-block;
+	}
+	.compact-wrapper.drag-over :global(.button) {
+		--color-bg-active: color-mix(
+			in oklch,
+			var(--color-action, hsl(220 70% 55%)) 8%,
+			transparent
+		);
+	}
+	.compact-wrapper .upload-icon {
+		width: 1em;
+		height: 1em;
+		/* Match the Button's text colour rather than the muted dropzone grey. */
+		color: currentColor;
+	}
+
+	/* Avatar variant */
+	.avatar-upload {
+		width: 6rem;
+		height: 6rem;
+		border-radius: 9999px;
+		overflow: hidden;
+		position: relative;
+		cursor: pointer;
+		border: 2px dashed var(--color-border, hsl(0 0% 80%));
+		background: light-dark(
+			var(--color-bg-muted, #f5f5f5),
+			var(--color-bg-muted, #1a1a1a)
+		);
+		transition: border-color 200ms;
+		outline: none;
+		-webkit-tap-highlight-color: transparent;
+
+		&:hover {
+			border-color: var(--color-action, hsl(220 70% 55%));
+			transition: none;
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--color-border-active, currentColor);
+			outline-offset: 2px;
+		}
+
+		&.drag-over {
+			border-color: var(--color-action, hsl(220 70% 55%));
+			transition: none;
+		}
+	}
+
+	.disabled .avatar-upload {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	.avatar-preview {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.avatar-placeholder {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-muted, hsl(0 0% 55%));
+	}
+	.avatar-placeholder svg {
+		width: 40%;
+		height: 40%;
+	}
+
+	.avatar-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgb(0 0 0 / 0);
+		backdrop-filter: blur(4px);
+		border-radius: 100%;
+		color: white;
+		transition: background 200ms;
+		opacity: 0;
+	}
+
+	.avatar-upload:hover .avatar-overlay,
+	.avatar-upload:focus-visible .avatar-overlay {
+		background: rgb(0 0 0 / 0.4);
+		opacity: 1;
+		/* Snap the scrim in on hover; the base rule eases it back out on leave. */
+		transition: none;
+	}
+
+	/* File list */
+	.file-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	.file-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		border-radius: var(--radius-sm, var(--radius-md, 4px));
+		@supports (corner-shape: squircle) {
+			corner-shape: squircle;
+			border-radius: calc(
+				var(--radius-sm, var(--radius-md, 4px)) * var(--squircle-ratio, 2)
+			);
+		}
+		background: light-dark(
+			var(--color-bg-muted, #f5f5f5),
+			var(--color-bg-muted, #1a1a1a)
+		);
+	}
+
+	.file-preview {
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: var(--radius-sm, var(--radius-md, 4px));
+		@supports (corner-shape: squircle) {
+			corner-shape: squircle;
+			border-radius: calc(
+				var(--radius-sm, var(--radius-md, 4px)) * var(--squircle-ratio, 2)
+			);
+		}
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+
+	.file-info {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.125em;
+	}
+
+	.file-name {
+		font-size: 0.875em;
+		color: var(--color-text, inherit);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.file-size {
+		font-size: 0.75em;
+		color: var(--color-text-muted, hsl(0 0% 45%));
+	}
+
+	.remove-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem;
+		border: none;
+		background: none;
+		color: var(--color-text-muted, hsl(0 0% 45%));
+		cursor: pointer;
+		border-radius: var(--radius-sm, var(--radius-md, 4px));
+		@supports (corner-shape: squircle) {
+			corner-shape: squircle;
+			border-radius: calc(
+				var(--radius-sm, var(--radius-md, 4px)) * var(--squircle-ratio, 2)
+			);
+		}
+		transition:
+			color 150ms,
+			background 150ms;
+		flex-shrink: 0;
+	}
+
+	.remove-button:hover {
+		color: var(--color-error, hsl(0 70% 55%));
+		background: color-mix(in oklch, var(--color-error, hsl(0 70% 55%)) 10%, transparent);
+		transition: none;
+	}
+	.remove-button:focus-visible {
+		outline: 2px solid var(--color-border-active, currentColor);
+		outline-offset: 2px;
+	}
+
+	/* Error state */
+	.has-error .dropzone,
+	.has-error .avatar-upload {
+		border-color: var(--color-error, hsl(0 70% 55%));
+	}
+
+	.error-message {
+		margin: 0;
+		font-size: 0.8em;
+		color: var(--color-error, hsl(0 70% 55%));
+		line-height: 1.4;
+	}
+</style>