@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/components/SelectInput.svelte

@@ -115,11 +115,33 @@
 		document.addEventListener('click', handleClickOutside);
 		return () => document.removeEventListener('click', handleClickOutside);
 	});
+
+	// Error-state shake (transitions.dev). Shakes the whole control wrapper when
+	// `error` becomes set. See TextInput for the rationale.
+	let hadError = false;
+	$effect(() => {
+		const hasError = !!error;
+		if (hasError && !hadError && selectElement) {
+			const reduce =
+				typeof window !== 'undefined' &&
+				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+			if (!reduce) {
+				selectElement.classList.remove('t-input-shake');
+				void selectElement.offsetWidth;
+				selectElement.classList.add('t-input-shake');
+			}
+		}
+		hadError = hasError;
+	});
 </script>
 
-<div class="form-control w-full" bind:this={selectElement}>
+<div
+	class="form-control w-full"
+	bind:this={selectElement}
+	onanimationend={() => selectElement?.classList.remove('t-input-shake')}
+>
 	<label for={id} class="label">
-		<span class="label-text font-medium">
+		<span class="text-[0.8125rem] font-medium text-base-content/85">
 			{label}
 			{#if required}
 				<span class="text-error ml-1">*</span>
@@ -205,11 +227,11 @@
 
 	{#if error}
 		<div class="label">
-			<span id="{id}-error" class="label-text-alt text-error" role="alert">{error}</span>
+			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
 		</div>
 	{:else if helpText}
 		<div class="label">
-			<span id="{id}-help" class="label-text-alt text-base-content/70">{helpText}</span>
+			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
 		</div>
 	{/if}
 </div>

package/src/lib/components/SidebarUserFooter.svelte

@@ -28,7 +28,7 @@
 <div class="flex items-center gap-2 px-2 py-1">
   <a href={accountHref} class="flex items-center gap-2 flex-1 min-w-0" title="Account settings">
     <UserAvatar name={profile?.full_name} email={user?.email} avatarUrl={profile?.avatar_url} size="sm" />
-    <span class="truncate text-sm">{displayName}</span>
+    <span class="truncate text-[0.9375rem]">{displayName}</span>
   </a>
   <a href={signOutHref} class="btn btn-ghost btn-xs shrink-0">Sign out</a>
 </div>

package/src/lib/components/SignaturePad.svelte

@@ -12,7 +12,7 @@
 		onSignatureChange,
 		width = 400,
 		height = 150,
-		strokeColor = '#000',
+		strokeColor = '',
 		strokeWidth = 2,
 		label = 'Signature',
 		required = false,
@@ -41,7 +41,10 @@
 		const ctx = canvas.getContext('2d');
 		if (!ctx) return;
 
-		ctx.strokeStyle = strokeColor;
+		const resolvedStroke = strokeColor ||
+			getComputedStyle(canvas).getPropertyValue('--color-base-content').trim() ||
+			'oklch(0.21 0 0)';
+		ctx.strokeStyle = resolvedStroke;
 		ctx.lineWidth = strokeWidth;
 		ctx.lineCap = 'round';
 		ctx.lineJoin = 'round';
@@ -73,7 +76,7 @@
 		}
 
 		function draw(e: MouseEvent | TouchEvent) {
-			if (!isDrawing) return;
+			if (!isDrawing || !ctx) return;
 			e.preventDefault();
 
 			const coords = getCoordinates(e);
@@ -148,7 +151,8 @@
 		</div>
 	{/if}
 
-	<div class="border-2 border-base-300 rounded-lg bg-white overflow-hidden relative">
+	<div class="rounded-lg bg-base-100 overflow-hidden relative transition-all duration-300
+		{hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
 		<canvas
 			bind:this={canvas}
 			{width}