@r2digisolutions/components 0.6.2 → 0.6.7

package/dist/components/organisms/FileUploader/FileUploader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
+	import { i18n } from '../../../utils/i18n.svelte.js';
 
 	type FileKind = 'image' | 'video' | 'audio' | 'pdf' | 'doc' | 'other';
 	type UploaderVariant = 'multiple' | 'single' | 'avatar';
@@ -50,8 +51,8 @@
 
 	let {
 		id = `upload-${Math.random().toString(36).slice(2, 9)}`,
-		label = 'Upload files',
-		helperText = 'SVG, PNG, JPG or GIF (max. 10MB)',
+		label,
+		helperText,
 		accept = 'image/*',
 		variant = 'multiple',
 		view = $bindable('list'),
@@ -75,13 +76,13 @@
 
 	const isMultiple = $derived(variant === 'multiple');
 	const hasFile = $derived(fileList.length > 0);
+	const resolvedLabel = $derived(label ?? i18n.t('uploadFiles'));
+	const resolvedHelperText = $derived(helperText ?? i18n.t('uploadHelper'));
 	const primaryFile = $derived(fileList[0] as FileItem | undefined);
 	const externalSrc = $derived(src?.trim() || '');
-	const showSinglePreview = $derived(
-		variant === 'single' && (!!primaryFile || !!externalSrc)
-	);
+	const showSinglePreview = $derived(variant === 'single' && (!!primaryFile || !!externalSrc));
 	const singlePreviewUrl = $derived(primaryFile?.previewUrl || externalSrc);
-	const singlePreviewName = $derived(primaryFile?.name || srcName || 'Media');
+	const singlePreviewName = $derived(primaryFile?.name || srcName || i18n.t('media'));
 	const singlePreviewMeta = $derived(primaryFile?.sizeFormatted || '');
 
 	const labelId = $derived(`${id}-label`);
@@ -103,7 +104,8 @@
 		primaryFile?.kind === 'audio' ||
 			(!primaryFile &&
 				!!externalSrc &&
-				(resolvedAccept.includes('audio') || /\.(mp3|wav|ogg|m4a|aac|flac)(\?|$)/i.test(externalSrc)))
+				(resolvedAccept.includes('audio') ||
+					/\.(mp3|wav|ogg|m4a|aac|flac)(\?|$)/i.test(externalSrc)))
 	);
 	const dropLayout = $derived(layout === 'compact' ? 'compact' : layout);
 
@@ -142,9 +144,12 @@
 	function kindBadgeClass(kind: FileKind) {
 		if (kind === 'pdf') return 'bg-red-50 text-red-600 dark:bg-red-950/50 dark:text-red-300';
 		if (kind === 'doc') return 'bg-sky-50 text-sky-700 dark:bg-sky-950/50 dark:text-sky-300';
-		if (kind === 'image') return 'bg-brand-50 text-brand-700 dark:bg-brand-950/50 dark:text-brand-300';
-		if (kind === 'video') return 'bg-violet-50 text-violet-700 dark:bg-violet-950/50 dark:text-violet-300';
-		if (kind === 'audio') return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300';
+		if (kind === 'image')
+			return 'bg-brand-50 text-brand-700 dark:bg-brand-950/50 dark:text-brand-300';
+		if (kind === 'video')
+			return 'bg-violet-50 text-violet-700 dark:bg-violet-950/50 dark:text-violet-300';
+		if (kind === 'audio')
+			return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300';
 		return 'bg-surface-overlay text-secondary';
 	}
 
