@dorsk/tsumikit 0.79.0 → 0.80.1

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/Switch.svelte

@@ -36,11 +36,13 @@
 
 	const field = getFieldContext();
 	const isInvalid = $derived(invalid || !!field?.invalid);
+	let armed = $state(false);
 
 	function toggle(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
 		onclick?.(e);
 		if (e.defaultPrevented) return;
 		checked = !checked;
+		armed = true;
 		playSound(checked ? 'toggle-on' : 'toggle-off', sound);
 	}
 </script>
@@ -53,6 +55,7 @@
 		class="switch {klass}"
 		class:on={checked}
 		class:switch-sm={size === 'sm'}
+		class:armed
 		role="switch"
 		aria-checked={checked}
 		id={id ?? field?.id}
@@ -78,6 +81,8 @@
 	/* Track and knob sit on the 4px grid: md 24 / sm 20 tall, knob = track minus
 	   border and padding, travel = track width minus the knob and insets. */
 	.switch {
+		position: relative;
+		isolation: isolate;
 		--sw-h: var(--chip-md);
 		--sw-w: 2.75rem;
 		--sw-inset: calc(var(--sp-0-5) + 1px);
@@ -97,6 +102,7 @@
 			border-color var(--dur-fast) var(--ease);
 	}
 	.switch .knob {
+		position: relative;
 		width: var(--sw-knob);
 		height: var(--sw-knob);
 		border-radius: var(--r-pill);
@@ -122,6 +128,135 @@
 		scale: calc(1 + (var(--press-scale) - var(--press-scale-sm)) * 2.4) 1;
 		transition-duration: var(--dur-press);
 	}
+	/* Effects follow the closest data-fx-switch ancestor; squash is the default. */
+	.switch:not(:global([data-fx-switch]:not([data-fx-switch='squash'])) *),
+	:global([data-fx-switch='squash']) .switch:not(:global([data-fx-switch='squash'] [data-fx-switch]:not([data-fx-switch='squash'])) *) {
+		&.armed.on .knob {
+			animation: sw-squash-on var(--dur-spring) var(--ease-out);
+		}
+		&.armed:not(.on) .knob {
+			animation: sw-squash-off var(--dur-spring) var(--ease-out);
+		}
+	}
+	/* On and off use separate names so the animation restarts on every toggle. */
+	@keyframes sw-squash-on {
+		35% {
+			scale: 1.4 0.8;
+		}
+		70% {
+			scale: 0.86 1.1;
+		}
+	}
+	@keyframes sw-squash-off {
+		35% {
+			scale: 1.4 0.8;
+		}
+		70% {
+			scale: 0.86 1.1;
+		}
+	}
+
+	/* A streak trails the knob in flight; a soft accent halo glows while on. */
+	:global([data-fx-switch='glow']) .switch:not(:global([data-fx-switch='glow'] [data-fx-switch]:not([data-fx-switch='glow'])) *) {
+		&::after {
+			content: '';
+			position: absolute;
+			inset: -40% -18%;
+			z-index: -1;
+			pointer-events: none;
+			background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
+			opacity: 0;
+			transition: opacity var(--dur-slow) var(--ease);
+		}
+		&.on::after {
+			opacity: 1;
+		}
+		& .knob::before {
+			content: '';
+			position: absolute;
+			top: 18%;
+			bottom: 18%;
+			width: 170%;
+			z-index: -1;
+			pointer-events: none;
+			border-radius: var(--r-pill);
+			opacity: 0;
+		}
+		&.on .knob::before {
+			right: 40%;
+			transform-origin: right center;
+			background: linear-gradient(to left, color-mix(in srgb, var(--text-on-accent) 75%, transparent), transparent);
+		}
+		&:not(.on) .knob::before {
+			left: 40%;
+			transform-origin: left center;
+			background: linear-gradient(to right, color-mix(in srgb, var(--accent) 80%, transparent), transparent);
+		}
+		&.armed.on .knob::before {
+			animation: sw-trail-on var(--dur-spring) var(--ease-out);
+		}
+		&.armed:not(.on) .knob::before {
+			animation: sw-trail-off var(--dur-spring) var(--ease-out);
+		}
+	}
+	@keyframes sw-trail-on {
+		0%,
+		100% {
+			opacity: 0;
+			scale: 0.2 1;
+		}
+		30% {
+			opacity: 1;
+			scale: 1;
+		}
+	}
+	@keyframes sw-trail-off {
+		0%,
+		100% {
+			opacity: 0;
+			scale: 0.2 1;
+		}
+		30% {
+			opacity: 1;
+			scale: 1;
+		}
+	}
+
+	/* Calm: an unhurried glide with no overshoot; a small accent pip settles into the knob once on. */
+	:global([data-fx-switch='calm']) .switch:not(:global([data-fx-switch='calm'] [data-fx-switch]:not([data-fx-switch='calm'])) *) {
+		transition:
+			background var(--dur-slow) var(--ease),
+			border-color var(--dur-slow) var(--ease);
+		& .knob {
+			transform-origin: center;
+			transition:
+				translate var(--dur-slow) var(--ease-in-out),
+				scale var(--dur-fast) var(--ease-out),
+				background var(--dur-slow) var(--ease);
+		}
+		&:active:not(:disabled) .knob {
+			scale: var(--press-scale-sm);
+		}
+		& .knob::after {
+			content: '';
+			position: absolute;
+			inset: 32%;
+			border-radius: var(--r-pill);
+			background: var(--accent);
+			opacity: 0;
+			scale: 0.4;
+			transition:
+				opacity var(--dur-exit-fast) var(--ease-out),
+				scale var(--dur-exit-fast) var(--ease-out);
+		}
+		&.on .knob::after {
+			opacity: 1;
+			scale: 1;
+			transition:
+				opacity var(--dur-base) var(--ease) var(--dur-fast),
+				scale var(--dur-base) var(--ease-out) var(--dur-fast);
+		}
+	}
 	.switch:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);

