@dorsk/tsumikit 0.73.2 → 0.75.0

package/dist/components/molecules/Popover.svelte

@@ -13,6 +13,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { formatCount, hasCount } from '../../count';
 	import { place } from '../../floating';
+	import { playSound } from '../../sound';
 	import Toggle from './Toggle.svelte';
 	import { HOVER_CLOSE_GRACE, HOVER_OPEN_DELAY, createHoverIntent, opensOnHover } from './popover-hover.js';
 
@@ -90,6 +91,8 @@
 		/** Class / inline style on the floating panel. */
 		panelClass?: string;
 		panelStyle?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 	};
 
 	let {
@@ -125,6 +128,7 @@
 		style: styleProp = '',
 		panelClass = '',
 		panelStyle = '',
+		sound = true,
 		...rest
 	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
@@ -161,6 +165,10 @@
 	let opened = $state(false);
 
 	let shown = false;
+	// An `open` that is already true on mount is a sync, not a transition: no sound.
+	let quiet = open;
+	// Keyboard opens skip the enter animation (`data-instant`).
+	let instant = false;
 
 	$effect(() => {
 		if (!panelEl) return;
@@ -223,12 +231,21 @@
 	}
 
 	function onTriggerKeydown(e: KeyboardEvent) {
-		if (as !== 'a' || href !== undefined || disabled) return;
-		if (e.key === 'Enter' || e.key === ' ') {
+		if (disabled) return;
+		const key = e.key;
+		if (key === 'ArrowDown' && !open) {
 			e.preventDefault();
 			hover.cancel();
-			toggle();
+			instant = true;
+			show();
+			return;
 		}
+		if (key !== 'Enter' && key !== ' ') return;
+		instant = !open;
+		if (as !== 'a' || href !== undefined) return;
+		e.preventDefault();
+		hover.cancel();
+		toggle();
 	}
 
 	const triggerAttrs = $derived(
@@ -252,6 +269,13 @@
 			const firstOpen = !opened;
 			opened = true;
 			open = true;
+			if (panelEl) {
+				if (instant) panelEl.dataset.instant = '';
+				else delete panelEl.dataset.instant;
+			}
+			instant = false;
+			if (!quiet) playSound('open', sound);
+			quiet = false;
 			// On the first open the content snippet mounts this tick; measure the
 			// panel only once it has, so placement accounts for its real size.
 			if (firstOpen) await tick();
@@ -261,8 +285,10 @@
 			onopen?.();
 		} else {
 			open = false;
+			instant = false;
 			removeEventListener('scroll', reposition, true);
 			removeEventListener('resize', reposition);
+			playSound('close', sound);
 			onclose?.();
 		}
 	}
@@ -371,68 +397,96 @@
 		background: var(--pop-trigger-bg, transparent);
 		color: var(--pop-trigger-fg, var(--text));
 		font-size: var(--pop-trigger-size, inherit);
+		--icon-size: var(--control-icon-md);
+		--pop-scale-dur: var(--dur-fast);
 		transition:
-			background 0.12s var(--ease),
-			border-color 0.12s var(--ease);
+			background-color var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease),
+			scale var(--pop-scale-dur) var(--ease-out);
+	}
+	.pop-trigger:not(.bare, .trigger-toggle):active:not(:disabled, .is-disabled) {
+		--pop-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
+	}
+	.pop-trigger.canonical:active:not(:disabled, .is-disabled) {
+		scale: var(--press-scale);
 	}
