@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/components/atoms/Card.svelte

@@ -96,6 +96,45 @@
 	const framed = $derived(!!(header || footer || title));
 	const native = $derived(as === 'button' || as === 'a');
 
+	let el = $state<HTMLElement>();
+	const lit = $derived(tap || interactive);
+
+	// The spotlight follows the pointer itself unless the app already runs trackPointer().
+	$effect(() => {
+		const node = el;
+		if (!node || !lit) return;
+		let frame = 0;
+		let x = 0;
+		let y = 0;
+		const flush = () => {
+			frame = 0;
+			const r = node.getBoundingClientRect();
+			node.style.setProperty('--pointer-x', `${x - r.left}px`);
+			node.style.setProperty('--pointer-y', `${y - r.top}px`);
+		};
+		const move = (e: PointerEvent) => {
+			if (e.pointerType !== 'mouse') return;
+			x = e.clientX;
+			y = e.clientY;
+			if (!frame) frame = requestAnimationFrame(flush);
+		};
+		const enter = (e: PointerEvent) => {
+			if (e.pointerType !== 'mouse' || globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+			if (getComputedStyle(node).getPropertyValue('--card-fx').trim() !== 'spotlight') return;
+			move(e);
+			node.addEventListener('pointermove', move, { passive: true });
+		};
+		const leave = () => node.removeEventListener('pointermove', move);
+		node.addEventListener('pointerenter', enter, { passive: true });
+		node.addEventListener('pointerleave', leave, { passive: true });
+		return () => {
+			leave();
+			node.removeEventListener('pointerenter', enter);
+			node.removeEventListener('pointerleave', leave);
+			if (frame) cancelAnimationFrame(frame);
+		};
+	});
+
 	const NESTED = 'button,a,input,select,textarea,[role=button],[contenteditable],[contenteditable=true]';
 	function fromNested(e: Event): boolean {
 		const target = e.target as Element | null;
@@ -118,6 +157,7 @@
 
 <svelte:element
 	this={as}
+	bind:this={el}
 	data-tsu="Card"
 	class="card {klass}"
 	class:pad-none={padding === 'none'}
@@ -168,16 +208,19 @@
 	{:else}
 		{@render children?.()}
 	{/if}
+	{#if lit}<span class="card-fx" aria-hidden="true"></span>{/if}
 </svelte:element>
 
 <style>
 	.card {
 		--card-pad: var(--sp-4);
 		min-width: 0;
-		background: var(--bg-elevated);
+		background: var(--surface-fill);
 		--card-border-style: solid;
-		border: 1px var(--card-border-style) var(--border);
+		border: var(--edge-width) var(--card-border-style) var(--surface-edge);
 		border-radius: var(--r-lg);
+		--card-shadow-rest: var(--surface-shadow);
+		box-shadow: var(--card-shadow-rest);
 		padding: var(--card-pad);
 	}
 	.card-gap {
@@ -194,10 +237,10 @@
 		padding: var(--card-pad);
 	}
 	.card-head {
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.card-foot {
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	/* Theme-aware surface shade, selected by prop so it adapts across themes
 	   instead of being overridden with app-level :global hacks. `base` is the
@@ -206,7 +249,7 @@
 		background: var(--surface);
 	}
 	.surface-sunken {
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 	}
 	.border-dashed {
 		--card-border-style: dashed;
@@ -237,18 +280,122 @@
 			border-color var(--dur-fast) var(--ease),
 			background var(--dur-fast) var(--ease),
 			box-shadow var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease-out),
 			scale var(--dur-fast) var(--ease-out);
 	}
 	.card-tap:active {
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		scale: var(--press-scale-lg);
 		transition-duration: var(--dur-press);
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.card-tap:hover {
-			border-color: var(--border-strong);
+			border-color: var(--surface-edge-strong);
+			translate: 0 calc(-1 * var(--hover-lift));
+			--card-shadow-rest: var(--surface-shadow-hover);
+			--card-glow: 100%;
+			--card-lit: 1;
+			--card-fade: var(--dur-fast);
+			--card-spin: var(--card-orbit-spin);
+		}
+	}
+	.card-tap:focus-visible {
+		--card-glow: 100%;
+		--card-lit: 1;
+		--card-fade: var(--dur-fast);
+		--card-spin: var(--card-orbit-spin);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.card-tap:hover > .card-fx {
+			--card-orbit: 360deg;
 		}
 	}
+	.card-tap:focus-visible > .card-fx {
+		--card-orbit: 360deg;
+	}
+
+	/* Hover light for tappable cards: a wash on the surface plus a ring on the edge. */
+	.card-tap {
+		position: relative;
+	}
+	.card-fx {
+		position: absolute;
+		inset: calc(-1 * var(--edge-width));
+		padding: 1.5px;
+		border-radius: inherit;
+		pointer-events: none;
+		opacity: var(--card-lit, 0);
+		mask:
+			linear-gradient(var(--text), var(--text)) content-box exclude,
+			linear-gradient(var(--text), var(--text));
+		transition:
+			opacity var(--card-fade, var(--dur-exit)) ease,
+			--card-orbit var(--card-spin, var(--dur-instant)) var(--ease-out);
+	}
+	.card-tap:not(:global([data-fx-card='none']) *),
+	:global(:is([data-fx-card='spotlight'], [data-fx-card='orbit'])) .card-tap:not(:global(:is([data-fx-card='spotlight'], [data-fx-card='orbit']) [data-fx-card='none']) *) {
+		transition:
+			border-color var(--dur-fast) var(--ease),
+			background var(--dur-fast) var(--ease),
+			box-shadow var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease-out),
+			scale var(--dur-fast) var(--ease-out),
+			--card-glow var(--card-fade, var(--dur-exit)) ease;
+	}
+
+	/* Spotlight: a soft light follows the pointer and lights the nearest edge. */
+	.card-tap:not(:global([data-fx-card]:not([data-fx-card='spotlight'])) *),
+	:global([data-fx-card='spotlight']) .card-tap:not(:global([data-fx-card='spotlight'] [data-fx-card]:not([data-fx-card='spotlight'])) *) {
+		--card-fx: spotlight;
+		background-image: radial-gradient(
+			circle 11rem at var(--card-spot-x) var(--card-spot-y),
+			color-mix(in srgb, var(--accent) calc(var(--card-glow) * 0.2), transparent),
+			transparent 70%
+		);
+		--card-spot-x: var(--pointer-x, 50%);
+		--card-spot-y: var(--pointer-y, 33%);
+		& .card-fx {
+			background: radial-gradient(
+				circle 7rem at calc(var(--card-spot-x) + var(--edge-width)) calc(var(--card-spot-y) + var(--edge-width)),
+				var(--accent) 15%,
+				transparent
+			);
+		}
+	}
+
+	/* Border orbit: on hover-enter a comet makes exactly one revolution of the edge, then rests. */
+	:global([data-fx-card='orbit']) .card-tap:not(:global([data-fx-card='orbit'] [data-fx-card]:not([data-fx-card='orbit'])) *) {
+		--card-fx: orbit;
+		background-image: linear-gradient(
+			160deg,
+			color-mix(in srgb, var(--accent) calc(var(--card-glow) * 0.09), transparent),
+			transparent 55%
+		);
+		--card-orbit-spin: calc(var(--dur-slow) * 4);
+		& .card-fx {
+			background:
+				conic-gradient(
+					from var(--card-orbit),
+					transparent 0 62%,
+					color-mix(in srgb, var(--accent) 40%, transparent) 80%,
+					var(--accent) 92%,
+					color-mix(in srgb, var(--text) 85%, var(--accent)) 96%,
+					transparent 100%
+				),
+				linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
+		}
+	}
+	@property --card-glow {
+		syntax: '<percentage>';
+		inherits: false;
+		initial-value: 0%;
+	}
+	@property --card-orbit {
+		syntax: '<angle>';
+		inherits: false;
+		initial-value: 0deg;
+	}
 	.card-max {
 		width: 100%;
 	}
@@ -275,9 +422,10 @@
 	.card-warn,
 	.card-danger,
 	.card-info,
+	.card-accent,
 	.card-attention {
-		border-color: color-mix(in srgb, var(--card-tone) 55%, var(--border));
-		background: color-mix(in srgb, var(--card-tone) 8%, var(--bg-elevated));
+		border-color: color-mix(in srgb, var(--card-tone) 55%, var(--surface-edge));
+		background: color-mix(in srgb, var(--card-tone) 8%, var(--surface-fill));
 	}
 	.card-attention {
 		background: var(--attention-bg);
@@ -291,8 +439,8 @@
 		/* Defaults; overridden inline by the stackY/stackX props. */
 		--stack-y: 8px;
 		--stack-x: 2px;
-		--stack-bg: var(--bg-elevated-2);
-		--stack-border: var(--border);
+		--stack-bg: var(--surface-fill-2);
+		--stack-border: var(--surface-edge);
 		/* Reserve room for the two peeking layers so they aren't clipped. */
 		margin-right: calc(var(--stack-x) * 2);
 		margin-bottom: calc(var(--stack-y) * 2);
@@ -306,7 +454,7 @@
 		/* Opaque fill so each layer fully hides the one behind it — only the
 		   bottom-right peek (and its single border line) stays visible. */
 		background: var(--stack-bg);
-		border: 1px var(--card-border-style) var(--stack-border);
+		border: var(--edge-width) var(--card-border-style) var(--stack-border);
 	}
 	/* Nearest back layer — sits just under the front surface. */
 	.card-stacked::before {

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>
 
@@ -106,9 +112,11 @@
 		flex: none;
 		width: var(--cb-box, var(--chip-sm));
 		height: var(--cb-box, var(--chip-sm));
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-sm);
-		background: var(--bg);
+		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),
@@ -155,9 +163,179 @@
 			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);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	input[aria-invalid='true']:not(:checked):not(:indeterminate) + .box {
 		border-color: var(--danger);

package/dist/components/atoms/Gauge.svelte

@@ -108,9 +108,9 @@
 		height: var(--gauge-h, 1.25rem);
 		margin: 0;
 		padding: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--track-edge);
 		border-radius: var(--r-sm);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: visible;
 		color: inherit;
 		font: inherit;

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}
@@ -142,9 +143,10 @@
 		padding: var(--sp-2) var(--control-px-md);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
-		background: var(--input-bg, var(--bg));
-		border: 1px solid var(--input-border, var(--border-strong));
+		background: var(--input-bg, var(--control-fill));
+		border: var(--edge-width) solid var(--input-border, var(--control-edge));
 		border-radius: var(--input-radius, var(--r-md));
+		box-shadow: var(--control-shadow);
 		color: var(--input-fg, var(--text));
 		transition: border-color var(--dur-fast) ease;
 	}
@@ -155,6 +157,11 @@
 	.input:focus-visible {
 		outline: var(--focus-ring);
 		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);
@@ -206,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 {
@@ -216,6 +253,7 @@
 	}
 	.input.grouped:focus-visible {
 		outline: none;
+		box-shadow: var(--control-shadow);
 	}
 	.input.grouped:disabled {
 		opacity: 1;
@@ -296,7 +334,7 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.input:hover:not(:disabled, :focus, [aria-invalid='true']) {
-			border-color: var(--text-faint);
+			border-color: var(--control-edge-hover);
 		}
 		.input-clear:hover {
 			color: var(--text);

package/dist/components/atoms/Kbd.svelte

@@ -108,7 +108,7 @@
 		font-size: inherit;
 		line-height: var(--lh-snug);
 		padding: 0 var(--sp-1);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--border-strong);
 		border-bottom-width: 2px;
 		border-radius: var(--r-sm);
 		background: var(--bg-elevated-2);

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;