@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/Collapse.svelte

@@ -2,19 +2,14 @@
 	/**
 	 * Collapse — batteries-included tall-content collapser.
 	 *
-	 * Wraps children in a region that caps at `threshold` px with a fade-out
-	 * gradient and renders a "Show more / Show less" toggle that self-hides when
-	 * the content is shorter than the threshold. Uses the `collapse` action for
-	 * measurement (ResizeObserver-backed, so streaming / {@html} content works).
+	 * Animates via grid-template-rows 0fr↔1fr with var(--motion-glide) — no
+	 * overshoot, no layout-property animation. The toggle self-hides when content
+	 * is shorter than the threshold (ResizeObserver-backed measurement).
 	 *
 	 *   <Collapse>
 	 *     {@html renderedMarkdown}
 	 *   </Collapse>
-	 *
-	 * For existing elements you don't want to wrap (a bare `<p>` inside an
-	 * `{#each}`, a `<pre>`), use the `collapse` action directly instead.
 	 */
-	import { collapse } from '../actions/collapse';
 
 	interface Props {
 		/** Max collapsed height in px. Default 120. */
@@ -43,18 +38,39 @@
 	}: Props = $props();
 
 	let collapsible = $state(false);
+	let innerEl = $state<HTMLDivElement | null>(null);
 	const instanceId = $props.id();
 	const bodyId = `jatui-collapse-${instanceId}`;
+
+	// ResizeObserver to detect whether content is tall enough to collapse
+	$effect(() => {
+		if (!innerEl) return;
+		const ro = new ResizeObserver(() => {
+			if (!innerEl) return;
+			const naturalHeight = innerEl.scrollHeight;
+			collapsible = naturalHeight > threshold + 4;
+		});
+		ro.observe(innerEl);
+		return () => ro.disconnect();
+	});
+
+	const gradient = $derived(
+		`linear-gradient(to bottom, black ${fadeStart}%, transparent 100%)`
+	);
 </script>
 
 <div
 	id={bodyId}
-	class={`jatui-collapse-body ${className}`.trim()}
-	use:collapse={{ threshold, fadeStart, expanded, onCollapsible: (c) => (collapsible = c) }}
+	class={`jatui-collapse-outer ${className}`.trim()}
+	class:jatui-collapse-outer-closed={collapsible && !expanded}
+	style="--collapse-threshold: {threshold}px; --collapse-gradient: {gradient};"
+	aria-expanded={expanded || !collapsible}
 >
