@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/components/atoms/Progress.svelte

@@ -10,6 +10,9 @@
 	//   gradient       — accent→teal fill (storage meter / library-health bars).
 	//   striped        — diagonal stripes; animated while in-flight (unpacking).
 	//   indeterminate  — explicit "scanning"/"importing" mode without a percentage.
+	//   variant        — `liquid`: two soft pulses flow through the track while
+	//                    indeterminate; `stripes`: a diagonal shimmer drifts over
+	//                    the fill.
 	let {
 		value,
 		max = 100,
@@ -22,6 +25,7 @@
 		shrink = true,
 		block = false,
 		indeterminate: indeterminateProp = false,
+		variant = 'default',
 		markers = [],
 		toneAt,
 		color,
@@ -51,6 +55,7 @@
 		striped?: boolean;
 		// Force indeterminate mode even when a `value` is supplied.
 		indeterminate?: boolean;
+		variant?: 'default' | 'liquid' | 'stripes';
 		/** Thin vertical lines at `at / max` (caps, thresholds). */
 		markers?: { at: number; label?: string; tone?: Tone }[];
 		/** Percent thresholds that auto-pick warn/danger; an explicit `tone` other
@@ -80,7 +85,7 @@
 {#snippet track()}
 <div
 	data-tsu="Progress"
-	class="progress tone-{toneClass} size-{size} {klass}"
+	class="progress tone-{toneClass} size-{size} v-{variant} {klass}"
 	class:grow={grow}
 	class:no-shrink={!shrink}
 	class:block={block}
@@ -146,7 +151,7 @@
 		position: relative;
 		width: 100%;
 		height: 0.5rem;
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		border-radius: var(--r-pill);
 		overflow: hidden;
 	}
@@ -272,4 +277,72 @@
 			opacity: 0.35;
 		}
 	}
+	.progress.v-liquid.indeterminate .bar {
+		animation: none;
+		opacity: 0;
+	}
+	.progress.v-liquid.indeterminate::before,
+	.progress.v-liquid.indeterminate::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		width: 55%;
+		border-radius: inherit;
+		background: linear-gradient(90deg, transparent, var(--fill, var(--accent)) 35% 65%, transparent);
+		transform: translateX(-100%);
+		animation: tsu-progress-liquid 1.7s var(--ease-drawer) infinite;
+	}
+	.progress.v-liquid.indeterminate::after {
+		width: 35%;
+		opacity: 0.55;
+		animation: tsu-progress-liquid-2 1.7s var(--ease-in-out) -0.7s infinite;
+	}
+	@keyframes tsu-progress-liquid {
+		to {
+			transform: translateX(282%);
+		}
+	}
+	@keyframes tsu-progress-liquid-2 {
+		to {
+			transform: translateX(386%);
+		}
+	}
+	.progress.v-stripes .bar {
+		position: relative;
+		overflow: hidden;
+	}
+	.progress.v-stripes .bar::after {
+		content: '';
+		position: absolute;
+		inset: 0 -1.5rem 0 0;
+		background: repeating-linear-gradient(
+			135deg,
+			transparent 0 0.5rem,
+			color-mix(in srgb, var(--text-on-accent) 28%, transparent) 0.5rem 1rem
+		);
+		animation: tsu-progress-stripes 0.7s linear infinite;
+	}
+	@keyframes tsu-progress-stripes {
+		from {
+			transform: translateX(-1.4142rem);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.progress.v-liquid.indeterminate {
+			background: color-mix(in srgb, var(--fill, var(--accent)) 35%, transparent);
+		}
+		.progress.v-liquid.indeterminate::before,
+		.progress.v-liquid.indeterminate::after {
+			display: none;
+		}
+		.progress.v-liquid.indeterminate .bar {
+			display: none;
+		}
+		.progress.v-stripes .bar::after {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/atoms/Progress.svelte.d.ts

@@ -15,6 +15,7 @@ type $$ComponentProps = {
     gradient?: boolean;
     striped?: boolean;
     indeterminate?: boolean;
+    variant?: 'default' | 'liquid' | 'stripes';
     /** Thin vertical lines at `at / max` (caps, thresholds). */
     markers?: {
         at: number;

package/dist/components/atoms/SegmentedProgress.svelte

@@ -168,7 +168,7 @@
 		flex: 0 1 0%;
 		min-width: 3px;
 		height: 100%;
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 	}
 	.segment:first-child {
@@ -206,7 +206,7 @@
 
 	.stacked {
 		overflow: hidden;
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 	}
 	.stacked .segment {
 		min-width: 0;

package/dist/components/atoms/Select.svelte

@@ -217,9 +217,10 @@
 		padding: var(--sp-2) var(--control-px-md);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
-		background: var(--select-bg, var(--bg));
-		border: 1px solid var(--select-border, var(--border-strong));
+		background: var(--select-bg, var(--control-fill));
+		border: var(--edge-width) solid var(--select-border, var(--control-edge));
 		border-radius: var(--select-radius, var(--r-md));
+		box-shadow: var(--control-shadow);
 		color: var(--select-fg, var(--text));
 		transition: border-color var(--dur-fast) ease;
 	}
@@ -261,11 +262,15 @@
 		background: var(--select-bg, var(--bg-elevated-2));
 		border: none;
 		border-radius: var(--select-radius, var(--r-sm));
+		box-shadow: none;
 	}
 	.select:focus {
 		outline: none;
 		border-color: var(--accent);
 	}
+	.select:focus-visible:not(.embedded, .ghost) {
+		box-shadow: var(--control-shadow), var(--focus-glow);
+	}
 	.select:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
@@ -274,6 +279,36 @@
 	.select[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	.select {
+		--focus-tint: var(--accent);
+	}
+	.select[aria-invalid='true'] {
+		--focus-tint: var(--danger);
+	}
+	/* Focus bloom: a solid ring whose soft halo swells, then settles to a quieter glow. */
+	.select:not(.ghost, .embedded):focus:not(:global([data-fx-focus='none']) *),
+	:global(:is([data-fx-focus='bloom'], [data-fx-focus='label'])) .select:not(.ghost, .embedded):focus:not(:global(:is([data-fx-focus='bloom'], [data-fx-focus='label']) [data-fx-focus='none']) *) {
+		outline: none;
+		box-shadow:
+			var(--control-shadow),
+			0 0 0 var(--focus-ring-width) var(--focus-tint),
+			0 0 16px 2px color-mix(in srgb, var(--focus-tint) 24%, transparent);
+		animation: focus-bloom var(--dur-fast) var(--ease-out);
+	}
+	@keyframes focus-bloom {
+		0% {
+			box-shadow:
+				var(--control-shadow),
+				0 0 0 0 transparent,
+				0 0 0 0 transparent;
+		}
+		45% {
+			box-shadow:
+				var(--control-shadow),
+				0 0 0 calc(var(--focus-ring-width) + 1px) var(--focus-tint),
+				0 0 20px 4px color-mix(in srgb, var(--focus-tint) 32%, transparent);
+		}
+	}
 	.select:disabled {
 		cursor: not-allowed;
 	}
@@ -367,7 +402,7 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.select:hover:not(:disabled, :focus, [aria-invalid='true'], .ghost, .embedded) {
-			border-color: var(--text-faint);
+			border-color: var(--control-edge-hover);
 		}
 	}
 	/* Transparent overlay: fills the positioned parent, the trigger shows through. */
@@ -380,6 +415,7 @@
 		opacity: 0;
 		border: none;
 		background: none;
+		box-shadow: none;
 		cursor: pointer;
 	}
 </style>

