@samuel-charpentier/sform 0.0.6 → 0.0.8

package/dist/Sform/Sfield.svelte

@@ -6,7 +6,6 @@
 		TypedSfieldProps
 	} from './types.js';
 	import { getSformContext } from './context.svelte.js';
-	import { tick } from 'svelte';
 	import TextInput from './inputs/TextInput.svelte';
 	import NumberInput from './inputs/NumberInput.svelte';
 	import TextareaInput from './inputs/TextareaInput.svelte';
@@ -59,14 +58,6 @@
 
 	async function handleBlur() {
 		context.markTouched(name);
-		// Wait a tick - if submission started, pending will be > 0 by then
-		// This prevents stale data validation when blur fires during Enter submission
-		await tick();
-		const formState = context.getFormState();
-		if (formState.pending) {
-			return;
-		}
-		// Trigger validation with includeUntouched so blur mode shows issues
 		context.triggerValidation();
 	}
 
@@ -106,6 +97,7 @@
 		name,
 		class: hasIssues ? `${classes.input ?? ''} sform-field-error`.trim() : classes.input,
 		labelClass: classes.label,
+		wrapperClass: classes.inputWrapper,
 		showIssues,
 		onblur: handleBlur,
 		oninput: handleInput
@@ -164,7 +156,7 @@
 	{/if}
 
 	{#if props.hint}
-		<div class="sform-hint">
+		<div class={classes.hint}>
 			{#if typeof props.hint === 'string'}
 				{props.hint}
 			{:else}
@@ -174,9 +166,9 @@
 	{/if}
 
 	{#if hasIssues}
-		<div class={classes.messages}>
+		<div class={classes.issues}>
 			{#each issues as issue, i (i)}
-				<p>{issue.message}</p>
+				<p class={classes.issue}>{issue.message}</p>
 			{/each}
 		</div>
 	{/if}

package/dist/Sform/inputs/ButtonInput.svelte

@@ -55,6 +55,10 @@
 
 		event.preventDefault();
 
+		// Focus the button to trigger blur on any focused input before submission
+		// This ensures blur validation runs with valid form data, not stale data
+		buttonElement.focus();
+
 		if (onsubmit) {
 			await onsubmit();
 		}
@@ -66,9 +70,16 @@
 		// Submit the form via context
 		sformContext.submitForm();
 	}
+	let buttonElement: HTMLButtonElement;
 </script>
 
-<button type={buttonType} class={className} disabled={isDisabled} onclick={handleClick}>
+<button
+	bind:this={buttonElement}
+	type={buttonType}
+	class={className}
+	disabled={isDisabled}
+	onclick={handleClick}
+>
 	{#if children}
 		{@render children(formState)}
 	{:else}

package/dist/Sform/types.d.ts

@@ -35,10 +35,16 @@ export interface SfieldClasses {
     wrapper?: string;
     /** Label element class */
     label?: string;
+    /** Input wrapper class (contains prefix, input, suffix for affix-enabled inputs) */
+    inputWrapper?: string;
     /** Input element class */
     input?: string;
-    /** Messages/errors container class */
-    messages?: string;
+    /** Hint element class */
+    hint?: string;
+    /** Issues container class */
+    issues?: string;
+    /** Individual issue element class */
+    issue?: string;
 }
 /**
  * Maps Sfield input types to the value types they handle.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",