package/dist/components/atoms/Textarea.svelte

@@ -211,6 +211,7 @@
 			bind:value
 			use:autoresizeAction={typeof value === 'string' ? value : ''}
 			{...rest}
+			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
@@ -230,6 +231,7 @@
 			style:max-height={maxHeight}
 			bind:value
 			{...rest}
+			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
@@ -302,6 +304,10 @@
 		outline-offset: var(--focus-ring-offset);
 		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
+	.textarea::placeholder {
+		color: var(--text-faint);
+		opacity: 1;
+	}
 	.textarea:disabled {
 		cursor: not-allowed;
 	}
@@ -335,6 +341,36 @@
 	.textarea[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	.textarea {
+		--focus-tint: var(--accent);
+	}
+	.textarea[aria-invalid='true'] {
+		--focus-tint: var(--danger);
+	}
+	/* Focus bloom: a solid ring whose soft halo swells, then settles to a quieter glow. */
+	.textarea:not(.grouped):focus:not(:global([data-fx-focus='none']) *),
+	:global(:is([data-fx-focus='bloom'], [data-fx-focus='label'])) .textarea: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 and the overlaid
 	   adornments report their widths; the text stays clear of them. */
 	.textarea.grouped {

package/dist/components/atoms/Thinking.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	// Chat "assistant is working" indicator. `dots`: three dots rise one after
+	// the other, drawn in currentColor. `sheen`: a light sweeps through the
+	// status word (children, or `label`), with a blinking caret after it.
+	let {
+		variant = 'dots',
+		label = 'Thinking',
+		caret = true,
+		children,
+		class: klass = '',
+		style: styleProp = '',
+		...rest
+	}: {
+		variant?: 'dots' | 'sheen';
+		/** Announced to AT; also the visible word of `sheen` when there are no children. */
+		label?: string;
+		/** Blinking caret after the sheen text. */
+		caret?: boolean;
+		children?: Snippet;
+		class?: string;
+		style?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<span
+	data-tsu="Thinking"
+	class="thinking v-{variant} {klass}"
+	style={styleProp}
+	role="status"
+	aria-label={variant === 'dots' ? label : undefined}
+	{...rest}
+>
+	{#if variant === 'dots'}
+		<span class="dots" aria-hidden="true"><span></span><span></span><span></span></span>
+	{:else}
+		<span class="text">{#if children}{@render children()}{:else}{label}{/if}</span>
+		{#if caret}<span class="caret" aria-hidden="true"></span>{/if}
+	{/if}
+</span>
+
+<style>
+	.thinking {
+		display: inline-flex;
+		align-items: center;
+		line-height: 1;
+		vertical-align: middle;
+	}
+	.dots {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3em;
+		padding: 0.25em 0;
+	}
+	.dots span {
+		display: block;
+		width: 0.4em;
+		height: 0.4em;
+		border-radius: 50%;
+		background: currentColor;
+		animation: tsu-thinking-dot 1.2s var(--ease-in-out) infinite;
+	}
+	.dots span:nth-child(1) {
+		opacity: 1;
+	}
+	.dots span:nth-child(2) {
+		opacity: 0.6;
+		animation-delay: 0.15s;
+	}
+	.dots span:nth-child(3) {
+		opacity: 0.3;
+		animation-delay: 0.3s;
+	}
+	@keyframes tsu-thinking-dot {
+		0%,
+		55%,
+		100% {
+			opacity: 0.35;
+			transform: translateY(0);
+		}
+		25% {
+			opacity: 1;
+			transform: translateY(-0.3em);
+		}
+	}
+
+	.v-sheen {
+		line-height: inherit;
+	}
+	.text {
+		background: linear-gradient(90deg, var(--text-muted) 0 38%, var(--text) 50%, var(--text-muted) 62% 100%);
+		background-size: 300% 100%;
+		background-position: 100% 0;
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+		animation: tsu-thinking-sheen 1.8s linear infinite;
+	}
+	@keyframes tsu-thinking-sheen {
+		to {
+			background-position: 0% 0;
+		}
+	}
+	.caret {
+		display: inline-block;
+		width: 2px;
+		height: 1em;
+		margin-left: 0.2em;
+		border-radius: 1px;
+		background: var(--accent);
+		animation: tsu-thinking-blink 1s steps(2, jump-none) infinite;
+	}
+	@keyframes tsu-thinking-blink {
+		to {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.dots span,
+		.text,
+		.caret {
+			animation: none;
+		}
+		.text {
+			background-position: 50% 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    variant?: 'dots' | 'sheen';
+    /** Announced to AT; also the visible word of `sheen` when there are no children. */
+    label?: string;
+    /** Blinking caret after the sheen text. */
+    caret?: boolean;
+    children?: Snippet;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+};
+declare const Thinking: import("svelte").Component<$$ComponentProps, {}, "">;
+type Thinking = ReturnType<typeof Thinking>;
+export default Thinking;