@joewinke/jatui 0.1.11 → 0.1.20

package/src/lib/components/Button.svelte

@@ -12,6 +12,8 @@
 		type?: 'button' | 'submit' | 'reset';
 		disabled?: boolean;
 		loading?: boolean;
+		/** When true, show an animated success check before the label (transitions.dev "Success check"). */
+		success?: boolean;
 		class?: string;
 		onclick?: (e: MouseEvent) => void;
 		children?: import('svelte').Snippet;
@@ -24,6 +26,7 @@
 		type = 'button',
 		disabled = false,
 		loading = false,
+		success = false,
 		class: className = '',
 		onclick,
 		children
@@ -61,9 +64,15 @@
 		{/if}
 	</a>
 {:else}
-	<button {type} {disabled} class={buttonClass} {onclick}>
+	<button {type} disabled={disabled || loading} aria-busy={loading || undefined} class={buttonClass} {onclick}>
 		{#if loading}
 			<span class="loading loading-spinner loading-xs"></span>
+		{:else if success}
+			<span class="t-success-check" data-state="in" aria-hidden="true">
+				<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+					<path pathLength="1" d="M5 13l4 4L19 7" />
+				</svg>
+			</span>
 		{/if}
 		{#if children}
 			{@render children()}

package/src/lib/components/CalendarPicker.svelte

@@ -207,7 +207,7 @@
 	<!-- Day Headers -->
 	<div class="grid grid-cols-7 gap-1 mb-2">
 		{#each DAYS_SHORT as day}
-			<div class="text-center text-sm font-medium text-base-content/50 py-2">
+			<div class="text-center text-[0.8125rem] text-base-content/45 py-2">
 				{day}
 			</div>
 		{/each}
@@ -224,7 +224,7 @@
 			<button
 				onclick={() => handleDateClick(date)}
 				disabled={!available}
-				class="aspect-square flex flex-col items-center justify-center rounded-lg text-sm font-medium
+				class="aspect-square flex flex-col items-center justify-center rounded-lg text-[0.9375rem] font-medium
 					transition-all duration-200 relative
 					{currentMonth ? '' : 'opacity-30'}
 					{available
@@ -255,7 +255,7 @@
 
 	<!-- Legend -->
 	{#if getAvailability}
-		<div class="flex flex-wrap items-center gap-x-5 gap-y-2 mt-6 pt-4 border-t border-base-300 text-sm">
+		<div class="flex flex-wrap items-center gap-x-5 gap-y-2 mt-6 pt-4 border-t border-base-300 text-[0.75rem]">
 			<div class="flex items-center gap-2">
 				<div class="flex gap-0.5">
 					<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>

package/src/lib/components/Card.svelte

@@ -21,7 +21,7 @@
 {#if onclick || role}
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
-		class="card bg-base-100 shadow-xl border border-base-300 {className}"
+		class="card bg-base-200 border border-base-300 transition-[transform,border-color] duration-150 hover:-translate-y-[1px] hover:border-base-content/20 cursor-pointer {className}"
 		{onclick}
 		role={role || (onclick ? 'button' : undefined)}
 		tabindex={tabindex ?? 0}
@@ -45,7 +45,7 @@
 		{/if}
 	</div>
 {:else}
-	<div class="card bg-base-100 shadow-xl border border-base-300 {className}">
+	<div class="card bg-base-200 border border-base-300 {className}">
 		{#if header}
 			<div class="card-body pb-4">
 				<div class="flex justify-between items-center">

package/src/lib/components/ChipInput.svelte

@@ -389,6 +389,9 @@
 	export function getElement(): HTMLDivElement | null {
 		return editableRef;
 	}
+
+	import { fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 </script>
 
 <div class="chip-input-wrapper relative">
@@ -398,7 +401,7 @@
 		role="textbox"
 		tabindex={disabled ? -1 : 0}
 		aria-multiline="true"
-		class="chip-input-editable w-full rounded-md text-sm"
+		class="chip-input-editable w-full rounded-md text-[0.9375rem]"
 		class:chip-input-monospace={monospace}
 		class:chip-input-compact={compact}
 		style="
@@ -415,7 +418,7 @@
 
 	<!-- Placeholder overlay -->
 	{#if !value.trim()}
-		<div class="chip-input-placeholder absolute top-0 left-0 text-sm pointer-events-none"
+		<div class="chip-input-placeholder absolute top-0 left-0 text-[0.9375rem] pointer-events-none"
 			class:chip-input-placeholder-compact={compact}
 			class:chip-input-placeholder-mono={monospace}
 		>
@@ -427,7 +430,9 @@
 	{#if showAutocomplete && totalItems > 0}
 		<div
 			bind:this={autocompleteRef}
-			class="chip-input-dropdown absolute z-50 w-full mt-1 rounded-lg overflow-hidden shadow-xl"
+			class="chip-input-dropdown absolute z-50 w-full mt-1 rounded-lg overflow-hidden bg-base-200 border border-base-300"
+			in:fly={{ y: -6, duration: 150, easing: cubicOut }}
+			out:fly={{ y: -4, duration: 100, easing: cubicOut }}
 		>
 			{#if isGrouped}
 				{@const flatIdx = { current: 0 }}

package/src/lib/components/ColorSelector.svelte

@@ -14,6 +14,7 @@
   }>()
 
   let showSelector = $state(false)
+  // svelte-ignore state_referenced_locally
   let lastSelectedColor = $state(selectedColor)
   let selectionAnimating = $state(false)
 
@@ -71,7 +72,7 @@
   </button>
 
   {#if showSelector}
-    <div class="color-selector-wrapper transition-all" transition:slide={{ duration: 200 }}>
+    <div class="color-selector-wrapper" transition:slide={{ duration: 200 }}>
       <div class="grid grid-cols-4 gap-3 p-4 bg-base-200 rounded-lg">
         {#each colorOptions as option}
           <button
@@ -116,34 +117,37 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s ease;
+    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   .color-btn:hover {
     transform: scale(1.05);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
 
   .color-btn.selected {
-    border-color: white;
-    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
+    border-color: color-mix(in oklch, var(--color-base-100) 90%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 25%, transparent);
   }
 
   .color-btn.selecting {
-    transform: scale(1.15);
-    border-color: white;
-    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.5);
-    animation: pulse 0.5s ease;
+    transform: scale(1.12);
+    border-color: color-mix(in oklch, var(--color-base-100) 90%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 35%, transparent);
+    animation: pulse 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .color-btn { transition: none; }
+    .color-btn:hover { transform: none; }
+    .color-btn.selecting { transform: none; animation: none; }
   }
 
   .color-preview {
     width: 15px;
     height: 15px;
     border-radius: 50%;
-    border: 1px solid hsla(var(--bc) / 0.2);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
   }
 
   @keyframes pulse {
@@ -153,7 +157,7 @@
   }
 
   .animate-checkmark {
-    animation: zoom-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    animation: zoom-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 
   @keyframes zoom-in {