@dorsk/tsumikit 0.80.3 → 0.81.0

package/dist/components/atoms/Artwork.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	// Cover / thumbnail tile: a lazy <img> that swaps to a seeded gradient with
-	// initials (or an icon) when there is no source or it fails to load. Width
-	// comes from `size`, height from `aspect`; `status` overlays a Dot/Badge in
-	// the bottom-right corner.
+	// Cover / thumbnail tile: a seeded gradient with initials (or an icon) that a
+	// lazy <img> fades in over once it loads; the gradient stays when there is no
+	// source or it fails. Width comes from `size`, height from `aspect`; `status`
+	// overlays a Dot/Badge in the bottom-right corner.
 	import { untrack, type Snippet } from 'svelte';
 	import { artworkGradient, initials as initialsOf } from '../../artwork';
 	import Icon from './Icon.svelte';
@@ -53,11 +53,13 @@
 
 	const source = $derived(`${src ?? ''} ${srcset ?? ''}`);
 	let failedSource = $state<string | null>(null);
+	let loadedSource = $state<string | null>(null);
 
 	const key = $derived(seed ?? alt);
 	const showImage = $derived(Boolean(src) && failedSource !== source);
+	const loaded = $derived(showImage && loadedSource === source);
 	const tile = $derived(showImage ? undefined : alt.trim() ? 'named' : 'decorative');
-	const gradient = $derived(showImage ? undefined : artworkGradient(key));
+	const gradient = $derived(artworkGradient(key));
 	const text = $derived(fallback === 'initials' ? initialsOf(key) : '');
 
 	function fail() {
@@ -66,11 +68,20 @@
 	}
 
 	function watchLoad(img: HTMLImageElement) {
+		const load = () => {
+			loadedSource = source;
+		};
 		img.addEventListener('error', fail);
+		img.addEventListener('load', load);
 		untrack(() => {
-			if (img.complete && img.naturalWidth === 0) fail();
+			if (!img.complete) return;
+			if (img.naturalWidth === 0) fail();
+			else load();
 		});
-		return () => img.removeEventListener('error', fail);
+		return () => {
+			img.removeEventListener('error', fail);
+			img.removeEventListener('load', load);
+		};
 	}
 </script>
 
@@ -86,13 +97,24 @@
 	aria-hidden={tile === 'decorative' ? 'true' : undefined}
 	{...rest}
 >
