@dorsk/tsumikit 0.79.0 → 0.80.0

package/dist/components/molecules/CopyButton.svelte

@@ -39,6 +39,7 @@
 
 	const labelShown = $derived(showLabel ?? box === undefined);
 	let copied = $state(false);
+	let run = $state(0);
 	let status = $state('');
 	let timer: ReturnType<typeof setTimeout> | undefined;
 
@@ -46,6 +47,7 @@
 		const ok = await copyToClipboard(text);
 		playSound(ok ? 'success' : 'error', sound);
 		copied = ok;
+		if (ok) run++;
 		status = ok ? copiedLabel : 'Copy failed';
 		clearTimeout(timer);
 		timer = setTimeout(() => {
@@ -63,26 +65,33 @@
 	class="copy-btn {labelShown && box !== undefined ? 'copy-labelled' : ''} {klass}"
 	sound={false}
 	onclick={copy}
+	data-copied={copied || undefined}
 	aria-label={copied ? copiedLabel : label}
 	title={label}
 >
-	<span class="glyphs" class:copied aria-hidden="true">
+	<span class="glyphs" class:copied class:tinted={variant === 'ghost' || variant === 'default'} aria-hidden="true">
 		<span class="glyph copy"><Icon name="copy" /></span>
 		<span class="glyph check"><Icon name="check" /></span>
+		<svg class="glyph tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+			<path d="M4.5 12.5l5 5L19.5 7" pathLength="1" />
+		</svg>
+		{#key run}<span class="sparks"></span>{/key}
 	</span>
-	{#if labelShown}<span>{copied ? copiedLabel : label}</span>{/if}
+	{#if labelShown}
+		<span class="words" class:copied aria-hidden="true"><span class="word idle">{label}</span><span class="word done">{copiedLabel}</span></span>
+	{/if}
 </Button>
 <span class="sr-only" role="status" aria-live="polite">{status}</span>
 
 <style>
-	/* Both glyphs share one grid cell so the swap never changes the width. The
-	   check springs in (the kit's one bounce: a rare confirmation); the copy
-	   glyph fades out fast and back in over the base duration on revert. */
+	/* Both glyphs share one grid cell and both words another, so the swap never
+	   changes the width. */
 	:global(.copy-btn.btn-box.copy-labelled) {
 		width: auto;
 		padding-inline: var(--sp-2);
 	}
 	.glyphs {
+		position: relative;
 		display: inline-grid;
 		place-items: center;
 	}
@@ -111,4 +120,136 @@
 			opacity var(--dur-spring-bounce) ease,
 			scale var(--dur-spring-bounce) var(--ease-spring-bounce);
 	}
+	.tick,
+	.sparks {
+		display: none;
+	}
+	.words {
+		display: inline-grid;
+		overflow: hidden;
+		text-align: start;
+	}
+	.word {
+		grid-area: 1 / 1;
+	}
+	.done,
+	.copied .idle {
+		opacity: 0;
+	}
+	.copied .done {
+		opacity: 1;
+	}
+
+	/* Morph burst: the check springs in on a turn inside a ring of eight sparks. */
+	.glyphs:not(:global([data-fx-copy]:not([data-fx-copy='burst'])) *),
+	:global([data-fx-copy='burst']) .glyphs:not(:global([data-fx-copy='burst'] [data-fx-copy]:not([data-fx-copy='burst'])) *) {
+		& .check {
+			scale: 0.4;
+			rotate: 60deg;
+			transition-property: opacity, scale, rotate;
+			transition-duration: var(--dur-exit-fast);
+			transition-timing-function: ease;
+		}
+		&.copied .check {
+			scale: 1;
+			rotate: 0deg;
+			transition-duration: var(--dur-fast), var(--dur-spring), var(--dur-spring);
+			transition-delay: calc(var(--dur-exit-fast) / 2);
+			transition-timing-function: ease, var(--ease-spring-bounce), var(--ease-out);
+		}
+		& .sparks {
+			--spark-a: color-mix(in srgb, var(--ok) 85%, transparent);
+			--spark-b: color-mix(in srgb, var(--accent) 85%, transparent);
+			position: absolute;
+			inset: -9px;
+			display: block;
+			pointer-events: none;
+			background:
+				radial-gradient(circle at 50% 4%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 83% 17%, var(--spark-b) 1.3px, transparent 1.9px),
+				radial-gradient(circle at 96% 50%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 83% 83%, var(--spark-b) 1.3px, transparent 1.9px),
+				radial-gradient(circle at 50% 96%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 17% 83%, var(--spark-b) 1.3px, transparent 1.9px),
+				radial-gradient(circle at 4% 50%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 17% 17%, var(--spark-b) 1.3px, transparent 1.9px);
+			opacity: 0;
+		}
+		&.copied .sparks {
+			animation: copy-burst calc(var(--dur-slow) + var(--dur-exit-fast)) var(--ease-out);
+		}
+	}
+	@keyframes copy-burst {
+		0% {
+			opacity: 0;
+			scale: 0.35;
+			rotate: -20deg;
+		}
+		30% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			scale: 1.15;
+			rotate: 0deg;
+		}
+	}
+
+	/* Tick and slide: the tick draws itself while the label rolls up into its
+	   copied form. */
+	:global([data-fx-copy='tick']) .glyphs:not(:global([data-fx-copy='tick'] [data-fx-copy]:not([data-fx-copy='tick'])) *) {
+		& .check {
+			display: none;
+		}
+		& .tick {
+			display: block;
+			width: 1em;
+			height: 1em;
+			opacity: 0;
+			transition: opacity var(--dur-exit-fast) ease var(--dur-instant);
+		}
+		&.copied .tick {
+			opacity: 1;
+			transition-duration: var(--dur-fast);
+		}
+		& .tick path {
+			stroke-dasharray: 1;
+			stroke-dashoffset: 1;
+			transition: stroke-dashoffset var(--dur-instant) ease var(--dur-exit-fast);
+		}
+		&.copied .tick path {
+			stroke-dashoffset: 0;
+			transition: stroke-dashoffset var(--dur-slow) var(--ease-out) calc(var(--dur-fast) / 2);
+		}
+		& .copy {
+			transition-property: opacity, scale;
+			transition-duration: var(--dur-base), var(--dur-spring);
+			transition-timing-function: ease, var(--ease-spring);
+		}
+		&.copied .copy {
+			scale: 0.6;
+			transition-duration: var(--dur-exit-fast), var(--dur-exit);
+		}
+	}
+	:global([data-fx-copy='tick']) .words:not(:global([data-fx-copy='tick'] [data-fx-copy]:not([data-fx-copy='tick'])) *) {
+		& .word {
+			transition-property: opacity, translate;
+			transition-duration: var(--dur-base), var(--dur-spring);
+			transition-timing-function: ease, var(--ease-spring);
+		}
+		& .done {
+			translate: 0 100%;
+		}
+		&.copied .idle {
+			translate: 0 -100%;
+			transition-duration: var(--dur-exit-fast), var(--dur-exit);
+		}
+		&.copied .done {
+			translate: 0 0;
+			transition-delay: calc(var(--dur-exit-fast) / 2);
+		}
+	}
+	.tinted.copied :is(.check, .tick) {
+		color: var(--ok);
+	}
 </style>

package/dist/components/molecules/Field.svelte

@@ -59,7 +59,7 @@
 
 <div class="field {klass}" class:field-grow={grow} class:field-no-shrink={!shrink} class:field-inline={layout === 'inline'} data-tsu="Field">
 	{#if label}
-		<label class="label" for={forId} style:width={labelWidth}>{label}</label>
+		<label class="label" for={forId} style:width={labelWidth}><span class="label-text">{label}</span></label>
 	{/if}
 	{@render children?.()}
 	{#if hint}
@@ -103,4 +103,58 @@
 		font-size: var(--fs-xs);
 		color: var(--danger);
 	}
+
+	/* Spring label: over a md text field the label rests inside the control and
+	   springs into its top edge on focus or once filled. */
+	:global([data-fx-focus='label']) .field:not(.field-inline):not(:global([data-fx-focus='label'] [data-fx-focus]:not([data-fx-focus='label'])) *):has(> .label + :global(input.input:not(.input-sm, .input-lg, .grouped)), > .label + :global(.textarea-wrap:not(.grouped) > .textarea:not(.textarea-sm, .textarea-lg))) {
+		--float-h: 3.25rem;
+		position: relative;
+		& > .label {
+			position: absolute;
+			inset-block-start: 0;
+			inset-inline-start: 0;
+			z-index: 1;
+			display: flex;
+			align-items: center;
+			max-width: 100%;
+			height: var(--float-h);
+			padding-inline: calc(var(--control-px-md) + var(--edge-width));
+			font-size: var(--control-fs-md);
+			pointer-events: none;
+		}
+		& .label-text {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			line-height: var(--lh-none);
+			transform-origin: left center;
+			transition-property: translate, scale, color;
+			transition-duration: var(--dur-spring), var(--dur-spring), var(--dur-fast);
+			transition-timing-function: var(--ease-spring-bounce), var(--ease-spring-bounce), ease;
+		}
+		& :global(:is(.input, .textarea)) {
+			min-height: var(--float-h);
+			padding-top: 1.35rem;
+			padding-bottom: 0.4rem;
+		}
+		& :global(:is(.input, .textarea):not(:focus)::placeholder) {
+			color: transparent;
+		}
+		& :global(:is(.input, .textarea):focus) {
+			animation: none;
+			box-shadow:
+				var(--control-shadow),
+				inset 0 -1px 0 var(--focus-tint);
+		}
+		&:has(:global(:is(.input, .textarea):is(:focus, :not(:placeholder-shown), :autofill))) .label-text {
+			translate: 0 -0.7rem;
+			scale: 0.78;
+		}
+		&:has(:global(:is(.input, .textarea):focus)) > .label {
+			color: var(--accent);
+		}
+		&:has(:global([aria-invalid='true'])) > .label {
+			color: var(--danger);
+		}
+	}
 </style>

package/dist/components/molecules/FileButton.svelte

@@ -122,7 +122,8 @@
 		cursor: pointer;
 		user-select: none;
 		--icon-size: var(--control-icon-md);
-		--file-scale-dur: var(--dur-fast);
+		--file-scale-dur: var(--dur-release);
+		--file-scale-ease: var(--ease-spring-bounce);
 		transition:
 			background var(--dur-fast) ease,
 			border-color var(--dur-fast) ease,
@@ -130,10 +131,11 @@
 			color var(--dur-fast) ease,
 			opacity var(--dur-fast) ease,
 			translate var(--dur-fast) var(--ease-out),
-			scale var(--file-scale-dur) var(--ease-out);
+			scale var(--file-scale-dur) var(--file-scale-ease);
 	}
 	.file-btn:active:not(.disabled) {
 		--file-scale-dur: var(--dur-press);
+		--file-scale-ease: var(--ease-out);
 		scale: var(--press-scale);
 	}
 	.file-btn.icon-only:active:not(.disabled),

package/dist/components/molecules/InputGroup.svelte

@@ -234,7 +234,7 @@
 	.ig-bar:has(.ig-field :global([aria-invalid='true']))::before {
 		border-color: var(--danger);
 	}
-	.ig:has(:focus-visible)::after {
+	.ig:has(:global(:focus-visible))::after {
 		content: '';
 		position: absolute;
 		inset: 0;

package/dist/components/molecules/LookPicker.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import SegmentedControl, { type SegmentOption } from './SegmentedControl.svelte';
+	import { theme } from '../../stores/theme.svelte';
+	import { LOOKS, type LookId } from '../../theme-mode';
+
+	let {
+		looks,
+		experimental = true,
+		experimentalLabel = 'beta',
+		label = 'Look',
+		size = 'md',
+		control,
+		block,
+		scroll,
+		sound,
+		onchange,
+		class: klass = '',
+	}: Pick<ComponentProps<typeof SegmentedControl>, 'size' | 'control' | 'block' | 'scroll' | 'sound'> & {
+		/** Restrict and order the offered looks; defaults to every registered look. */
+		looks?: readonly LookId[];
+		/** Offer looks whose status is `experimental`. */
+		experimental?: boolean;
+		/** Badge on experimental looks; empty hides it. */
+		experimentalLabel?: string;
+		label?: string;
+		onchange?: (look: LookId) => void;
+		class?: string;
+	} = $props();
+
+	const options = $derived(
+		(looks ?? LOOKS.map((l) => l.id)).flatMap((id) => {
+			const l = LOOKS.find((x) => x.id === id);
+			const beta = l?.status === 'experimental';
+			if (!l || (beta && !experimental)) return [];
+			return [{ value: l.id, label: l.label }];
+		})
+	);
+	const tagged = new Set<string>(LOOKS.filter((l) => l.status === 'experimental').map((l) => l.id));
+</script>
+
+{#snippet option(o: SegmentOption)}
+	<span class="look">
+		<span class="name">{o.label}</span>
+		{#if experimentalLabel && tagged.has(o.value)}<span class="tag">{experimentalLabel}</span>{/if}
+	</span>
+{/snippet}
+
+<SegmentedControl
+	{options}
+	value={theme.look}
+	onchange={(v) => {
+		theme.setLook(v);
+		onchange?.(theme.look);
+	}}
+	{label}
+	{size}
+	{control}
+	{block}
+	{scroll}
+	{sound}
+	class="look-picker {klass}"
+	{option}
+/>
+
+<style>
+	.look {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		min-width: 0;
+	}
+	:global(.seg-block) .name {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.tag {
+		flex: none;
+		padding: 0 var(--sp-1);
+		border: 1px solid currentColor;
+		border-radius: var(--r-pill);
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-semibold);
+		line-height: var(--lh-tight);
+	}
+</style>

package/dist/components/molecules/LookPicker.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import SegmentedControl from './SegmentedControl.svelte';
+import { type LookId } from '../../theme-mode';
+type $$ComponentProps = Pick<ComponentProps<typeof SegmentedControl>, 'size' | 'control' | 'block' | 'scroll' | 'sound'> & {
+    /** Restrict and order the offered looks; defaults to every registered look. */
+    looks?: readonly LookId[];
+    /** Offer looks whose status is `experimental`. */
+    experimental?: boolean;
+    /** Badge on experimental looks; empty hides it. */
+    experimentalLabel?: string;
+    label?: string;
+    onchange?: (look: LookId) => void;
+    class?: string;
+};
+declare const LookPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type LookPicker = ReturnType<typeof LookPicker>;
+export default LookPicker;

package/dist/components/molecules/MotionSettings.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import Button from '../atoms/Button.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import Select from '../atoms/Select.svelte';
+	import Popover from './Popover.svelte';
+	import { FX, FX_FAMILIES, type FxFamily, type FxSettings } from '../../fx';
+	import { fx } from '../../stores/fx.svelte';
+
+	type TriggerChrome = Pick<
+		ComponentProps<typeof Popover>,
+		'variant' | 'tone' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'
+	>;
+
+	let {
+		families = FX_FAMILIES,
+		size = 'md',
+		box = size,
+		placement = 'bottom-end',
+		variant,
+		tone,
+		pill,
+		control,
+		block,
+		bare,
+		hitArea,
+		disabled,
+		label = 'Motion',
+		resetLabel = 'Reset',
+		reducedMotionHint = 'Your system asks for reduced motion: effects show their static fallback.',
+		onchange,
+		class: klass = '',
+		style: styleProp = '',
+	}: TriggerChrome & {
+		/** Restrict and order the offered families. */
+		families?: readonly FxFamily[];
+		size?: 'sm' | 'md';
+		label?: string;
+		resetLabel?: string;
+		reducedMotionHint?: string;
+		onchange?: (settings: FxSettings) => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const uid = $props.id();
+	let reduced = $state(false);
+
+	$effect(() => {
+		const mq = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)');
+		if (!mq) return;
+		reduced = mq.matches;
+		const on = (e: MediaQueryListEvent) => (reduced = e.matches);
+		mq.addEventListener?.('change', on);
+		return () => mq.removeEventListener?.('change', on);
+	});
+
+	const offCount = $derived(families.filter((f) => fx.settings[f] === 'none').length);
+
+	function pick(family: FxFamily, value: string) {
+		fx.set(family, value);
+		onchange?.(fx.settings);
+	}
+</script>
+
+<Popover
+	{label}
+	{placement}
+	{box}
+	{variant}
+	{tone}
+	{pill}
+	{control}
+	{block}
+	{bare}
+	{hitArea}
+	{disabled}
+	triggerClass={klass}
+	style={styleProp}
+	sound={false}
+>
+	{#snippet trigger()}
+		<span
+			data-tsu="MotionSettings"
+			class="glyph"
+			title={offCount === families.length ? `${label}: off` : label}
+		>
+			<Icon name="zap" size={size === 'sm' ? 16 : 18} />
+		</span>
+	{/snippet}
+	<div class="panel" class:panel-sm={size === 'sm'}>
+		<div class="grid">
+			{#each families as family (family)}
+				<label class="name" for="{uid}-{family}">{FX[family].label}</label>
+				<Select
+					id="{uid}-{family}"
+					size="sm"
+					value={fx.settings[family]}
+					options={FX[family].variants.map((v) => ({ value: v.id, label: v.label }))}
+					onchange={(e) => pick(family, (e.currentTarget as HTMLSelectElement).value)}
+				/>
+			{/each}
+		</div>
+		<div class="row">
+			{#if reduced}
+				<div class="hint" aria-live="polite">{reducedMotionHint}</div>
+			{/if}
+			<Button
+				size="sm"
+				variant="ghost"
+				class="reset"
+				disabled={fx.isDefault}
+				sound={false}
+				onclick={() => {
+					fx.reset();
+					onchange?.(fx.settings);
+				}}>{resetLabel}</Button
+			>
+		</div>
+	</div>
+</Popover>
+
+<style>
+	.glyph {
+		display: inline-flex;
+		line-height: var(--lh-none);
+	}
+	.panel {
+		width: min(19rem, calc(100vw - var(--sp-6)));
+		box-sizing: border-box;
+		display: grid;
+		gap: var(--sp-2);
+		padding: var(--sp-3);
+		font-size: 0.875rem;
+		line-height: var(--lh-snug);
+	}
+	.panel-sm {
+		width: min(17rem, calc(100vw - var(--sp-6)));
+		padding: var(--sp-2) var(--sp-3);
+		font-size: 0.8125rem;
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		align-items: center;
+		gap: var(--sp-1) var(--sp-3);
+	}
+	.name {
+		color: var(--text-muted);
+		white-space: nowrap;
+	}
+	.row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+	}
+	.row > :global(.reset) {
+		margin-inline-start: auto;
+	}
+	.hint {
+		flex: 1 1 0;
+		min-width: 0;
+		font-size: 0.75rem;
+		color: var(--text-muted);
+	}
+</style>

package/dist/components/molecules/MotionSettings.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import Popover from './Popover.svelte';
+import { type FxFamily, type FxSettings } from '../../fx';
+type TriggerChrome = Pick<ComponentProps<typeof Popover>, 'variant' | 'tone' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'>;
+type $$ComponentProps = TriggerChrome & {
+    /** Restrict and order the offered families. */
+    families?: readonly FxFamily[];
+    size?: 'sm' | 'md';
+    label?: string;
+    resetLabel?: string;
+    reducedMotionHint?: string;
+    onchange?: (settings: FxSettings) => void;
+    class?: string;
+    style?: string;
+};
+declare const MotionSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type MotionSettings = ReturnType<typeof MotionSettings>;
+export default MotionSettings;

package/dist/components/molecules/RadioGroup.svelte

@@ -203,6 +203,67 @@
 			opacity var(--dur-spring) var(--ease-spring),
 			scale var(--dur-spring) var(--ease-spring);
 	}
+	/* Effects follow the closest data-fx-radio ancestor; spring is the default. */
+	.radio-group:not(:global([data-fx-radio]:not([data-fx-radio='spring'])) *),
+	:global([data-fx-radio='spring']) .radio-group:not(:global([data-fx-radio='spring'] [data-fx-radio]:not([data-fx-radio='spring'])) *) {
+		& .dot-ctl::after {
+			inset: 22%;
+			width: auto;
+			height: auto;
+			margin: 0;
+			opacity: 1;
+			scale: 0;
+			transition: scale var(--dur-exit-fast) var(--ease-out);
+		}
+		& input:checked + .dot-ctl::after {
+			scale: 1;
+			transition: scale var(--dur-spring) var(--ease-spring-bounce);
+		}
+	}
+
+	/* Accent rises like liquid with a wobbling surface, then the pip drops in. */
+	:global([data-fx-radio='liquid']) .radio-group:not(:global([data-fx-radio='liquid'] [data-fx-radio]:not([data-fx-radio='liquid'])) *) {
+		& .dot-ctl {
+			overflow: hidden;
+		}
+		& .dot-ctl::before {
+			content: '';
+			position: absolute;
+			left: -50%;
+			top: 0;
+			width: 200%;
+			height: 200%;
+			border-radius: 42% 46% 40% 44%;
+			background: var(--accent);
+			translate: 0 50%;
+			pointer-events: none;
+			transition:
+				translate var(--dur-exit) var(--ease-in-out),
+				rotate var(--dur-exit) var(--ease-in-out);
+		}
+		& input:checked + .dot-ctl::before {
+			translate: 0 -30%;
+			rotate: 150deg;
+			transition:
+				translate var(--dur-slow) var(--ease-out),
+				rotate var(--dur-slow) var(--ease-out);
+		}
+		& .dot-ctl::after {
+			inset: 30%;
+			width: auto;
+			height: auto;
+			margin: 0;
+			background: var(--text-on-accent);
+			opacity: 1;
+			scale: 0;
+			transition: scale var(--dur-exit-fast) var(--ease-out);
+		}
+		& input:checked + .dot-ctl::after {
+			scale: 1;
+			transition: scale var(--dur-exit) var(--ease-spring-bounce) var(--dur-fast);
+		}
+	}
+
 	input:focus-visible + .dot-ctl {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);