package/dist/components/atoms/Skeleton.svelte

@@ -2,8 +2,10 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	// Shimmering placeholder bar(s) standing in for content that is still
 	// loading. Decorative only — the surrounding region should carry aria-busy.
-	// Bars are tinted from --text so they read on any surface; the sweep is
-	// viewport-anchored so every bar on screen shimmers in sync.
+	// Bars are tinted from --text so they read on any surface. `shimmer` is a
+	// viewport-anchored sweep so every bar on screen shimmers in sync; `sheen`
+	// runs one light across each bar; `pulse` breathes in opacity, each bar a
+	// beat behind the previous one (`--skeleton-phase` offsets the whole set).
 	type Own = {
 		width?: string;
 		height?: string;
@@ -12,6 +14,7 @@
 		/** Round avatar placeholder — width follows height. */
 		circle?: boolean;
 		radius?: string;
+		variant?: 'shimmer' | 'sheen' | 'pulse';
 		class?: string;
 	};
 	let {
@@ -20,6 +23,7 @@
 		lines = 1,
 		circle = false,
 		radius = 'var(--r-sm)',
+		variant = 'shimmer',
 		class: klass = '',
 		...rest
 	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
@@ -29,13 +33,14 @@
 	const count = $derived(Math.max(1, Math.floor(lines)));
 </script>
 
-<span class="skeleton {klass}" data-tsu="Skeleton" aria-hidden="true" style:width={w} {...rest}>
+<span class="skeleton v-{variant} {klass}" data-tsu="Skeleton" aria-hidden="true" style:width={w} {...rest}>
 	{#each { length: count } as _, i (i)}
 		<span
 			class="skeleton-bar"
 			style:height
 			style:border-radius={r}
 			style:width={count > 1 && i === count - 1 ? '60%' : undefined}
+			style:--i={i}
 		></span>
 	{/each}
 </span>
@@ -72,4 +77,50 @@
 			background: var(--sk-base);
 		}
 	}