-	{#if showImage}
-		<img {src} {srcset} {sizes} {alt} class="img fit-{fit}" loading="lazy" decoding="async" {@attach watchLoad} />
-	{:else if fallback === 'initials' && text}
+	{#if fallback === 'initials' && text}
 		<span class="initials" aria-hidden="true">{text}</span>
 	{:else if fallback === 'icon'}
 		<span class="glyph" aria-hidden="true"><Icon name={icon} /></span>
 	{/if}
+	{#if showImage}
+		<img
+			{src}
+			{srcset}
+			{sizes}
+			{alt}
+			class="img fit-{fit}"
+			class:loaded
+			loading="lazy"
+			decoding="async"
+			{@attach watchLoad}
+		/>
+	{/if}
 	{#if status}
 		<span class="status">{@render status()}</span>
 	{/if}
@@ -145,6 +167,11 @@
 		width: 100%;
 		height: 100%;
 		display: block;
+		opacity: 0;
+		transition: opacity var(--dur-release) var(--ease);
+	}
+	.img.loaded {
+		opacity: 1;
 	}
 	.fit-cover {
 		object-fit: cover;

package/dist/components/atoms/Badge.svelte

@@ -230,7 +230,7 @@
 		border-color: transparent;
 	}
 	.mono {
-		font-family: var(--font-mono);
+		font-family: var(--font-numeric);
 		font-weight: var(--badge-fw, var(--fw-normal));
 	}
 	.uppercase {

package/dist/components/atoms/Button.svelte

@@ -687,7 +687,7 @@
 		position: absolute;
 		top: var(--sp-0-5);
 		left: var(--sp-1);
-		font-family: var(--font-mono);
+		font-family: var(--font-label);
 		font-size: calc(var(--fs-xs) * 0.75);
 		font-weight: var(--fw-medium);
 		color: var(--text-faint);

package/dist/components/atoms/Input.svelte

@@ -259,7 +259,7 @@
 		opacity: 1;
 	}
 	.mono {
-		font-family: var(--font-mono);
+		font-family: var(--font-numeric);
 	}
 
 	.input-wrap {

package/dist/components/layouts/NavSection.svelte

@@ -53,7 +53,7 @@
 		padding: 0 var(--sp-3);
 		margin-bottom: var(--sp-1);
 		color: var(--text-faint);
-		font-family: var(--font-mono);
+		font-family: var(--font-label);
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
 		text-transform: uppercase;

package/dist/components/molecules/FilterInput.svelte

@@ -496,7 +496,7 @@
 		font-size: var(--control-fs-sm);
 	}
 	.fi--pill .fi__bar {
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		padding-inline: var(--sp-4);
 	}
 	.surface-raised .fi__bar {
@@ -548,7 +548,7 @@
 		border: 0;
 		background: transparent;
 		color: var(--text);
-		font-family: var(--font-mono);
+		font-family: var(--font-numeric);
 		font-size: var(--control-fs-md);
 		outline: none;
 		min-width: 0;
@@ -664,7 +664,7 @@
 	}
 	.fi__opt-code {
 		margin-left: auto;
-		font-family: var(--font-mono);
+		font-family: var(--font-numeric);
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 		background: var(--bg-elevated-2);

package/dist/components/molecules/Metric.svelte

@@ -187,7 +187,7 @@
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		color: var(--text-muted);
-		font-family: var(--font-mono);
+		font-family: var(--font-label);
 		line-height: var(--lh-snug);
 	}
 	.metric-chip {
@@ -207,7 +207,7 @@
 		display: flex;
 		align-items: baseline;
 		gap: var(--sp-1);
-		font-family: var(--font-mono);
+		font-family: var(--font-numeric);
 		line-height: var(--lh-none);
 	}
 	.metric-num {
@@ -274,7 +274,7 @@
 		flex-wrap: wrap;
 		align-items: baseline;
 		gap: var(--sp-1) var(--sp-3);
-		font-family: var(--font-mono);
+		font-family: var(--font-numeric);
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 	}

package/dist/components/molecules/SegmentedControl.svelte

@@ -249,7 +249,7 @@
 		padding: var(--sp-0-5);
 		background: var(--track-fill);
 		border: var(--edge-width) solid var(--track-edge);
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		max-width: 100%;
 		min-width: 0;
 	}
@@ -325,7 +325,7 @@
 		left: 0;
 		width: 0;
 		height: 0;
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		background: var(--thumb-fill);
 		box-shadow: var(--thumb-shadow);
 		transform-origin: top left;
@@ -346,7 +346,7 @@
 		height: 100%;
 		padding: 0 var(--control-px-md);
 		border: 0;
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		background: transparent;
 		color: var(--text-muted);
 		font-size: var(--control-fs-md);
@@ -370,7 +370,7 @@
 	}
 	/* Capped at half a row: one row stays a pill, extra rows square the corners. */
 	.seg-wrap:not(.seg-icon) {
-		border-radius: calc(var(--seg-h) / 2);
+		border-radius: min(var(--r-control), calc(var(--seg-h) / 2));
 	}
 	/* Icon-only segments are squares; corners stay concentric with the track. */
 	.seg-icon .seg-item,

package/dist/styles/tokens.css

@@ -113,6 +113,10 @@
   --font-mono:
     ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas,
     monospace;
+  /* Non-code UI text: counts and stat values (--font-numeric), eyebrow labels
+     and shortcut hints (--font-label). Code-ish slots keep --font-mono. */
+  --font-numeric: var(--font-mono);
+  --font-label: var(--font-mono);
 
   /* Text-scale factor (CCT-305). The UI font control multiplies ONLY the
 	   font-size tokens by this — not the root font-size — so bumping the size up
@@ -171,6 +175,8 @@
   --r-md: 10px;
   --r-lg: 14px;
   --r-pill: 999px;
+  /* Segmented tracks and pill-shaped filter bars; squarish apps set --r-md. */
+  --r-control: var(--r-pill);
 
   /* ---- Elevation ---- */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.80.3",
+  "version": "0.81.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",