-	:where(.pop-trigger:not(.bare):hover:not(:disabled)) {
-		background: var(--bg-elevated-2);
+	@media (hover: hover) and (pointer: fine) {
+		:where(.pop-trigger:not(.bare):hover:not(:disabled)) {
+			background: var(--bg-elevated-2);
+		}
+		.pop-trigger.canonical:hover:not(:disabled) {
+			border-color: var(--accent);
+			background: var(--surface);
+		}
+		.pop-trigger.trigger-primary:hover:not(:disabled) {
+			background: var(--accent);
+			border-color: var(--accent);
+			filter: brightness(1.08);
+		}
+		.pop-trigger.trigger-ghost:hover:not(:disabled) {
+			background: var(--bg-elevated-2);
+			border-color: transparent;
+		}
+		.pop-trigger.trigger-danger:hover:not(:disabled) {
+			background: color-mix(in srgb, var(--danger) 14%, transparent);
+			border-color: var(--danger);
+		}
+		.pop-trigger.trigger-tone-accent:hover:not(:disabled),
+		.pop-trigger.trigger-tone-success:hover:not(:disabled),
+		.pop-trigger.trigger-tone-info:hover:not(:disabled),
+		.pop-trigger.trigger-tone-warn:hover:not(:disabled),
+		.pop-trigger.trigger-tone-danger:hover:not(:disabled) {
+			background: color-mix(in srgb, var(--pop-trigger-tone) 14%, transparent);
+			border-color: var(--pop-trigger-tone);
+		}
+		.pop-trigger.trigger-primary.trigger-tone-success:hover:not(:disabled) {
+			background: var(--ok);
+			border-color: var(--ok);
+			filter: brightness(1.08);
+		}
 	}
 	/* Supplying canonical chrome props opts into the same dimensions, variants
 	   and state tones as Button while keeping this one native trigger element. */
 	.pop-trigger.canonical {
 		min-width: 0;
 		min-height: var(--control-height-default);
-		padding: var(--pop-trigger-pad, var(--sp-2) var(--sp-4));
+		padding: var(--pop-trigger-pad, var(--sp-2) var(--btn-px-md));
 		border-color: var(--pop-trigger-border, var(--border-strong));
 		background: var(--pop-trigger-bg, var(--surface));
 		font-weight: var(--fw-medium);
-		font-size: var(--pop-trigger-size, var(--fs-sm));
-		line-height: 1;
+		font-size: var(--pop-trigger-size, var(--control-fs-md));
+		line-height: var(--lh-none);
 		user-select: none;
 		white-space: nowrap;
 	}
-	.pop-trigger.canonical:hover:not(:disabled) {
-		border-color: var(--accent);
-		background: var(--surface);
-	}
 	.pop-trigger.trigger-primary {
 		background: var(--pop-trigger-bg, var(--accent));
 		border-color: var(--pop-trigger-border, var(--accent));
 		color: var(--pop-trigger-fg, var(--text-on-accent));
 		font-weight: var(--fw-semibold);
 	}
-	.pop-trigger.trigger-primary:hover:not(:disabled) {
-		background: var(--accent);
-		border-color: var(--accent);
-		filter: brightness(1.08);
-	}
 	.pop-trigger.trigger-ghost {
 		background: var(--pop-trigger-bg, transparent);
 		border-color: var(--pop-trigger-border, transparent);
 	}
-	.pop-trigger.trigger-ghost:hover:not(:disabled) {
-		background: var(--bg-elevated-2);
-		border-color: transparent;
-	}
 	.pop-trigger.trigger-danger {
 		color: var(--pop-trigger-fg, var(--danger));
 		border-color: var(--pop-trigger-border, color-mix(in srgb, var(--danger) 50%, var(--border)));
 	}
-	.pop-trigger.trigger-danger:hover:not(:disabled) {
-		background: color-mix(in srgb, var(--danger) 14%, transparent);
-		border-color: var(--danger);
-	}
 	.pop-trigger.trigger-sm {
 		height: var(--control-height-compact);
 		min-height: var(--control-height-compact);
-		padding: var(--pop-trigger-pad, var(--sp-1) var(--sp-3));
-		font-size: var(--pop-trigger-size, var(--fs-xs));
+		padding: var(--pop-trigger-pad, var(--sp-1) var(--btn-px-sm));
+		font-size: var(--pop-trigger-size, var(--control-fs-sm));
+		--icon-size: var(--control-icon-sm);
 	}
 	.pop-trigger.trigger-lg {
 		min-height: var(--control-height-large);
-		padding: var(--pop-trigger-pad, var(--sp-3) var(--sp-5));
-		font-size: var(--pop-trigger-size, var(--fs-base));
+		padding: var(--pop-trigger-pad, var(--sp-3) var(--btn-px-lg));
+		font-size: var(--pop-trigger-size, var(--control-fs-lg));
+		--icon-size: var(--control-icon-lg);
 	}
 	.pop-trigger.trigger-control {
 		height: var(--control-height);
@@ -491,27 +545,14 @@
 		color: var(--pop-trigger-fg, var(--pop-trigger-tone));
 		border-color: var(--pop-trigger-border, color-mix(in srgb, var(--pop-trigger-tone) 50%, var(--border)));
 	}
-	.pop-trigger.trigger-tone-accent:hover:not(:disabled),
-	.pop-trigger.trigger-tone-success:hover:not(:disabled),
-	.pop-trigger.trigger-tone-info:hover:not(:disabled),
-	.pop-trigger.trigger-tone-warn:hover:not(:disabled),
-	.pop-trigger.trigger-tone-danger:hover:not(:disabled) {
-		background: color-mix(in srgb, var(--pop-trigger-tone) 14%, transparent);
-		border-color: var(--pop-trigger-tone);
-	}
 	.pop-trigger.trigger-primary.trigger-tone-success {
 		background: var(--pop-trigger-bg, var(--ok));
 		border-color: var(--pop-trigger-border, var(--ok));
 		color: var(--pop-trigger-fg, var(--text-on-success));
 	}
-	.pop-trigger.trigger-primary.trigger-tone-success:hover:not(:disabled) {
-		background: var(--ok);
-		border-color: var(--ok);
-		filter: brightness(1.08);
-	}
 	.pop-trigger:disabled,
 	.pop-trigger.is-disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.pop-trigger.is-disabled {
@@ -544,7 +585,7 @@
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
 		font-variant-numeric: tabular-nums;
-		line-height: 1;
+		line-height: var(--lh-none);
 		white-space: nowrap;
 		pointer-events: none;
 	}
@@ -584,15 +625,30 @@
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
 		box-shadow: var(--shadow-md);
+		transform-origin: var(--tsu-origin, top left);
+		opacity: 0;
+		scale: var(--enter-scale);
+		transition:
+			opacity var(--dur-exit) var(--ease-out),
+			scale var(--dur-exit) var(--ease-out),
+			translate var(--dur-exit) var(--ease-out),
+			display var(--dur-exit) allow-discrete,
+			overlay var(--dur-exit) allow-discrete;
 	}