+	.v-sheen .skeleton-bar,
+	.v-pulse .skeleton-bar {
+		background: var(--sk-base);
+	}
+	.v-sheen .skeleton-bar {
+		position: relative;
+		overflow: hidden;
+		animation: none;
+	}
+	.v-sheen .skeleton-bar::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		width: 45%;
+		background: linear-gradient(100deg, transparent 20%, var(--sk-hi) 50%, transparent 80%);
+		transform: translateX(-100%);
+		animation: tsu-skeleton-sheen 2s var(--ease-in-out) infinite;
+	}
+	@keyframes tsu-skeleton-sheen {
+		70%,
+		100% {
+			transform: translateX(260%);
+		}
+	}
+	.v-pulse .skeleton-bar {
+		animation: tsu-skeleton-pulse 1.6s var(--ease-in-out) infinite;
+		animation-delay: calc(0.13s * (var(--i, 0) + var(--skeleton-phase, 0)));
+	}
+	@keyframes tsu-skeleton-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.45;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.v-pulse .skeleton-bar {
+			animation: none;
+		}
+		.v-sheen .skeleton-bar::after {
+			animation: none;
+			transform: translateX(60%);
+		}
+	}
 </style>

package/dist/components/atoms/Skeleton.svelte.d.ts

@@ -7,6 +7,7 @@ type Own = {
     /** Round avatar placeholder — width follows height. */
     circle?: boolean;
     radius?: string;
+    variant?: 'shimmer' | 'sheen' | 'pulse';
     class?: string;
 };
 type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;

package/dist/components/atoms/Slider.svelte

