@r2digisolutions/components 0.16.2 → 0.16.3

package/dist/components/atoms/Input/Input.svelte

@@ -31,6 +31,9 @@
 		onfocus?: (e: FocusEvent) => void;
 		onblur?: (e: FocusEvent) => void;
 		onkeydown?: (e: KeyboardEvent) => void;
+		autocomplete?: string;
+		/** Native form value only (no Svelte bind). Needed for login + autofill. */
+		uncontrolled?: boolean;
 	}
 
 	let {
@@ -58,7 +61,9 @@
 		onchange,
 		onfocus,
 		onblur,
-		onkeydown
+		onkeydown,
+		autocomplete,
+		uncontrolled = false
 	}: InputProps = $props();
 
 	let autoId = $state<string | undefined>(undefined);
@@ -67,7 +72,9 @@
 	});
 	const inputId = $derived(id ?? autoId);
 	const helperId = $derived(inputId ? `${inputId}-helper` : undefined);
-	const hasClear = $derived(clearable && value.length > 0 && !disabled && !readonly);
+	const hasClear = $derived(
+		!uncontrolled && clearable && value.length > 0 && !disabled && !readonly
+	);
 
 	const wrapperSizeClasses: Record<InputSize, string> = {
 		sm: 'h-8 text-sm',
@@ -137,32 +144,62 @@
 				</span>
 			{/if}
 
-			<input
-				id={inputId}
-				{name}
-				{type}
-				{placeholder}
-				{disabled}
-				{readonly}
-				{required}
-				{autofocus}
-				{min}
-				{max}
-				{step}
-				bind:value
-				aria-describedby={helperText ? helperId : undefined}
-				aria-invalid={status === 'error'}
-				class={[
-					'min-w-0 text-primary placeholder:text-muted h-full flex-1 self-stretch bg-transparent outline-none disabled:cursor-not-allowed',
-					type === 'search' &&
-						'[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none'
-				]}
-				{oninput}
-				{onchange}
-				{onfocus}
-				{onblur}
-				{onkeydown}
-			/>
+			{#if uncontrolled}
+				<input
+					id={inputId}
+					{name}
+					{type}
+					{placeholder}
+					{disabled}
+					{readonly}
+					{required}
+					{autofocus}
+					{min}
+					{max}
+					{step}
+					{autocomplete}
+					aria-describedby={helperText ? helperId : undefined}
+					aria-invalid={status === 'error'}
+					class={[
+						'min-w-0 text-primary placeholder:text-muted h-full flex-1 self-stretch bg-transparent outline-none disabled:cursor-not-allowed',
+						type === 'search' &&
+							'[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none'
+					]}
+					{oninput}
+					{onchange}
+					{onfocus}
+					{onblur}
+					{onkeydown}
+				/>
+			{:else}
+				<input
+					id={inputId}
+					{name}
+					{type}
+					{placeholder}
+					{disabled}
+					{readonly}
+					{required}
+					{autofocus}
+					{min}
+					{max}
+					{step}
+					{autocomplete}
+					bind:value
+					aria-describedby={helperText ? helperId : undefined}
+					aria-invalid={status === 'error'}
+					class={[
+						'min-w-0 text-primary placeholder:text-muted h-full flex-1 self-stretch bg-transparent outline-none disabled:cursor-not-allowed',
+						type === 'search' &&
+							'[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none'
+					]}
+					{oninput}
+					{onchange}
+					{onfocus}
+					{onblur}
+					{onkeydown}
+				/>
+			{/if}
 		</label>
 
 		{#if hasClear}

package/dist/components/atoms/Input/Input.svelte.d.ts

@@ -27,6 +27,9 @@ interface InputProps {
     onfocus?: (e: FocusEvent) => void;
     onblur?: (e: FocusEvent) => void;
     onkeydown?: (e: KeyboardEvent) => void;
+    autocomplete?: string;
+    /** Native form value only (no Svelte bind). Needed for login + autofill. */
+    uncontrolled?: boolean;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/components/molecules/FormField/FormField.svelte

@@ -71,6 +71,8 @@
 		/** Absorbed if a Kit `.as()` object is spread by mistake. */
 		defaultValue?: unknown;
 		'aria-invalid'?: boolean | 'true' | 'false';
+		autocomplete?: string;
+		uncontrolled?: boolean;
 	}
 
 	let {
@@ -97,7 +99,9 @@
 		oninput,
 		onchange,
 		defaultValue: _kitDefaultValue = undefined,
-		'aria-invalid': _ariaInvalid = undefined
+		'aria-invalid': _ariaInvalid = undefined,
+		autocomplete,
+		uncontrolled = false
 	}: FormFieldProps = $props();
 
 	const form = getFormContext();
@@ -186,6 +190,8 @@
 			{onchange}
 			status={resolved.status}
 			helperText={resolved.helperText}
+			{autocomplete}
+			{uncontrolled}
 			bind:value
 		/>
 	{/if}

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

@@ -60,6 +60,8 @@ interface FormFieldProps {
     /** Absorbed if a Kit `.as()` object is spread by mistake. */
     defaultValue?: unknown;
     'aria-invalid'?: boolean | 'true' | 'false';
+    autocomplete?: string;
+    uncontrolled?: boolean;
 }
 declare const FormField: import("svelte").Component<FormFieldProps, {}, "value">;
 type FormField = ReturnType<typeof FormField>;

package/dist/components/molecules/FormPasswordInput/FormPasswordInput.svelte

@@ -32,6 +32,8 @@
 		defaultValue?: unknown;
 		type?: string;
 		'aria-invalid'?: boolean | 'true' | 'false';
+		autocomplete?: string;
+		uncontrolled?: boolean;
 	}
 
 	let {
@@ -53,7 +55,9 @@
 		onchange,
 		defaultValue: _kitDefaultValue = undefined,
 		type: _kitType = undefined,
-		'aria-invalid': _ariaInvalid = undefined
+		'aria-invalid': _ariaInvalid = undefined,
+		autocomplete,
+		uncontrolled = false
 	}: FormPasswordInputProps = $props();
 
 	const form = getFormContext();
@@ -111,6 +115,8 @@
 		helperText={resolved.helperText}
 		oninput={handleInput}
 		{onchange}
+		{autocomplete}
+		{uncontrolled}
 		bind:value
 	/>
 </div>

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

@@ -22,6 +22,8 @@ interface FormPasswordInputProps {
     defaultValue?: unknown;
     type?: string;
     'aria-invalid'?: boolean | 'true' | 'false';
+    autocomplete?: string;
+    uncontrolled?: boolean;
 }
 declare const FormPasswordInput: import("svelte").Component<FormPasswordInputProps, {}, "value">;
 type FormPasswordInput = ReturnType<typeof FormPasswordInput>;

package/dist/components/molecules/PasswordInput/PasswordInput.svelte

@@ -15,6 +15,8 @@
 		class?: string;
 		oninput?: (e: Event) => void;
 		onchange?: (e: Event) => void;
+		autocomplete?: string;
+		uncontrolled?: boolean;
 	}
 
 	let {
@@ -30,7 +32,9 @@
 		status = 'default',
 		class: className = '',
 		oninput,
-		onchange
+		onchange,
+		autocomplete,
+		uncontrolled = false
 	}: PasswordInputProps = $props();
 
 	let visible = $state(false);
@@ -48,6 +52,8 @@
 		{size}
 		{status}
 		type={visible ? 'text' : 'password'}
+		{autocomplete}
+		{uncontrolled}
 		bind:value
 		{oninput}
 		{onchange}

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

@@ -12,6 +12,8 @@ interface PasswordInputProps {
     class?: string;
     oninput?: (e: Event) => void;
     onchange?: (e: Event) => void;
+    autocomplete?: string;
+    uncontrolled?: boolean;
 }
 declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;

package/dist/components/organisms/AssistantChat/AssistantChat.svelte

@@ -29,6 +29,7 @@
 		messages?: AssistantMessage[];
 		draft?: string;
 		loading?: boolean;
+		loadingLabel?: string;
 		error?: string | null;
 		voiceEnabled?: boolean;
 		voiceOutput?: boolean;
@@ -61,6 +62,7 @@
 		messages = [],
 		draft = $bindable(''),
 		loading = false,
+		loadingLabel = 'Procesando…',
 		error = null,
 		voiceEnabled = true,
 		voiceOutput = $bindable(true),
@@ -230,7 +232,7 @@
 							class="flex items-center gap-2 rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5"
 						>
 							<LoaderCircle size={14} strokeWidth={2} class="animate-spin text-muted" />
-							<span class="text-xs text-muted">Procesando…</span>
+							<span class="text-xs text-muted">{loadingLabel}</span>
 						</div>
 					</div>
 				{/if}

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

@@ -14,6 +14,7 @@ interface AssistantChatProps {
     messages?: AssistantMessage[];
     draft?: string;
     loading?: boolean;
+    loadingLabel?: string;
     error?: string | null;
     voiceEnabled?: boolean;
     voiceOutput?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.16.2",
+	"version": "0.16.3",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",