-	/* Enter animation (skipped under reduced-motion via the global rule). */
 	.pop-panel:popover-open {
-		animation: pop-in 0.12s var(--ease);
+		opacity: 1;
+		scale: 1;
+		translate: 0;
+		transition-duration: var(--dur-base);
 	}
-	@keyframes pop-in {
-		from {
+	@starting-style {
+		.pop-panel:popover-open {
 			opacity: 0;
-			transform: translateY(-4px);
+			scale: var(--enter-scale);
+			translate: var(--tsu-shift, 0 calc(-1 * var(--shift-sm)));
 		}
 	}
+	.pop-panel[data-instant] {
+		transition-duration: var(--dur-instant);
+	}
 </style>

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

@@ -75,6 +75,8 @@ type Own = {
     /** Class / inline style on the floating panel. */
     panelClass?: string;
     panelStyle?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
 };
 type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;

package/dist/components/molecules/Prose.svelte

@@ -89,7 +89,7 @@
 		overflow-x: auto;
 		font-family: var(--font-mono);
 		font-size: var(--fs-xs);
-		line-height: 1.5;
+		line-height: var(--lh-normal);
 	}
 	.prose :global(pre code) {
 		padding: 0;

package/dist/components/molecules/PullToRefresh.svelte

@@ -7,6 +7,7 @@
 	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import Spinner from '../atoms/Spinner.svelte';
+	import { playSound } from '../../sound';
 
 	let {
 		children,
@@ -16,6 +17,7 @@
 		pullLabel = 'Pull to refresh',
 		releaseLabel = 'Release to refresh',
 		disabled = false,
+		sound = true,
 		class: klass = '',
 		...rest
 	}: {
@@ -29,6 +31,8 @@
 		pullLabel?: string;
 		releaseLabel?: string;
 		disabled?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -68,7 +72,9 @@
 			if (dy < SLOP) return;
 			pulling = true;
 		}
+		const wasReady = ready;
 		offset = dy > 0 ? damp(dy) : 0;
+		if (ready && !wasReady) playSound('tick', sound);
 	}
 
 	function onpointerup(e: PointerEvent) {
@@ -125,6 +131,7 @@
 	class:pulling
 	class:pending
 	style:--ptr-offset="{offset}px"
+	style:--ptr-threshold="{threshold}px"
 	style:--ptr-progress={progress}
 	aria-busy={pending || undefined}
 	{onpointerdown}
@@ -156,7 +163,7 @@
 	}
 	.ptr-content {
 		translate: 0 var(--ptr-offset, 0px);
-		transition: translate 200ms var(--ease);
+		transition: translate var(--dur-exit-slow) var(--ease-out);
 	}
 	.pulling .ptr-content {
 		transition: none;
@@ -167,11 +174,13 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: var(--ptr-offset, 0px);
-		overflow: hidden;
+		height: var(--ptr-threshold, 72px);
+		translate: 0 calc(var(--ptr-offset, 0px) - 100%);
 		color: var(--text-muted);
 		opacity: var(--ptr-progress, 0);
-		transition: height 200ms var(--ease);
+		transition:
+			translate var(--dur-exit-slow) var(--ease-out),
+			opacity var(--dur-exit-slow) var(--ease-out);
 		pointer-events: none;
 	}
 	.pulling .ptr-indicator {
@@ -179,7 +188,7 @@
 	}
 	.ptr-indicator :global(.ptr-arrow) {
 		rotate: calc(180deg * var(--ptr-progress, 0));
-		transition: rotate 150ms var(--ease);
+		transition: rotate var(--dur-base) var(--ease);
 	}
 	.pending .ptr-indicator {
 		color: var(--accent);
@@ -193,11 +202,6 @@
 		white-space: nowrap;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.ptr-content,
-		.ptr-indicator,
-		.ptr-indicator :global(.ptr-arrow) {
-			transition: none;
-		}
 		.ptr-indicator :global(.ptr-arrow) {
 			rotate: none;
 		}

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

@@ -10,6 +10,8 @@ type $$ComponentProps = {
     pullLabel?: string;
     releaseLabel?: string;
     disabled?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/molecules/RadialMenu.svelte

@@ -19,6 +19,7 @@
 	import { menuItemCloses, menuItemGlyphs } from './menu-item';
 	import { type Bounds, fanLayout, type Point } from '../../floating';
 	import { slideSelect } from '../../slide-select';
+	import { playSound } from '../../sound';
 	import { canonicalTone, type Tone } from '../../tone';
 
 	type Own = {
@@ -28,6 +29,8 @@
 		open?: boolean;
 		onopen?: () => void;
 		onclose?: () => void;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		/** Replaces the default FAB content. */
 		trigger?: Snippet<[{ open: boolean }]>;
 		icon?: IconName;
@@ -66,6 +69,7 @@
 		status,
 		class: klass = '',
 		style: styleProp = '',
+		sound = true,
 		...rest
 	}: Omit<HTMLButtonAttributes, keyof Own> & Own = $props();
 
@@ -85,12 +89,16 @@
 	let active = $state(0);
 	let petalPx = 0;
 	let shown = false;
+	// An `open` already true on mount is a sync, not a transition: no sound.
+	let quiet = open;
 	let focusOnOpen = false;
 	let pressedOpen = false;
 	let swallowClick = false;
 	let releasedAt = Number.NEGATIVE_INFINITY;
 
 	const petals = $derived(items.filter((item) => !item.control));
+	// Keep the whole fan inside the default budget: base enter + (n-1) × stagger ≤ 300 ms.
+	const stagger = $derived(`${Math.min(18, petals.length > 1 ? 120 / (petals.length - 1) : 18)}ms`);
 	const ring = $derived(tone === 'neutral' ? 'var(--border-strong)' : `var(--${canonicalTone(tone)})`);
 	const forward = $derived(points.length < 2 || points[points.length - 1].x >= points[0].x);
 
@@ -210,6 +218,8 @@
 		if (!panel || want === shown) return;
 		shown = want;
 		untrack(() => {
+			if (!quiet) playSound(want ? 'open' : 'close', sound);
+			quiet = false;
 			if (want) {
 				show();
 				position();
@@ -332,7 +342,7 @@
 	{#if trigger}
 		{@render trigger({ open })}
 	{:else}
-		<Icon name={open ? closeIcon : icon} size={20} />
+		<span class="radial-face-glyph" aria-hidden="true"><Icon name={open ? closeIcon : icon} /></span>
 		{#if caption}
 			<span class="radial-caption">
 				{#if typeof caption === 'string'}{caption}{:else}{@render caption()}{/if}
@@ -388,7 +398,7 @@
 			</div>
 		{/if}
 	{/if}
-	<div id={menuId} role="menu" aria-label={label} class="radial-menu">
+	<div id={menuId} role="menu" aria-label={label} class="radial-menu" style:--radial-stagger={stagger}>
 		{#if open}
 			{#each petals as item, i (item.id ?? `${i}:${item.label}`)}
 				{@const p = points[i]}
@@ -418,9 +428,9 @@
 						{:else}
 							<span class="radial-glyph" aria-hidden="true">
 								{#if glyphs.leading === 'icon' && item.icon}
-									<Icon name={item.icon} size={16} />
+									<Icon name={item.icon} />
 								{:else if glyphs.leading === 'check'}
-									<Icon name={item.pressed ? 'check' : 'minus'} size={16} />
+									<Icon name={item.pressed ? 'check' : 'minus'} />
 								{/if}
 							</span>
 							<span class="radial-label">{item.label}</span>
@@ -440,7 +450,7 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 1px;
+		gap: var(--sp-px);
 		flex: none;
 		width: var(--radial-fab-size, 3.75rem);
 		height: var(--radial-fab-size, 3.75rem);
@@ -456,18 +466,31 @@
 		touch-action: none;
 		user-select: none;
 		-webkit-touch-callout: none;
+		--radial-scale-dur: var(--dur-fast);
+		transition:
+			background-color var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease),
+			scale var(--radial-scale-dur) var(--ease-out);
+	}
+	.radial-fab:active:not(:disabled) {
+		--radial-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
+	}
+	.radial-face-glyph {
+		display: inline-flex;
+		font-size: var(--icon-lg);
 	}
 	.radial-fab:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
 	}
 	.radial-fab:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.radial-caption {
 		font-size: var(--fs-xs);
-		line-height: 1;
+		line-height: var(--lh-none);
 		color: var(--text-muted);
 		white-space: nowrap;
 	}
@@ -515,22 +538,31 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 2px;
+		gap: var(--sp-0-5);
 		width: max(var(--radial-petal-size, 3.5rem), var(--touch-target));
 		height: max(var(--radial-petal-size, 3.5rem), var(--touch-target));
-		padding: 0 2px;
+		padding: 0 var(--sp-0-5);
 		border: 1px solid var(--border-strong);
 		border-radius: 50%;
 		background: var(--bg-elevated);
 		color: var(--text);
 		box-shadow: var(--shadow-md);
 		font-size: var(--fs-xs);
-		line-height: 1.1;
+		line-height: var(--lh-heading);
 		translate: -50% -50%;
 		pointer-events: auto;
 		cursor: pointer;
-		animation: radial-in 0.16s var(--ease) both;
-		animation-delay: calc(var(--radial-i, 0) * 18ms);
+		--radial-scale-dur: var(--dur-fast);
+		transition:
+			background-color var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease),
+			scale var(--radial-scale-dur) var(--ease-out);
+		animation: radial-in var(--dur-base) var(--ease-out) backwards;
+		animation-delay: calc(var(--radial-i, 0) * var(--radial-stagger, 18ms));
+	}
+	.radial-petal:active:not(:disabled) {
+		--radial-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
 	}
 	@keyframes radial-in {
 		from {
@@ -540,6 +572,7 @@
 	}
 	.radial-glyph {
 		display: inline-flex;
+		font-size: var(--icon-md);
 		color: var(--text-muted);
 	}
 	.radial-label {
@@ -548,11 +581,16 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	.radial-petal:hover:not(:disabled),
 	.radial-petal.armed {
 		background: var(--bg-elevated-2);
 		border-color: var(--accent);
 	}
+	@media (hover: hover) and (pointer: fine) {
+		.radial-petal:hover:not(:disabled) {
+			background: var(--bg-elevated-2);
+			border-color: var(--accent);
+		}
+	}
 	.radial-petal:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
@@ -568,12 +606,7 @@
 		border-color: var(--danger);
 	}
 	.radial-petal:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.radial-petal {
-			animation: none;
-		}
-	}
 </style>

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

@@ -15,6 +15,8 @@ type Own = {
     open?: boolean;
     onopen?: () => void;
     onclose?: () => void;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     /** Replaces the default FAB content. */
     trigger?: Snippet<[{
         open: boolean;