@dorsk/tsumikit 0.79.0 → 0.80.1

package/dist/components/atoms/Checkbox.svelte

@@ -44,8 +44,10 @@
 
 	const field = getFieldContext();
 	const isInvalid = $derived(invalid || !!field?.invalid);
+	let armed = $state(false);
 
 	function change(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		armed = true;
 		onchange?.(e);
 		playSound(e.currentTarget.checked ? 'toggle-on' : 'toggle-off', sound);
 	}
@@ -60,6 +62,7 @@
 	class="checkbox {klass}"
 	class:checkbox-sm={size === 'sm'}
 	class:checkbox-lg={size === 'lg'}
+	class:armed
 	data-tsu="Checkbox"
 >
 	<input
@@ -72,7 +75,10 @@
 		aria-describedby={ariaDescribedby ?? field?.describedBy}
 		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	/>
-	<span class="box" aria-hidden="true"></span>
+	<span class="box" aria-hidden="true">
+		<svg viewBox="0 0 20 20"><path class="tick" pathLength="1" d="M5.5 10.5l3 3 6-7" /></svg>
+		<span class="fx"></span>
+	</span>
 	<span class="label-text" class:sr-only={labelHidden}>{label}</span>
 </label>
 
@@ -110,6 +116,7 @@
 		border-radius: var(--r-sm);
 		background: var(--control-fill);
 		box-shadow: var(--control-shadow);
+		isolation: isolate;
 		transition:
 			background var(--dur-fast) var(--ease),
 			border-color var(--dur-fast) var(--ease),
@@ -156,6 +163,175 @@
 			opacity var(--dur-spring) var(--ease-spring),
 			scale var(--dur-spring) var(--ease-spring);
 	}