@@ -210,13 +210,13 @@
 		background: linear-gradient(
 			to right,
 			var(--slider-accent, var(--accent)) var(--pct),
-			var(--bg-elevated-2) var(--pct)
+			var(--track-fill) var(--pct)
 		);
 	}
 	input[type='range']::-moz-range-track {
 		height: var(--track);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 	}
 	input[type='range']::-moz-range-progress {
 		height: var(--track);
@@ -233,7 +233,7 @@
 		border-radius: var(--r-pill);
 		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transition:
 			scale var(--dur-press) var(--ease-out),
 			box-shadow var(--dur-fast) var(--ease);
@@ -244,17 +244,17 @@
 		border-radius: var(--r-pill);
 		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transition:
 			scale var(--dur-press) var(--ease-out),
 			box-shadow var(--dur-fast) var(--ease);
 	}
 	@media (hover: hover) and (pointer: fine) {
 		input[type='range']:not(:disabled):hover::-webkit-slider-thumb {
-			box-shadow: var(--shadow-sm), var(--halo);
+			box-shadow: var(--thumb-shadow), var(--halo);
 		}
 		input[type='range']:not(:disabled):hover::-moz-range-thumb {
-			box-shadow: var(--shadow-sm), var(--halo);
+			box-shadow: var(--thumb-shadow), var(--halo);
 		}
 	}
 	input[type='range']:not(:disabled):active::-webkit-slider-thumb {
@@ -269,10 +269,12 @@
 	input[type='range']:focus-visible::-webkit-slider-thumb {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--thumb-shadow), var(--focus-glow);
 	}
 	input[type='range']:focus-visible::-moz-range-thumb {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--thumb-shadow), var(--focus-glow);
 	}
 	@media (pointer: coarse) {
 		input[type='range'] {

package/dist/components/atoms/Spinner.svelte

@@ -8,7 +8,11 @@
 		| 'bars'
 		| 'grid'
 		| 'clock'
-		| 'bounce';
+		| 'bounce'
+		| 'comet'
+		| 'breath'
+		| 'morph'
+		| 'sweep';
 
 	// Inner spans per variant; `.in` wraps the flex/grid ones in an absolute
 	// layer so the root keeps the same inline baseline as the others.
@@ -20,7 +24,11 @@
 		bars: { count: 4, wrap: true },
 		grid: { count: 9, wrap: true },
 		clock: { count: 0, wrap: false },
-		bounce: { count: 2, wrap: false }
+		bounce: { count: 2, wrap: false },
+		comet: { count: 1, wrap: false },
+		breath: { count: 5, wrap: true },
+		morph: { count: 0, wrap: false },
+		sweep: { count: 0, wrap: false }
 	};
 </script>
 
@@ -29,7 +37,7 @@
 	// other variants are pure-CSS pictograms drawn in currentColor inside a 1em
 	// box. Every variant's base style is a meaningful static pose, which is what
 	// shows under prefers-reduced-motion. `--spinner-speed` scales the tempo.
-	// `clock` and `bounce` read best at 20px and up.
+	// `clock` and `bounce` read best at 20px and up; `breath` is 2.5em wide.
 	import Icon from './Icon.svelte';
 
 	let {
@@ -82,6 +90,11 @@
 		inherits: false;
 		initial-value: 100deg;
 	}
+	@property --tsu-spin-sweep {
+		syntax: '<angle>';
+		inherits: false;
+		initial-value: 0deg;
+	}
 
 	.spinner {
 		--sw: max(1.5px, 0.11em);
@@ -472,6 +485,142 @@
 		}
 	}
 
