@r2digisolutions/components 0.6.3 → 0.6.7

package/dist/components/molecules/Dock/Dock.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        size?: import("./Dock.svelte.ts").DockSize;
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        size: "sm";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Mini: Story;
+export declare const Medium: Story;

package/dist/components/molecules/Dock/Dock.stories.js

@@ -0,0 +1,14 @@
+import DockStory from './DockStory.svelte';
+const meta = {
+    title: 'Molecules/Dock',
+    component: DockStory,
+    tags: ['autodocs'],
+    argTypes: {
+        size: { control: 'select', options: ['mini', 'sm', 'md'] }
+    },
+    args: { size: 'sm' }
+};
+export default meta;
+export const Default = {};
+export const Mini = { args: { size: 'mini' } };
+export const Medium = { args: { size: 'md' } };

package/dist/components/molecules/Dock/Dock.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export type DockSize = 'mini' | 'sm' | 'md';
+
+	interface DockProps {
+		size?: DockSize;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { size = 'mini', class: className = '', children }: DockProps = $props();
+
+	const sizes: Record<DockSize, string> = {
+		mini: 'rounded-full p-0.5',
+		sm: 'rounded-full p-0.5',
+		md: 'rounded-2xl p-1'
+	};
+</script>
+
+<div
+	class={[
+		'border-border/70 bg-surface-overlay/80 shadow-sm backdrop-blur-md isolate inline-flex items-center overflow-hidden border',
+		sizes[size],
+		className
+	]}
+>
+	{@render children?.()}
+</div>

package/dist/components/molecules/Dock/Dock.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export type DockSize = 'mini' | 'sm' | 'md';
+interface DockProps {
+    size?: DockSize;
+    class?: string;
+    children?: Snippet;
+}
+declare const Dock: import("svelte").Component<DockProps, {}, "">;
+type Dock = ReturnType<typeof Dock>;
+export default Dock;

package/dist/components/molecules/Dock/DockItem.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { DockSize } from './Dock.svelte';
+
+	interface DockItemProps {
+		as?: 'button' | 'a';
+		href?: string;
+		onclick?: (e: MouseEvent) => void;
+		disabled?: boolean;
+		active?: boolean;
+		size?: DockSize;
+		ariaLabel?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		as = 'button',
+		href,
+		onclick,
+		disabled = false,
+		active = false,
+		size = 'mini',
+		ariaLabel,
+		class: className = '',
+		children
+	}: DockItemProps = $props();
+
+	const sizes: Record<DockSize, string> = {
+		mini: 'h-7 px-2 text-[11px]',
+		sm: 'h-8 px-2.5 text-xs',
+		md: 'h-9 px-3 text-sm'
+	};
+
+	const classes = $derived([
+		'relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap select-none font-medium transition-all duration-150',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+		sizes[size],
+		active
+			? 'bg-surface-elevated text-primary shadow-sm ring-1 ring-border'
+			: 'text-secondary hover:bg-surface-elevated/70 hover:text-primary',
+		disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer',
+		'[&[data-active]:first-child]:rounded-l-full',
+		'[&[data-active]:last-child]:rounded-r-full',
+		'[&[data-active]:not(:first-child):not(:last-child)]:rounded-none',
+		'[&:not([data-active]):first-child:hover]:rounded-l-full',
+		'[&:not([data-active]):last-child:hover]:rounded-r-full',
+		'[&:not([data-active]):not(:first-child):not(:last-child):hover]:rounded-none',
+		className
+	]);
+</script>
+
+{#if as === 'a' || href}
+	<a {href} aria-label={ariaLabel} data-active={active || undefined} class={classes}>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		type="button"
+		{disabled}
+		aria-label={ariaLabel}
+		aria-pressed={active}
+		data-active={active || undefined}
+		{onclick}
+		class={classes}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/molecules/Dock/DockItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { DockSize } from './Dock.svelte';
+interface DockItemProps {
+    as?: 'button' | 'a';
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    active?: boolean;
+    size?: DockSize;
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const DockItem: import("svelte").Component<DockItemProps, {}, "">;
+type DockItem = ReturnType<typeof DockItem>;
+export default DockItem;

package/dist/components/molecules/Dock/DockStory.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Dock from './Dock.svelte';
+	import DockItem from './DockItem.svelte';
+	import type { DockSize } from './Dock.svelte';
+
+	let { size = 'sm' }: { size?: DockSize } = $props();
+
+	let value = $state('es');
+	const langs = ['es', 'en', 'ca', 'fr', 'de'];
+	const filled = new Set(['es', 'en']);
+</script>
+
+<div class="gap-4 flex flex-col">
+	<Dock {size}>
+		{#each langs as lang (lang)}
+			<DockItem {size} active={value === lang} onclick={() => (value = lang)}>
+				{lang.toUpperCase()}
+				{#if filled.has(lang)}
+					<span class="h-1.5 w-1.5 bg-emerald-500 rounded-full" aria-hidden="true"></span>
+				{/if}
+			</DockItem>
+		{/each}
+	</Dock>
+	<p class="text-xs text-muted">Selected: {value.toUpperCase()}</p>
+</div>

package/dist/components/molecules/Dock/DockStory.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DockSize } from './Dock.svelte';
+type $$ComponentProps = {
+    size?: DockSize;
+};
+declare const DockStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type DockStory = ReturnType<typeof DockStory>;
+export default DockStory;

package/dist/components/molecules/SpeedDial/SpeedDial.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "destructive" | "toolbar" | "media" | "compose";
+        example?: "destructive" | "media" | "toolbar" | "compose";
         position?: import("./SpeedDial.svelte.ts").SpeedDialPosition;
         direction?: import("./SpeedDial.svelte.ts").SpeedDialDirection;
         variant?: import("./SpeedDial.svelte.ts").SpeedDialVariant;

package/dist/components/organisms/DataGrid/DataGrid.svelte.d.ts

@@ -77,7 +77,7 @@ declare function $$render<T extends Record<string, unknown> = Record<string, unk
         onrowdblclick?: (row: T) => void;
     };
     exports: {};
-    bindings: "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows" | "viewMode";
+    bindings: "viewMode" | "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows";
     slots: {};
     events: {};
 };
@@ -85,7 +85,7 @@ declare class __sveltets_Render<T extends Record<string, unknown> = Record<strin
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows" | "viewMode";
+    bindings(): "viewMode" | "notes" | "selection" | "marks" | "formatRules" | "filterQuery" | "columnFilters" | "expandedRows";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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';

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';

package/dist/utils/i18n.d.ts

@@ -1,4 +1,4 @@
-export type LocaleCode = 'en' | 'es' | 'pt' | 'fr' | 'de' | (string & {});
+export type LocaleCode = 'en' | 'es' | 'ca' | 'pt' | 'fr' | 'de' | (string & {});
 /** Built-in UI / form / validation strings. Apps can merge overrides. */
 export interface UiMessages {
     save: string;
@@ -14,6 +14,28 @@ export interface UiMessages {
     addItem: string;
     removeItem: string;
     noItems: string;
+    /** FileUploader */
+    uploadFiles: string;
+    uploadHelper: string;
+    dropToUpload: string;
+    dropOrBrowse: string;
+    browse: string;
+    browseButton: string;
+    viewMode: string;
+    listView: string;
+    gridView: string;
+    clearAll: string;
+    upload: string;
+    change: string;
+    remove: string;
+    edit: string;
+    removeNamed: string;
+    selectedFiles: string;
+    addProfilePhoto: string;
+    media: string;
+    imageRequired: string;
+    typeNotAllowed: string;
+    exceedsMaxSize: string;
     /** Validation */
     fieldRequired: string;
     invalidEmail: string;

package/dist/utils/i18n.js

@@ -12,6 +12,27 @@ const en = {
     addItem: 'Add item',
     removeItem: 'Remove item',
     noItems: 'No items yet',
+    uploadFiles: 'Upload files',
+    uploadHelper: 'SVG, PNG, JPG or GIF (max. 10MB)',
+    dropToUpload: 'Drop files to upload',
+    dropOrBrowse: 'Drop files or',
+    browse: 'browse',
+    browseButton: 'Browse',
+    viewMode: 'View mode',
+    listView: 'List view',
+    gridView: 'Grid view',
+    clearAll: 'Clear all',
+    upload: 'Upload',
+    change: 'Change',
+    remove: 'Remove',
+    edit: 'Edit',
+    removeNamed: 'Remove {name}',
+    selectedFiles: 'Selected files',
+    addProfilePhoto: 'Add a profile photo',
+    media: 'Media',
+    imageRequired: '{name}: an image is required',
+    typeNotAllowed: '{name}: file type not allowed',
+    exceedsMaxSize: '{name}: exceeds {max}MB',
     fieldRequired: 'This field is required',
     invalidEmail: 'Enter a valid email address',
     invalidUrl: 'Enter a valid URL',
@@ -35,6 +56,27 @@ const es = {
     addItem: 'Añadir elemento',
     removeItem: 'Eliminar elemento',
     noItems: 'Sin elementos todavía',
+    uploadFiles: 'Subir archivos',
+    uploadHelper: 'SVG, PNG, JPG o GIF (máx. 10MB)',
+    dropToUpload: 'Suelta los archivos para subirlos',
+    dropOrBrowse: 'Suelta archivos o',
+    browse: 'explora',
+    browseButton: 'Explorar',
+    viewMode: 'Modo de vista',
+    listView: 'Vista de lista',
+    gridView: 'Vista de cuadrícula',
+    clearAll: 'Borrar todo',
+    upload: 'Subir',
+    change: 'Cambiar',
+    remove: 'Quitar',
+    edit: 'Editar',
+    removeNamed: 'Quitar {name}',
+    selectedFiles: 'Archivos seleccionados',
+    addProfilePhoto: 'Añade una foto de perfil',
+    media: 'Multimedia',
+    imageRequired: '{name}: se requiere una imagen',
+    typeNotAllowed: '{name}: tipo no permitido',
+    exceedsMaxSize: '{name}: supera {max}MB',
     fieldRequired: 'Este campo es obligatorio',
     invalidEmail: 'Introduce un email válido',
     invalidUrl: 'Introduce una URL válida',
@@ -58,6 +100,27 @@ const pt = {
     addItem: 'Adicionar item',
     removeItem: 'Remover item',
     noItems: 'Ainda sem itens',
+    uploadFiles: 'Carregar ficheiros',
+    uploadHelper: 'SVG, PNG, JPG ou GIF (máx. 10MB)',
+    dropToUpload: 'Largue os ficheiros para carregar',
+    dropOrBrowse: 'Largue ficheiros ou',
+    browse: 'procurar',
+    browseButton: 'Procurar',
+    viewMode: 'Modo de visualização',
+    listView: 'Vista de lista',
+    gridView: 'Vista de grelha',
+    clearAll: 'Limpar tudo',
+    upload: 'Carregar',
+    change: 'Alterar',
+    remove: 'Remover',
+    edit: 'Editar',
+    removeNamed: 'Remover {name}',
+    selectedFiles: 'Ficheiros selecionados',
+    addProfilePhoto: 'Adicione uma foto de perfil',
+    media: 'Multimédia',
+    imageRequired: '{name}: é necessária uma imagem',
+    typeNotAllowed: '{name}: tipo não permitido',
+    exceedsMaxSize: '{name}: excede {max}MB',
     fieldRequired: 'Este campo é obrigatório',
     invalidEmail: 'Introduza um email válido',
     invalidUrl: 'Introduza um URL válido',
@@ -81,6 +144,27 @@ const fr = {
     addItem: 'Ajouter un élément',
     removeItem: 'Supprimer l’élément',
     noItems: 'Aucun élément pour l’instant',
+    uploadFiles: 'Téléverser des fichiers',
+    uploadHelper: 'SVG, PNG, JPG ou GIF (max. 10MB)',
+    dropToUpload: 'Déposez les fichiers pour les téléverser',
+    dropOrBrowse: 'Déposez des fichiers ou',
+    browse: 'parcourir',
+    browseButton: 'Parcourir',
+    viewMode: 'Mode d’affichage',
+    listView: 'Vue liste',
+    gridView: 'Vue grille',
+    clearAll: 'Tout effacer',
+    upload: 'Téléverser',
+    change: 'Changer',
+    remove: 'Retirer',
+    edit: 'Modifier',
+    removeNamed: 'Retirer {name}',
+    selectedFiles: 'Fichiers sélectionnés',
+    addProfilePhoto: 'Ajoutez une photo de profil',
+    media: 'Médias',
+    imageRequired: '{name} : une image est requise',
+    typeNotAllowed: '{name} : type non autorisé',
+    exceedsMaxSize: '{name} : dépasse {max}MB',
     fieldRequired: 'Ce champ est obligatoire',
     invalidEmail: 'Saisissez une adresse e-mail valide',
     invalidUrl: 'Saisissez une URL valide',
@@ -104,6 +188,27 @@ const de = {
     addItem: 'Element hinzufügen',
     removeItem: 'Element entfernen',
     noItems: 'Noch keine Elemente',
+    uploadFiles: 'Dateien hochladen',
+    uploadHelper: 'SVG, PNG, JPG oder GIF (max. 10MB)',
+    dropToUpload: 'Dateien zum Hochladen ablegen',
+    dropOrBrowse: 'Dateien ablegen oder',
+    browse: 'durchsuchen',
+    browseButton: 'Durchsuchen',
+    viewMode: 'Ansicht',
+    listView: 'Listenansicht',
+    gridView: 'Rasteransicht',
+    clearAll: 'Alle löschen',
+    upload: 'Hochladen',
+    change: 'Ändern',
+    remove: 'Entfernen',
+    edit: 'Bearbeiten',
+    removeNamed: '{name} entfernen',
+    selectedFiles: 'Ausgewählte Dateien',
+    addProfilePhoto: 'Profilfoto hinzufügen',
+    media: 'Medien',
+    imageRequired: '{name}: ein Bild ist erforderlich',
+    typeNotAllowed: '{name}: Dateityp nicht erlaubt',
+    exceedsMaxSize: '{name}: überschreitet {max}MB',
     fieldRequired: 'Dieses Feld ist erforderlich',
     invalidEmail: 'Geben Sie eine gültige E-Mail-Adresse ein',
     invalidUrl: 'Geben Sie eine gültige URL ein',
@@ -113,10 +218,55 @@ const de = {
     maxValue: 'Darf höchstens {max} sein',
     patternMismatch: 'Ungültiges Format'
 };
+const ca = {
+    save: 'Desar',
+    cancel: 'Cancel·lar',
+    delete: 'Eliminar',
+    reset: 'Restablir',
+    submit: 'Enviar',
+    close: 'Tancar',
+    optional: 'Opcional',
+    required: 'Obligatori',
+    loading: 'S’està carregant…',
+    errorSummary: 'Corregeix el següent',
+    addItem: 'Afegir element',
+    removeItem: 'Eliminar element',
+    noItems: 'Encara sense elements',
+    uploadFiles: 'Pujar fitxers',
+    uploadHelper: 'SVG, PNG, JPG o GIF (màx. 10MB)',
+    dropToUpload: 'Deixa anar els fitxers per pujar-los',
+    dropOrBrowse: 'Deixa anar fitxers o',
+    browse: 'explora',
+    browseButton: 'Explorar',
+    viewMode: 'Mode de vista',
+    listView: 'Vista de llista',
+    gridView: 'Vista de graella',
+    clearAll: 'Esborrar-ho tot',
+    upload: 'Pujar',
+    change: 'Canviar',
+    remove: 'Treure',
+    edit: 'Editar',
+    removeNamed: 'Treure {name}',
+    selectedFiles: 'Fitxers seleccionats',
+    addProfilePhoto: 'Afegeix una foto de perfil',
+    media: 'Multimèdia',
+    imageRequired: '{name}: cal una imatge',
+    typeNotAllowed: '{name}: tipus no permès',
+    exceedsMaxSize: '{name}: supera {max}MB',
+    fieldRequired: 'Aquest camp és obligatori',
+    invalidEmail: 'Introdueix un email vàlid',
+    invalidUrl: 'Introdueix un URL vàlid',
+    minLength: 'Usa almenys {min} caràcters',
+    maxLength: 'Usa com a màxim {max} caràcters',
+    minValue: 'Ha de ser almenys {min}',
+    maxValue: 'Ha de ser com a màxim {max}',
+    patternMismatch: 'Format no vàlid'
+};
 /** Built-in dictionaries keyed by primary language subtag (`es-MX` → `es`). */
 export const UI_DICTIONARIES = {
     en,
     es,
+    ca,
     pt,
     fr,
     de

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.6.3",
+	"version": "0.6.7",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",
@@ -81,7 +81,7 @@
 		"@tailwindcss/vite": "^4.3.3",
 		"@types/node": "^26.2.0",
 		"@vitest/browser-playwright": "^4.1.11",
-		"bumpp": "^12.1.1",
+		"bumpp": "~11.1.0",
 		"eslint": "^10.8.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.0",