+	svg {
+		position: absolute;
+		inset: -1px;
+		width: calc(100% + 2px);
+		height: calc(100% + 2px);
+		overflow: visible;
+		fill: none;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	.tick {
+		stroke: var(--text-on-accent);
+		stroke-width: 2.25;
+		stroke-dasharray: 1 2;
+		stroke-dashoffset: 1.05;
+		transition: stroke-dashoffset var(--dur-exit-fast) var(--ease-out);
+	}
+	.fx {
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+		font-size: var(--cb-box, var(--chip-sm));
+		pointer-events: none;
+	}
+	.fx::before,
+	.fx::after {
+		content: '';
+		position: absolute;
+		opacity: 0;
+	}
+
+	/* Effects follow the closest data-fx-check ancestor; draw is the default. */
+	.checkbox:not(:global([data-fx-check]:not([data-fx-check='draw'])) *),
+	:global([data-fx-check='draw']) .checkbox:not(:global([data-fx-check='draw'] [data-fx-check]:not([data-fx-check='draw'])) *),
+	:global([data-fx-check='pop']) .checkbox:not(:global([data-fx-check='pop'] [data-fx-check]:not([data-fx-check='pop'])) *),
+	:global([data-fx-check='confetti']) .checkbox:not(:global([data-fx-check='confetti'] [data-fx-check]:not([data-fx-check='confetti'])) *) {
+		& input:checked:not(:indeterminate) + .box::after {
+			opacity: 0;
+			transition: none;
+		}
+		& input:checked:not(:indeterminate) + .box .tick {
+			stroke-dashoffset: 0;
+			transition: stroke-dashoffset var(--dur-exit-slow) var(--ease-out) calc(var(--dur-fast) / 3);
+		}
+	}
+
+	:global([data-fx-check='pop']) .checkbox:not(:global([data-fx-check='pop'] [data-fx-check]:not([data-fx-check='pop'])) *) {
+		&.armed input:checked + .box {
+			animation: cb-pop var(--dur-spring) var(--ease-out);
+		}
+	}
+	@keyframes cb-pop {
+		30% {
+			scale: 0.8;
+		}
+		65% {
+			scale: 1.14;
+		}
+	}
+
+	:global([data-fx-check='confetti']) .checkbox:not(:global([data-fx-check='confetti'] [data-fx-check]:not([data-fx-check='confetti'])) *) {
+		& .fx::before,
+		& .fx::after {
+			inset: -0.85em;
+			border-radius: var(--r-pill);
+		}
+		& .fx::before {
+			background:
+				radial-gradient(circle at 50% 6%, var(--accent) 0 0.06em, transparent 0.08em),
+				radial-gradient(circle at 94% 50%, var(--info) 0 0.06em, transparent 0.08em),
+				radial-gradient(circle at 50% 94%, var(--accent) 0 0.06em, transparent 0.08em),
+				radial-gradient(circle at 6% 50%, var(--ok) 0 0.06em, transparent 0.08em);
+		}
+		& .fx::after {
+			background:
+				radial-gradient(circle at 81% 19%, var(--warn) 0 0.045em, transparent 0.065em),
+				radial-gradient(circle at 81% 81%, var(--accent) 0 0.045em, transparent 0.065em),
+				radial-gradient(circle at 19% 81%, var(--info) 0 0.045em, transparent 0.065em),
+				radial-gradient(circle at 19% 19%, var(--accent) 0 0.045em, transparent 0.065em);
+		}
+		&.armed input:checked:not(:indeterminate) + .box .fx::before {
+			animation: cb-burst var(--dur-spring) var(--ease);
+		}
+		&.armed input:checked:not(:indeterminate) + .box .fx::after {
+			animation: cb-burst-late var(--dur-spring) var(--ease);
+		}
+	}
+	@keyframes cb-burst {
+		0% {
+			opacity: 0;
+			scale: 0.35;
+		}
+		20%,
+		60% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			scale: 1.05;
+			rotate: 18deg;
+		}
+	}
+	@keyframes cb-burst-late {
+		0% {
+			opacity: 0;
+			scale: 0.3;
+		}
+		30%,
+		70% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			scale: 0.9;
+			rotate: -14deg;
+		}
+	}
+
+	/* Two bars, the short and long legs of the tick, fold flat into the dash. */
+	:global([data-fx-check='morph']) .checkbox:not(:global([data-fx-check='morph'] [data-fx-check]:not([data-fx-check='morph'])) *) {
+		& .box::after {
+			display: none;
+		}
+		& .fx {
+			z-index: 0;
+		}
+		& .fx::before,
+		& .fx::after {
+			left: 0;
+			top: 0;
+			height: 0.11em;
+			border-radius: var(--r-pill);
+			background: var(--text-on-accent);
+			scale: 0;
+			transition:
+				opacity var(--dur-fast) var(--ease),
+				translate var(--dur-spring) var(--ease-spring),
+				rotate var(--dur-spring) var(--ease-spring),
+				scale var(--dur-spring) var(--ease-spring);
+		}
+		& .fx::before {
+			width: 0.26em;
+			translate: 0.22em 0.545em;
+			rotate: 45deg;
+		}
+		& .fx::after {
+			width: 0.5em;
+			translate: 0.325em 0.445em;
+			rotate: -49deg;
+		}
+		& input:checked + .box .fx::before,
+		& input:checked + .box .fx::after {
+			opacity: 1;
+			scale: 1;
+		}
+		& input:indeterminate + .box .fx::before {
+			opacity: 1;
+			translate: 0.37em 0.445em;
+			rotate: 0deg;
+			scale: 1;
+		}
+		& input:indeterminate + .box .fx::after {
+			opacity: 1;
+			translate: 0.25em 0.445em;
+			rotate: 0deg;
+			scale: 1;
+		}
+	}
+
 	input:focus-visible + .box {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);

package/dist/components/atoms/Input.svelte

@@ -106,6 +106,7 @@
 		style:width={wrapped ? undefined : width}
 		bind:value
 		{...rest}
+		placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 		disabled={isDisabled}
 		onkeydown={onenter || onsubmit || onkeydown ? handleKeydown : undefined}
 		id={id ?? field?.id}
@@ -158,6 +159,10 @@
 		outline-offset: var(--focus-ring-offset);
 		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