+	.v-comet::before,
+	.v-comet > span,
+	.v-sweep::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		-webkit-mask: radial-gradient(
+			farthest-side,
+			transparent calc(100% - var(--sw)),
+			#000 calc(100% - var(--sw) + 0.5px)
+		);
+		mask: radial-gradient(
+			farthest-side,
+			transparent calc(100% - var(--sw)),
+			#000 calc(100% - var(--sw) + 0.5px)
+		);
+	}
+	.v-comet::before {
+		background: currentColor;
+		opacity: 0.1;
+	}
+	.v-comet > span {
+		background: conic-gradient(from 0deg, transparent 0 35%, currentColor 100%);
+		animation: tsu-spin-comet calc(var(--t) * 1.1) linear infinite;
+	}
+	.v-comet > span::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 50%;
+		width: var(--sw);
+		height: var(--sw);
+		border-radius: 50%;
+		background: currentColor;
+		box-shadow: 0 0 0.25em 0.04em currentColor;
+		transform: translateX(-50%);
+	}
+	@keyframes tsu-spin-comet {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.v-sweep::before {
+		background: conic-gradient(
+			from var(--tsu-spin-sweep),
+			color-mix(in srgb, currentColor 18%, transparent),
+			currentColor 50%,
+			color-mix(in srgb, currentColor 18%, transparent)
+		);
+		animation: tsu-spin-sweep calc(var(--t) * 1.4) linear infinite;
+	}
+	@keyframes tsu-spin-sweep {
+		to {
+			--tsu-spin-sweep: 360deg;
+		}
+	}
+
+	.v-morph::before {
+		content: '';
+		position: absolute;
+		inset: 0.08em;
+		border-radius: 50%;
+		background: currentColor;
+		animation: tsu-spin-morph calc(var(--t) * 2.4) cubic-bezier(0.77, 0, 0.175, 1) infinite;
+	}
+	@keyframes tsu-spin-morph {
+		0% {
+			border-radius: 50%;
+			transform: rotate(0deg) scale(1);
+		}
+		25% {
+			border-radius: 24%;
+			transform: rotate(90deg) scale(0.92);
+		}
+		50% {
+			border-radius: 50%;
+			transform: rotate(180deg) scale(1);
+		}
+		75% {
+			border-radius: 24%;
+			transform: rotate(270deg) scale(0.92);
+		}
+		100% {
+			border-radius: 50%;
+			transform: rotate(360deg) scale(1);
+		}
+	}
+
+	.v-breath {
+		width: 2.5em;
+	}
+	.v-breath .in {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.v-breath .in span {
+		width: 0.34em;
+		height: 0.34em;
+		border-radius: 50%;
+		background: currentColor;
+		animation: tsu-spin-breath calc(var(--t) * 1.3) cubic-bezier(0.77, 0, 0.175, 1) infinite;
+	}
+	.v-breath .in span:nth-child(1) {
+		opacity: 1;
+		animation-delay: calc(var(--t) * -0.52);
+	}
+	.v-breath .in span:nth-child(2) {
+		opacity: 0.75;
+		animation-delay: calc(var(--t) * -0.39);
+	}
+	.v-breath .in span:nth-child(3) {
+		opacity: 0.55;
+		animation-delay: calc(var(--t) * -0.26);
+	}
+	.v-breath .in span:nth-child(4) {
+		opacity: 0.4;
+		animation-delay: calc(var(--t) * -0.13);
+	}
+	.v-breath .in span:nth-child(5) {
+		opacity: 0.28;
+	}
+	@keyframes tsu-spin-breath {
+		0%,
+		100% {
+			opacity: 0.3;
+			transform: scale(0.6);
+		}
+		40% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.spinner.spinner,
 		.spinner.spinner span,

package/dist/components/atoms/Spinner.svelte.d.ts

@@ -1,4 +1,4 @@
-export type SpinnerVariant = 'icon' | 'arc' | 'dots' | 'orbit' | 'pulse' | 'bars' | 'grid' | 'clock' | 'bounce';
+export type SpinnerVariant = 'icon' | 'arc' | 'dots' | 'orbit' | 'pulse' | 'bars' | 'grid' | 'clock' | 'bounce' | 'comet' | 'breath' | 'morph' | 'sweep';
 type $$ComponentProps = {
     variant?: SpinnerVariant;
     /** Explicit pixel size. Omit to track the surrounding text (1em). */

package/dist/components/atoms/Swatch.svelte

@@ -70,7 +70,7 @@
 		height: var(--swatch-size);
 		padding: 0;
 		margin: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--border);
 		border-radius: var(--r-pill);
 		background: var(--swatch-color);
 		color: var(--text);