@r2digisolutions/components 0.16.2 → 0.16.4

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,9 @@
 		messages?: AssistantMessage[];
 		draft?: string;
 		loading?: boolean;
+		loadingLabel?: string;
+		/** When false, input stays disabled via `loading` but the spinner bubble is hidden (parent paints status in a message). */
+		showLoadingBubble?: boolean;
 		error?: string | null;
 		voiceEnabled?: boolean;
 		voiceOutput?: boolean;
@@ -61,6 +64,8 @@
 		messages = [],
 		draft = $bindable(''),
 		loading = false,
+		loadingLabel = 'Procesando…',
+		showLoadingBubble = true,
 		error = null,
 		voiceEnabled = true,
 		voiceOutput = $bindable(true),
@@ -218,7 +223,7 @@
 					{/if}
 				{/each}
 
-				{#if loading}
+				{#if loading && showLoadingBubble}
 					<div class="flex items-center gap-2">
 						<span
 							class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400"
@@ -230,18 +235,10 @@
 							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}
-
-				{#if error}
-					<div
-						class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600 dark:border-red-800/40 dark:bg-red-950/20 dark:text-red-400"
-					>
-						{error}
-					</div>
-				{/if}
 			</div>
 		{/if}
 	</div>
@@ -252,8 +249,11 @@
 			<input
 				type="text"
 				bind:value={draft}
-				{placeholder}
-				class="h-9 min-w-0 flex-1 rounded-xl border border-border bg-surface px-3 text-sm text-primary outline-none transition-shadow placeholder:text-muted focus:border-brand-400 focus:ring-2 focus:ring-brand-500/20"
+				placeholder={listening ? statusLabel || placeholder : placeholder}
+				class={[
+					'h-9 min-w-0 flex-1 rounded-xl border bg-surface px-3 text-sm text-primary outline-none transition-shadow placeholder:text-muted focus:border-brand-400 focus:ring-2 focus:ring-brand-500/20',
+					listening ? 'border-red-400 ring-2 ring-red-500/20' : 'border-border'
+				]}
 				disabled={loading}
 				onkeydown={handleKeydown}
 				aria-label={placeholder}
@@ -300,6 +300,10 @@
 			</div>
 		</div>
 
+		{#if error}
+			<p class="mt-1.5 px-1 text-xs text-red-600 dark:text-red-400">{error}</p>
+		{/if}
+
 		{#if footerExtra}
 			{@render footerExtra()}
 		{/if}

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

@@ -14,6 +14,9 @@ interface AssistantChatProps {
     messages?: AssistantMessage[];
     draft?: string;
     loading?: boolean;
+    loadingLabel?: string;
+    /** When false, input stays disabled via `loading` but the spinner bubble is hidden (parent paints status in a message). */
+    showLoadingBubble?: boolean;
     error?: string | null;
     voiceEnabled?: boolean;
     voiceOutput?: boolean;

package/dist/components/organisms/CommandPalette/CommandPalette.svelte

@@ -2,7 +2,9 @@
 	import type { Component } from 'svelte';
 	import { untrack } from 'svelte';
 	import Kbd from '../../atoms/Kbd/Kbd.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
 	import { i18n } from '../../../utils/i18n.svelte';
+	import { Mic, MicOff } from '@lucide/svelte';
 
 	export type CommandIcon = Component<{
 		class?: string;
@@ -24,29 +26,39 @@
 
 	interface CommandPaletteProps {
 		open?: boolean;
+		query?: string;
 		items?: CommandItem[];
 		placeholder?: string;
 		emptyLabel?: string;
 		loading?: boolean;
+		voiceEnabled?: boolean;
+		listening?: boolean;
+		micLabel?: string;
+		stopMicLabel?: string;
 		class?: string;
 		onselect?: (item: CommandItem) => void;
 		onclose?: () => void;
 		onquery?: (query: string) => void;
+		onmicclick?: () => void;
 	}
 
 	let {
 		open = $bindable(false),
+		query = $bindable(''),
 		items = [],
 		placeholder,
 		emptyLabel,
 		loading = false,
+		voiceEnabled = false,
+		listening = false,
+		micLabel = 'Hablar',
+		stopMicLabel = 'Parar micrófono',
 		class: className = '',
 		onselect,
 		onclose,
-		onquery
+		onquery,
+		onmicclick
 	}: CommandPaletteProps = $props();
-
-	let query = $state('');
 	let activeIndex = $state(0);
 	let dialogEl = $state<HTMLDialogElement | null>(null);
 	let listEl = $state<HTMLDivElement | null>(null);
@@ -232,6 +244,25 @@
 				oninput={onInput}
 				onkeydown={onKeydown}
 			/>
+			{#if voiceEnabled}
+				<IconButton
+					variant="ghost"
+					size="xs"
+					label={listening ? stopMicLabel : micLabel}
+					aria-pressed={listening}
+					onclick={(e) => {
+						e.stopPropagation();
+						onmicclick?.();
+					}}
+					class={listening ? 'text-red-500 hover:text-red-600' : 'text-muted'}
+				>
+					{#if listening}
+						<MicOff size={16} strokeWidth={2} />
+					{:else}
+						<Mic size={16} strokeWidth={2} />
+					{/if}
+				</IconButton>
+			{/if}
 			{#if loading}
 				<span
 					class="h-4 w-4 animate-spin border-border border-t-brand-500 shrink-0 rounded-full border-2"

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

@@ -17,15 +17,21 @@ export interface CommandItem {
 }
 interface CommandPaletteProps {
     open?: boolean;
+    query?: string;
     items?: CommandItem[];
     placeholder?: string;
     emptyLabel?: string;
     loading?: boolean;
+    voiceEnabled?: boolean;
+    listening?: boolean;
+    micLabel?: string;
+    stopMicLabel?: string;
     class?: string;
     onselect?: (item: CommandItem) => void;
     onclose?: () => void;
     onquery?: (query: string) => void;
+    onmicclick?: () => void;
 }
-declare const CommandPalette: Component<CommandPaletteProps, {}, "open">;
+declare const CommandPalette: Component<CommandPaletteProps, {}, "open" | "query">;
 type CommandPalette = ReturnType<typeof CommandPalette>;
 export default CommandPalette;

package/package.json

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