-	{#if children}
-		{@render children()}
-	{/if}
+	<div bind:this={innerEl} class="jatui-collapse-inner">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
 </div>
 {#if collapsible}
 	<button
@@ -69,9 +85,43 @@
 {/if}
 
 <style>
-	.jatui-collapse-body {
+	/*
+	 * Grid-template-rows trick: outer wraps inner with overflow:hidden.
+	 * Closed → 0fr (inner pinned to 0 height). Open → 1fr (natural height).
+	 * grid-template-rows is a discrete property in older engines but modern
+	 * browsers interpolate it as a length when rows go 0fr↔1fr.
+	 * No layout-property width change; height is the only transition.
+	 */
+	.jatui-collapse-outer {
+		display: grid;
+		grid-template-rows: 1fr;
+		transition: grid-template-rows var(--motion-enter) var(--motion-glide);
+		overflow: hidden;
 		position: relative;
 	}
+
+	.jatui-collapse-outer-closed {
+		grid-template-rows: 0fr;
+		/* Fade gradient masks the bottom edge when collapsed */
+		-webkit-mask-image: var(--collapse-gradient);
+		mask-image: var(--collapse-gradient);
+		/* Cap visible area at threshold */
+		max-height: var(--collapse-threshold);
+	}
+
+	/* When open, remove the mask and height cap */
+	.jatui-collapse-outer:not(.jatui-collapse-outer-closed) {
+		max-height: none;
+		-webkit-mask-image: none;
+		mask-image: none;
+	}
+
+	.jatui-collapse-inner {
+		/* Required for grid 0fr to clamp to zero */
+		min-height: 0;
+		overflow: hidden;
+	}
+
 	.jatui-collapse-toggle {
 		display: block;
 		margin-top: 4px;
@@ -88,4 +138,10 @@
 		opacity: 1;
 		text-decoration: underline;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-collapse-outer {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/Collapse.svelte.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Collapse — batteries-included tall-content collapser.
+ *
+ * Animates via grid-template-rows 0fr↔1fr with var(--motion-glide) — no
+ * overshoot, no layout-property animation. The toggle self-hides when content
+ * is shorter than the threshold (ResizeObserver-backed measurement).
+ *
+ *   <Collapse>
+ *     {@html renderedMarkdown}
+ *   </Collapse>
+ */
 interface Props {
     /** Max collapsed height in px. Default 120. */
     threshold?: number;

package/dist/components/ColorSelector.svelte

@@ -16,7 +16,7 @@
   let showSelector = $state(false)
   // svelte-ignore state_referenced_locally
   let lastSelectedColor = $state(selectedColor)
-  let selectionAnimating = $state(false)
+  let poppingColor = $state<string | null>(null)
 
   const colorOptions = [
     { name: "Primary", value: "primary", bgClass: "bg-primary", textClass: "text-primary-content" },
@@ -37,15 +37,15 @@
   function handleColorSelect(colorValue: string) {
     if (colorValue !== selectedColor) {
       lastSelectedColor = colorValue
-      selectionAnimating = true
+      poppingColor = colorValue
       onSelect(colorValue)
 
       setTimeout(() => {
-        selectionAnimating = false
+        poppingColor = null
         if (compact) {
-          setTimeout(() => { showSelector = false }, 800)
+          setTimeout(() => { showSelector = false }, 400)
         }
-      }, 500)
+      }, 200)
     } else {
       onSelect(colorValue)
     }
@@ -79,13 +79,13 @@
             type="button"
             class="tooltip tooltip-top color-btn {option.bgClass} border-2 border-base-300
               {isSelected(option.value) ? 'selected' : ''}
-              {selectionAnimating && lastSelectedColor === option.value ? 'selecting' : ''}"
+              {poppingColor === option.value ? 'popping' : ''}"
             data-tip={option.name}
             onclick={() => handleColorSelect(option.value)}
             aria-label="Select {option.name} color"
           >
-            {#if isSelected(option.value) || (selectionAnimating && lastSelectedColor === option.value)}
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="{option.textClass} {selectionAnimating && lastSelectedColor === option.value ? 'animate-checkmark' : ''}">
+            {#if isSelected(option.value)}
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="{option.textClass} checkmark">
                 <polyline points="20 6 9 17 4 12"></polyline>
               </svg>
             {/if}
@@ -117,7 +117,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: transform var(--motion-fast) var(--motion-glide);
     cursor: pointer;
   }
 
@@ -130,17 +130,16 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 25%, transparent);
   }
 
-  .color-btn.selecting {
-    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);
+  /* Spring pop on selection — <=200ms, single overshoot */
+  .color-btn.popping {
+    transform: scale(1.2);
+    transition: transform var(--motion-enter) var(--motion-spring);
   }
 
   @media (prefers-reduced-motion: reduce) {
     .color-btn { transition: none; }
     .color-btn:hover { transform: none; }
-    .color-btn.selecting { transform: none; animation: none; }
+    .color-btn.popping { transform: scale(1.1); transition: none; }
   }
 
   .color-preview {
@@ -150,18 +149,16 @@
     border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
   }
 
-  @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.15); }
-    100% { transform: scale(1.1); }
+  .checkmark {
+    animation: checkmark-pop var(--motion-enter) var(--motion-spring);
   }
 
-  .animate-checkmark {
-    animation: zoom-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  @keyframes checkmark-pop {
+    from { transform: scale(0); opacity: 0; }
+    to   { transform: scale(1); opacity: 1; }
   }
 
-  @keyframes zoom-in {
-    0% { transform: scale(0); opacity: 0; }
-    100% { transform: scale(1); opacity: 1; }
+  @media (prefers-reduced-motion: reduce) {
+    .checkmark { animation: none; }
   }
 </style>