@@ -180,15 +185,15 @@
 
 		for (const file of incoming) {
 			if (variant === 'avatar' && !file.type.startsWith('image/')) {
-				rejected.push(`${file.name}: se requiere una imagen`);
+				rejected.push(i18n.t('imageRequired', { name: file.name }));
 				continue;
 			}
 			if (!matchesAccept(file)) {
-				rejected.push(`${file.name}: tipo no permitido`);
+				rejected.push(i18n.t('typeNotAllowed', { name: file.name }));
 				continue;
 			}
 			if (file.size > maxBytes) {
-				rejected.push(`${file.name}: supera ${maxSizeMb}MB`);
+				rejected.push(i18n.t('exceedsMaxSize', { name: file.name, max: maxSizeMb }));
 				continue;
 			}
 
@@ -296,7 +301,7 @@
 {#snippet fileBadge(kind: FileKind, className = '')}
 	<div
 		class={[
-			'flex items-center justify-center text-[10px] font-bold uppercase tracking-wide',
+			'font-bold tracking-wide flex items-center justify-center text-[10px] uppercase',
 			kindBadgeClass(kind),
 			className
 		]}
@@ -313,8 +318,8 @@
 	<div
 		role="button"
 		tabindex={disabled ? -1 : 0}
-		aria-labelledby={label ? labelId : undefined}
-		aria-describedby={[helperText ? helperId : '', errorMessage ? errorId : '']
+		aria-labelledby={resolvedLabel ? labelId : undefined}
+		aria-describedby={[resolvedHelperText ? helperId : '', errorMessage ? errorId : '']
 			.filter(Boolean)
 			.join(' ') || undefined}
 		aria-disabled={disabled || undefined}
@@ -332,27 +337,27 @@
 		onclick={openPicker}
 		class={[
 			'relative overflow-hidden border border-dashed transition-colors duration-150 outline-none',
-			'focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:border-brand-500',
+			'focus-visible:ring-brand-500/30 focus-visible:border-brand-500 focus-visible:ring-2',
 			'rounded-xl',
 			isDragging
 				? 'border-brand-500 bg-brand-500/5 dark:bg-brand-950/40'
 				: 'border-border bg-surface-elevated hover:border-border-strong hover:bg-surface-overlay/60',
-			disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+			disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
 		]}
 	>
 		<div
 			class={[
 				'flex',
 				vertical
-					? 'flex-col items-center gap-2 px-3 py-5 text-center'
+					? 'gap-2 px-3 py-5 flex-col items-center text-center'
 					: compact
-						? 'flex-row items-center gap-3 px-3 py-2.5'
-						: 'flex-row items-center gap-4 px-4 py-5 sm:px-5'
+						? 'gap-3 px-3 py-2.5 flex-row items-center'
+						: 'gap-4 px-4 py-5 sm:px-5 flex-row items-center'
 			]}
 		>
 			<div
 				class={[
-					'flex shrink-0 items-center justify-center rounded-lg transition-colors duration-150',
+					'rounded-lg flex shrink-0 items-center justify-center transition-colors duration-150',
 					vertical ? 'h-10 w-10' : compact ? 'h-8 w-8' : 'h-11 w-11',
 					isDragging
 						? 'bg-brand-600 text-white'
@@ -384,47 +389,44 @@
 					]}
 				>
 					{#if isDragging}
-						Drop files to upload
+						{i18n.t('dropToUpload')}
 					{:else}
-						Drop files or
-						<span class="text-brand-700 dark:text-brand-300"> browse</span>
+						{i18n.t('dropOrBrowse')}
+						<span class="text-brand-700 dark:text-brand-300"> {i18n.t('browse')}</span>
 					{/if}
 				</p>
-				{#if helperText}
+				{#if resolvedHelperText}
 					<p
 						id={helperId}
-						class={[
-							'mt-0.5 text-[11px] leading-relaxed text-secondary',
-							vertical && 'text-center'
-						]}
+						class={['mt-0.5 leading-relaxed text-secondary text-[11px]', vertical && 'text-center']}
 					>
-						{helperText}
+						{resolvedHelperText}
 					</p>
 				{/if}
 			</div>
 
 			{#if !disabled && !compact && !vertical}
 				<span
-					class="hidden sm:inline-flex shrink-0 items-center rounded-lg border border-border bg-surface-elevated px-3 py-1.5 text-xs font-medium text-primary pointer-events-none"
+					class="sm:inline-flex rounded-lg border-border bg-surface-elevated px-3 py-1.5 text-xs font-medium text-primary pointer-events-none hidden shrink-0 items-center border"
 				>
-					Browse
+					{i18n.t('browseButton')}
 				</span>
 			{/if}
 		</div>
 
 		{#if isDragging}
 			<div
-				class="pointer-events-none absolute inset-0 ring-2 ring-inset ring-brand-500/40 rounded-xl"
+				class="inset-0 ring-brand-500/40 rounded-xl pointer-events-none absolute ring-2 ring-inset"
 				aria-hidden="true"
 			></div>
 		{/if}
 	</div>
 {/snippet}
 
-<div class={['flex flex-col gap-3 w-full', className]}>
+<div class={['gap-3 flex w-full flex-col', className]}>
 	<input
 		bind:this={fileInputNode}
-		id={id}
+		{id}
 		type="file"
 		accept={resolvedAccept}
 		multiple={isMultiple}
@@ -435,31 +437,35 @@
 		aria-hidden="true"
 	/>
 
-	{#if label}
-		<div class="flex items-center justify-between gap-3">
-			<div id={labelId} class="text-sm font-medium text-primary">{label}</div>
+	{#if resolvedLabel}
+		<div class="gap-3 flex items-center justify-between">
+			<div id={labelId} class="text-sm font-medium text-primary">{resolvedLabel}</div>
 
 			{#if isMultiple && hasFile}
-				<div class="flex items-center gap-2">
+				<div class="gap-2 flex items-center">
 					{#if showViewToggle}
 						<div
-							class="inline-flex items-center rounded-lg border border-border bg-surface-elevated p-0.5"
+							class="rounded-lg border-border bg-surface-elevated p-0.5 inline-flex items-center border"
 							role="group"
-							aria-label="View mode"
+							aria-label={i18n.t('viewMode')}
 						>
 							<button
 								type="button"
 								onclick={() => (view = 'list')}
 								class={[
 									'rounded-md p-1.5 transition-colors',
-									view === 'list'
-										? 'bg-brand-600 text-white'
-										: 'text-secondary hover:text-primary'
+									view === 'list' ? 'bg-brand-600 text-white' : 'text-secondary hover:text-primary'
 								]}
 								aria-pressed={view === 'list'}
-								aria-label="List view"
+								aria-label={i18n.t('listView')}
 							>
-								<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<svg
+									class="h-3.5 w-3.5"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+								>
 									<path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" />
 								</svg>
 							</button>
@@ -468,17 +474,13 @@
 								onclick={() => (view = 'grid')}
 								class={[
 									'rounded-md p-1.5 transition-colors',
-									view === 'grid'
-										? 'bg-brand-600 text-white'
-										: 'text-secondary hover:text-primary'
+									view === 'grid' ? 'bg-brand-600 text-white' : 'text-secondary hover:text-primary'
 								]}
 								aria-pressed={view === 'grid'}
-								aria-label="Grid view"
+								aria-label={i18n.t('gridView')}
 							>
 								<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="currentColor">
-									<path
-										d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z"
-									/>
+									<path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z" />
 								</svg>
 							</button>
 						</div>
@@ -490,7 +492,7 @@
 							onclick={clearAll}
 							class="text-xs font-medium text-secondary hover:text-primary transition-colors"
 						>
-							Clear all
+							{i18n.t('clearAll')}
 						</button>
 					{/if}
 				</div>
@@ -500,13 +502,13 @@
 
 	<!-- Avatar variant -->
 	{#if variant === 'avatar'}
-		<div class="flex items-center gap-4">
+		<div class="gap-4 flex items-center">
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				role="button"
 				tabindex={disabled ? -1 : 0}
-				aria-labelledby={label ? labelId : undefined}
-				aria-describedby={helperText ? helperId : undefined}
+				aria-labelledby={resolvedLabel ? labelId : undefined}
+				aria-describedby={resolvedHelperText ? helperId : undefined}
 				aria-disabled={disabled || undefined}
 				ondragenter={handleDragEnter}
 				ondragover={handleDragOver}
@@ -521,14 +523,14 @@
 				}}
 				onclick={openPicker}
 				class={[
-					'relative group h-24 w-24 shrink-0 rounded-full border-2 border-dashed overflow-hidden transition-colors outline-none',
-					'focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:border-brand-500',
+					'group h-24 w-24 relative shrink-0 overflow-hidden rounded-full border-2 border-dashed transition-colors outline-none',
+					'focus-visible:ring-brand-500/30 focus-visible:border-brand-500 focus-visible:ring-2',
 					isDragging
 						? 'border-brand-500 bg-brand-500/10'
 						: hasFile || externalSrc
 							? 'border-transparent'
 							: 'border-border bg-surface-elevated hover:border-border-strong',
-					disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+					disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
 				]}
 			>
 				{#if primaryFile?.previewUrl || externalSrc}
@@ -539,13 +541,19 @@
 					/>
 					{#if !disabled}
 						<div
-							class="absolute inset-0 flex items-center justify-center bg-black/45 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+							class="inset-0 bg-black/45 absolute flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
 						>
 							<span
-								class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white text-primary shadow-sm"
+								class="h-8 w-8 bg-white text-primary shadow-sm inline-flex items-center justify-center rounded-full"
 								aria-hidden="true"
 							>
-								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<svg
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
 									<path
 										stroke-linecap="round"
 										stroke-linejoin="round"
@@ -556,115 +564,135 @@
 						</div>
 					{/if}
 				{:else}
-					<div class="flex h-full w-full flex-col items-center justify-center gap-1 text-secondary">
-						<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
+					<div class="gap-1 text-secondary flex h-full w-full flex-col items-center justify-center">
+						<svg
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.75"
+						>
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
 								d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0"
 							/>
 						</svg>
-						<span class="text-[10px] font-medium">Upload</span>
+						<span class="font-medium text-[10px]">{i18n.t('upload')}</span>
 					</div>
 				{/if}
 			</div>
 
 			<div class="min-w-0 flex-1">
 				{#if primaryFile}
-					<p class="truncate text-sm font-medium text-primary">{primaryFile.name}</p>
+					<p class="text-sm font-medium text-primary truncate">{primaryFile.name}</p>
 					<p class="text-xs text-secondary">{primaryFile.sizeFormatted}</p>
-					<div class="mt-2 flex items-center gap-2">
+					<div class="mt-2 gap-2 flex items-center">
 						<button
 							type="button"
 							onclick={openPicker}
-							disabled={disabled}
-							class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-surface-elevated px-2.5 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-surface-overlay disabled:opacity-50"
+							{disabled}
+							class="gap-1.5 rounded-lg border-border bg-surface-elevated px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-surface-overlay inline-flex items-center border transition-colors disabled:opacity-50"
 						>
-							<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<svg
+								class="h-3.5 w-3.5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
 								<path
 									stroke-linecap="round"
 									stroke-linejoin="round"
 									d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"
 								/>
 							</svg>
-							Change
+							{i18n.t('change')}
 						</button>
 						<button
 							type="button"
 							onclick={() => primaryFile && removeFile(primaryFile.id)}
-							disabled={disabled}
-							class="inline-flex items-center rounded-lg px-2.5 py-1.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40 disabled:opacity-50"
+							{disabled}
+							class="rounded-lg px-2.5 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40 inline-flex items-center transition-colors disabled:opacity-50"
 						>
-							Remove
+							{i18n.t('remove')}
 						</button>
 					</div>
 				{:else}
-					<p class="text-sm font-medium text-primary">Add a profile photo</p>
-					{#if helperText}
-						<p id={helperId} class="mt-0.5 text-xs text-secondary">{helperText}</p>
+					<p class="text-sm font-medium text-primary">{i18n.t('addProfilePhoto')}</p>
+					{#if resolvedHelperText}
+						<p id={helperId} class="mt-0.5 text-xs text-secondary">{resolvedHelperText}</p>
 					{/if}
 				{/if}
 			</div>
 		</div>
 
-	<!-- Single variant: preview card with edit -->
+		<!-- Single variant: preview card with edit -->
 	{:else if showSinglePreview}
 		<div
 			class={[
-				'overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-sm',
-				isDragging && 'ring-2 ring-brand-500/40'
+				'rounded-xl border-border bg-surface-elevated shadow-sm overflow-hidden border',
+				isDragging && 'ring-brand-500/40 ring-2'
 			]}
 			ondragenter={handleDragEnter}
 			ondragover={handleDragOver}
 			ondragleave={handleDragLeave}
 			ondrop={handleDrop}
 			role="group"
-			aria-labelledby={label ? labelId : undefined}
+			aria-labelledby={resolvedLabel ? labelId : undefined}
 		>
-			<div class="relative aspect-video bg-surface-overlay">
+			<div class="aspect-video bg-surface-overlay relative">
 				{#if singlePreviewUrl && singleIsVideo}
-					<video
-						src={singlePreviewUrl}
-						class="h-full w-full object-cover"
-						muted
-						playsinline
+					<video src={singlePreviewUrl} class="h-full w-full object-cover" muted playsinline
 					></video>
 				{:else if singlePreviewUrl && singleIsAudio}
-					<div class="flex h-full w-full flex-col items-center justify-center gap-3 px-4">
+					<div class="gap-3 px-4 flex h-full w-full flex-col items-center justify-center">
 						{@render fileBadge('audio', 'h-14 w-14 rounded-xl text-xs')}
-						<audio src={singlePreviewUrl} controls class="w-full max-w-xs"></audio>
+						<audio src={singlePreviewUrl} controls class="max-w-xs w-full"></audio>
 					</div>
 				{:else if singlePreviewUrl}
 					<img src={singlePreviewUrl} alt="" class="h-full w-full object-cover" />
 				{:else}
-					<div class="flex h-full w-full flex-col items-center justify-center gap-2">
+					<div class="gap-2 flex h-full w-full flex-col items-center justify-center">
 						{@render fileBadge(primaryFile?.kind ?? 'other', 'h-14 w-14 rounded-xl text-xs')}
 					</div>
 				{/if}
 
 				{#if !disabled}
-					<div class="absolute right-3 top-3 flex items-center gap-1.5">
+					<div class="right-3 top-3 gap-1.5 absolute flex items-center">
 						<button
 							type="button"
 							onclick={openPicker}
-							class="inline-flex items-center gap-1.5 rounded-lg bg-white/95 px-2.5 py-1.5 text-xs font-medium text-primary shadow-sm backdrop-blur transition hover:bg-white dark:bg-slate-900/95 dark:hover:bg-slate-900"
+							class="gap-1.5 rounded-lg bg-white/95 px-2.5 py-1.5 text-xs font-medium text-primary shadow-sm backdrop-blur hover:bg-white dark:bg-slate-900/95 dark:hover:bg-slate-900 inline-flex items-center transition"
 						>
-							<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<svg
+								class="h-3.5 w-3.5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
 								<path
 									stroke-linecap="round"
 									stroke-linejoin="round"
 									d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"
 								/>
 							</svg>
-							Edit
+							{i18n.t('edit')}
 						</button>
 						<button
 							type="button"
 							onclick={clearSingle}
-							class="inline-flex items-center justify-center rounded-lg bg-white/95 p-1.5 text-secondary shadow-sm backdrop-blur transition hover:bg-white hover:text-red-600 dark:bg-slate-900/95 dark:hover:bg-slate-900 dark:hover:text-red-400"
-							aria-label={`Remove ${singlePreviewName}`}
+							class="rounded-lg bg-white/95 p-1.5 text-secondary shadow-sm backdrop-blur hover:bg-white hover:text-red-600 dark:bg-slate-900/95 dark:hover:bg-slate-900 dark:hover:text-red-400 inline-flex items-center justify-center transition"
+							aria-label={i18n.t('removeNamed', { name: singlePreviewName })}
 						>
-							<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<svg
+								class="h-3.5 w-3.5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
 								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 							</svg>
 						</button>
@@ -672,20 +700,20 @@
 				{/if}
 			</div>
 
-			<div class="flex items-center justify-between gap-3 border-t border-border px-4 py-3">
+			<div class="gap-3 border-border px-4 py-3 flex items-center justify-between border-t">
 				<div class="min-w-0">
-					<p class="truncate text-sm font-medium text-primary">{singlePreviewName}</p>
+					<p class="text-sm font-medium text-primary truncate">{singlePreviewName}</p>
 					{#if singlePreviewMeta}
 						<p class="text-xs text-secondary">{singlePreviewMeta}</p>
 					{/if}
 				</div>
-				{#if helperText}
-					<p id={helperId} class="shrink-0 text-xs text-secondary">{helperText}</p>
+				{#if resolvedHelperText}
+					<p id={helperId} class="text-xs text-secondary shrink-0">{resolvedHelperText}</p>
 				{/if}
 			</div>
 		</div>
 
-	<!-- Dropzone: hide the big one when multiple already has files (compact “add more” below) -->
+		<!-- Dropzone: hide the big one when multiple already has files (compact “add more” below) -->
 	{:else if !(isMultiple && hasFile && showFileList)}
 		{@render dropzone()}
 	{/if}
@@ -697,12 +725,12 @@
 	<!-- Multiple file cards (optional — MediaAssetBrowser owns its own grid) -->
 	{#if isMultiple && hasFile && showFileList}
 		{#if view === 'grid'}
-			<ul class="grid grid-cols-2 gap-2.5 sm:grid-cols-3" aria-label="Selected files">
+			<ul class="gap-2.5 sm:grid-cols-3 grid grid-cols-2" aria-label={i18n.t('selectedFiles')}>
 				{#each fileList as item (item.id)}
 					<li
-						class="group relative overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-sm transition hover:border-border-strong"
+						class="group rounded-xl border-border bg-surface-elevated shadow-sm hover:border-border-strong relative overflow-hidden border transition"
 					>
-						<div class="relative aspect-square bg-surface-overlay">
+						<div class="bg-surface-overlay relative aspect-square">
 							{#if item.previewUrl}
 								<img src={item.previewUrl} alt="" class="h-full w-full object-cover" />
 							{:else}
@@ -715,51 +743,63 @@
 								<button
 									type="button"
 									onclick={() => removeFile(item.id)}
-									class="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/95 text-secondary opacity-0 shadow-sm backdrop-blur transition group-hover:opacity-100 hover:text-red-600 focus-visible:opacity-100 dark:bg-slate-900/95 dark:hover:text-red-400"
-									aria-label={`Remove ${item.name}`}
+									class="right-2 top-2 h-7 w-7 rounded-lg bg-white/95 text-secondary shadow-sm backdrop-blur hover:text-red-600 dark:bg-slate-900/95 dark:hover:text-red-400 absolute inline-flex items-center justify-center opacity-0 transition group-hover:opacity-100 focus-visible:opacity-100"
+									aria-label={i18n.t('removeNamed', { name: item.name })}
 								>
-									<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<svg
+										class="h-3.5 w-3.5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+										stroke-width="2"
+									>
 										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 									</svg>
 								</button>
 							{/if}
 						</div>
-						<div class="border-t border-border px-2.5 py-2">
-							<p class="truncate text-xs font-medium text-primary">{item.name}</p>
+						<div class="border-border px-2.5 py-2 border-t">
+							<p class="text-xs font-medium text-primary truncate">{item.name}</p>
 							<p class="text-xs text-secondary">{item.sizeFormatted}</p>
 						</div>
 					</li>
 				{/each}
 			</ul>
 		{:else}
-			<ul class="flex flex-col gap-2" aria-label="Selected files">
+			<ul class="gap-2 flex flex-col" aria-label={i18n.t('selectedFiles')}>
 				{#each fileList as item (item.id)}
 					<li
-						class="group flex items-center gap-3 rounded-xl border border-border bg-surface-elevated p-2.5 shadow-sm transition hover:border-border-strong"
+						class="group gap-3 rounded-xl border-border bg-surface-elevated p-2.5 shadow-sm hover:border-border-strong flex items-center border transition"
 					>
 						{#if item.previewUrl}
 							<img
 								src={item.previewUrl}
 								alt=""
-								class="h-12 w-12 shrink-0 rounded-lg object-cover border border-border"
+								class="h-12 w-12 rounded-lg border-border shrink-0 border object-cover"
 							/>
 						{:else}
 							{@render fileBadge(item.kind, 'h-12 w-12 shrink-0 rounded-lg')}
 						{/if}
 
 						<div class="min-w-0 flex-1">
-							<p class="truncate text-sm font-medium text-primary">{item.name}</p>
+							<p class="text-sm font-medium text-primary truncate">{item.name}</p>
 							<p class="text-xs text-secondary">{item.sizeFormatted} · {kindLabel(item.kind)}</p>
 						</div>
 
 						<button
 							type="button"
 							onclick={() => removeFile(item.id)}
-							disabled={disabled}
-							class="shrink-0 rounded-lg p-2 text-secondary transition hover:bg-red-50 hover:text-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30 dark:hover:bg-red-950/40 dark:hover:text-red-400 disabled:opacity-50"
-							aria-label={`Remove ${item.name}`}
+							{disabled}
+							class="rounded-lg p-2 text-secondary hover:bg-red-50 hover:text-red-600 focus-visible:ring-brand-500/30 dark:hover:bg-red-950/40 dark:hover:text-red-400 shrink-0 transition focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+							aria-label={i18n.t('removeNamed', { name: item.name })}
 						>
-							<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<svg
+								class="h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
 								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 							</svg>
 						</button>

package/dist/index.d.ts

@@ -186,6 +186,9 @@ export { default as PasswordInput } from './components/molecules/PasswordInput/P
 export { default as CopyButton } from './components/molecules/CopyButton/CopyButton.svelte';
 export { default as SegmentedControl } from './components/molecules/SegmentedControl/SegmentedControl.svelte';
 export type { SegmentItem } from './components/molecules/SegmentedControl/SegmentedControl.svelte';
+export { default as Dock } from './components/molecules/Dock/Dock.svelte';
+export type { DockSize } from './components/molecules/Dock/Dock.svelte';
+export { default as DockItem } from './components/molecules/Dock/DockItem.svelte';
 export { default as Popover } from './components/molecules/Popover/Popover.svelte';
 export type { PopoverPlacement, PopoverAlign } from './components/molecules/Popover/Popover.svelte';
 export { default as HoverCard } from './components/molecules/HoverCard/HoverCard.svelte';
@@ -212,6 +215,7 @@ export { default as DateRangePicker } from './components/molecules/DateRangePick
 export { default as Combobox } from './components/molecules/Combobox/Combobox.svelte';
 export type { ComboboxOption, ComboboxItemState } from './components/molecules/Combobox/Combobox.svelte';
 export { default as ComboboxItem } from './components/molecules/ComboboxItem/ComboboxItem.svelte';
+export { default as ComboboxMenuItem } from './components/molecules/ComboboxMenuItem/ComboboxMenuItem.svelte';
 export { COMBOBOX_CONTEXT, COMBOBOX_CREATE_KEY, getComboboxContext, setComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export type { ComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export { default as MultiSelect } from './components/molecules/MultiSelect/MultiSelect.svelte';

package/dist/index.js

@@ -150,6 +150,8 @@ export { default as SearchInput } from './components/molecules/SearchInput/Searc
 export { default as PasswordInput } from './components/molecules/PasswordInput/PasswordInput.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton/CopyButton.svelte';
 export { default as SegmentedControl } from './components/molecules/SegmentedControl/SegmentedControl.svelte';
+export { default as Dock } from './components/molecules/Dock/Dock.svelte';
+export { default as DockItem } from './components/molecules/Dock/DockItem.svelte';
 export { default as Popover } from './components/molecules/Popover/Popover.svelte';
 export { default as HoverCard } from './components/molecules/HoverCard/HoverCard.svelte';
 export { default as Timeline } from './components/molecules/Timeline/Timeline.svelte';
@@ -167,6 +169,7 @@ export { default as DateTimePicker } from './components/molecules/DateTimePicker
 export { default as DateRangePicker } from './components/molecules/DateRangePicker/DateRangePicker.svelte';
 export { default as Combobox } from './components/molecules/Combobox/Combobox.svelte';
 export { default as ComboboxItem } from './components/molecules/ComboboxItem/ComboboxItem.svelte';
+export { default as ComboboxMenuItem } from './components/molecules/ComboboxMenuItem/ComboboxMenuItem.svelte';
 export { COMBOBOX_CONTEXT, COMBOBOX_CREATE_KEY, getComboboxContext, setComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export { default as MultiSelect } from './components/molecules/MultiSelect/MultiSelect.svelte';
 export { default as ConfirmDialog } from './components/molecules/ConfirmDialog/ConfirmDialog.svelte';