+	.input::placeholder {
+		color: var(--text-faint);
+		opacity: 1;
+	}
 	.input:disabled {
 		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
@@ -208,6 +213,36 @@
 	.input[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	.input {
+		--focus-tint: var(--accent);
+	}
+	.input[aria-invalid='true'] {
+		--focus-tint: var(--danger);
+	}
+	/* Focus bloom: a solid ring whose soft halo swells, then settles to a quieter glow. */
+	.input:not(.grouped):focus:not(:global([data-fx-focus='none']) *),
+	:global(:is([data-fx-focus='bloom'], [data-fx-focus='label'])) .input:not(.grouped):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);
+		}
+	}
 	/* Inside an InputGroup the group draws the focus ring, dims the whole group
 	   and the overlaid adornments report their widths; the text stays clear of them. */
 	.input.grouped {

package/dist/components/atoms/Link.svelte

@@ -77,10 +77,71 @@
 		.underline-hover:hover {
 			text-decoration: underline;
 		}
+		.link:hover {
+			--link-on: 0%;
+			--link-draw: 100%;
+			--link-mark: color-mix(in srgb, currentColor 30%, transparent);
+			--link-deco: transparent;
+			--link-in: var(--dur-press);
+			--link-grow: var(--dur-fast);
+			--link-hold: var(--dur-instant);
+		}
 	}
 	.align-center {
 		text-align: center;
 	}
+
+	/* Hover, focus and press only raise these; each variant decides what they paint. */
+	.link:is(:focus-visible, :active) {
+		--link-on: 0%;
+		--link-draw: 100%;
+		--link-mark: color-mix(in srgb, currentColor 30%, transparent);
+		--link-deco: transparent;
+		--link-in: var(--dur-press);
+		--link-grow: var(--dur-fast);
+		--link-hold: var(--dur-instant);
+	}
+
+	/* Sweep line: the underline fills in from the left and leaves to the right. */
+	.link:not(.underline-none):not(:global([data-fx-link]:not([data-fx-link='sweep'])) *),
+	:global([data-fx-link='sweep']) .link:not(.underline-none):not(:global([data-fx-link='sweep'] [data-fx-link]:not([data-fx-link='sweep'])) *) {
+		--link-base: 0%;
+		text-decoration: none;
+		background-image:
+			linear-gradient(currentColor, currentColor),
+			linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
+		background-repeat: no-repeat;
+		background-position: var(--link-on, 100%) 100%, 0 100%;
+		background-size: var(--link-draw, 0%) 1.5px, var(--link-base) 1px;
+		transition:
+			color var(--dur-fast) ease,
+			background-size var(--dur-fast) var(--ease-out);
+		&.underline-always {
+			--link-base: 100%;
+		}
+	}
+
+	/* Highlighter: a marker swipes in behind the words and fades on leave. */
+	:global([data-fx-link='highlight']) .link:not(.underline-none):not(:global([data-fx-link='highlight'] [data-fx-link]:not([data-fx-link='highlight'])) *) {
+		margin-inline: -0.18em;
+		padding-inline: 0.18em;
+		border-radius: 0.2em 0.35em 0.25em 0.4em;
+		background-image: linear-gradient(100deg, var(--link-mark), color-mix(in srgb, var(--link-mark) 70%, transparent));
+		background-repeat: no-repeat;
+		background-size: var(--link-draw, 0%) 100%;
+		text-decoration-color: var(--link-deco, color-mix(in srgb, currentColor 45%, transparent));
+		text-underline-offset: 0.2em;
+		transition:
+			color var(--dur-fast) ease,
+			text-decoration-color var(--dur-fast) ease,
+			--link-mark var(--link-in, var(--dur-exit)) ease,
+			background-size var(--link-grow, var(--dur-instant)) var(--ease-out) var(--link-hold, var(--dur-exit));
+	}
+	@property --link-mark {
+		syntax: '<color>';
+		inherits: false;
+		initial-value: transparent;
+	}
 	@media (pointer: coarse) {
 		.link {
 			position: relative;

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}
@@ -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/Select.svelte

@@ -279,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;
 	}

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;