@dorsk/tsumikit 0.73.1 → 0.74.0

package/README.md

@@ -286,7 +286,8 @@ its icon leading and shows its check trailing, or uses the leading check slot wh
 no icon; selecting closes the menu unless `closeOnSelect={false}` or the item sets `keepOpen`;
 rest props land on the trigger, `count`/`countMax` paint its corner badge and `panelStyle`
 sizes the panel; an item with a `control` snippet renders as a non-button row hosting a native
-`<select>` or nested Popover trigger, keeping the icon column, row height and ↑/↓ navigation),
+`<select>` or nested Popover trigger, keeping the icon column, row height and ↑/↓ navigation;
+labels may repeat, and an optional `id` keeps a row's identity when the list reorders),
 Tabs (omit `panel` for a strip-only tablist of document tabs: `closable` + `onclose(id)`
 close through the ✕, Delete and middle-click, per-tab `leading` snippet, `title`,
 trailing `actions` snippet; `--tab-max-width` truncates long labels),

package/dist/components/atoms/Progress.svelte

@@ -96,7 +96,7 @@
 	aria-valuenow={indeterminate ? undefined : value}
 >
 	<div class="bar" style={indeterminate ? undefined : `width: ${pct}%`}></div>
-	{#each markers as m (m.at)}
+	{#each markers as m, i (`${i}:${m.at}`)}
 		<span
 			class="marker tone-{m.tone ? canonicalTone(m.tone) : 'text'}"
 			style="left: {markerPct(m.at)}%"
@@ -233,22 +233,22 @@
 	}
 	.progress.indeterminate .bar {
 		width: 40%;
-		animation: kt-progress-slide 1.1s ease-in-out infinite;
+		animation: kt-progress-slide 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 	}
 	.progress.striped .bar {
 		animation: kt-stripe 0.6s linear infinite;
 	}
 	.progress.striped.indeterminate .bar {
 		animation:
-			kt-progress-slide 1.1s ease-in-out infinite,
+			kt-progress-slide 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite,
 			kt-stripe 0.6s linear infinite;
 	}
 	@keyframes kt-progress-slide {
 		0% {
-			transform: translateX(-110%);
+			transform: translateX(-100%);
 		}
 		100% {
-			transform: translateX(310%);
+			transform: translateX(250%);
 		}
 	}
 	@keyframes kt-stripe {
@@ -265,5 +265,9 @@
 		.progress.striped.indeterminate .bar {
 			animation: none;
 		}
+		.progress.indeterminate .bar {
+			width: 100%;
+			opacity: 0.35;
+		}
 	}
 </style>

package/dist/components/atoms/Select.svelte

@@ -112,7 +112,7 @@
 
 {#snippet optionList()}
 	{#if options}
-		{#each sections as section, i (section.group ?? `-${i}`)}
+		{#each sections as section, i (`${i}:${section.group ?? ''}`)}
 			{#if section.group === undefined}
 				{#each section.options as o (o.value)}
 					<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>

package/dist/components/atoms/Skeleton.svelte

@@ -2,6 +2,8 @@
 	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.
 	type Own = {
 		width?: string;
 		height?: string;
@@ -46,24 +48,28 @@
 		max-width: 100%;
 	}
 	.skeleton-bar {
+		--sk-base: var(--skeleton, color-mix(in srgb, var(--text) 7%, transparent));
+		--sk-hi: var(--skeleton-highlight, color-mix(in srgb, var(--text) 13%, transparent));
 		display: block;
 		width: 100%;
-		background: linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-elevated) 50%, var(--bg-elevated-2) 75%);
-		background-size: 200% 100%;
-		animation: tsu-shimmer 1.4s ease-in-out infinite;
+		background: linear-gradient(100deg, var(--sk-base) 42%, var(--sk-hi) 50%, var(--sk-base) 58%) var(--sk-base);
+		background-size: 200vw 100%;
+		background-attachment: fixed;
+		animation: tsu-shimmer 1.8s linear infinite;
 	}
 	@keyframes tsu-shimmer {
-		from {
-			background-position: 200% 0;
+		0% {
+			background-position: 100% 0;
 		}
-		to {
-			background-position: -200% 0;
+		75%,
+		100% {
+			background-position: 0% 0;
 		}
 	}
 	@media (prefers-reduced-motion: reduce) {
 		.skeleton-bar {
 			animation: none;
-			background: var(--bg-elevated-2);
+			background: var(--sk-base);
 		}
 	}
 </style>

package/dist/components/atoms/Slider.svelte

@@ -89,7 +89,7 @@
 	/>
 	{#if tickValues.length > 0}
 		<span class="ticks" aria-hidden="true">
-			{#each tickValues as t (t)}
+			{#each tickValues as t, i (`${i}:${t}`)}
 				<i class="tick" class:reached={t <= Number(value)} style="--f: {frac(t)}"></i>
 			{/each}
 		</span>
@@ -100,7 +100,7 @@
 	{/if}
 	{#if marks.length > 0}
 		<span class="marks" aria-hidden="true">
-			{#each marks as m (m.value)}
+			{#each marks as m, i (`${i}:${m.value}`)}
 				<button type="button" class="mark" class:on={Number(value) === m.value} style="--f: {frac(m.value)}" tabindex="-1" onclick={() => (value = m.value)}>{m.label}</button>
 			{/each}
 		</span>

package/dist/components/atoms/Spinner.svelte

@@ -1,15 +1,46 @@
+<script lang="ts" module>
+	export type SpinnerVariant =
+		| 'icon'
+		| 'arc'
+		| 'dots'
+		| 'orbit'
+		| 'pulse'
+		| 'bars'
+		| 'grid'
+		| 'clock'
+		| 'bounce';
+
+	// 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.
+	const PARTS: Record<Exclude<SpinnerVariant, 'icon'>, { count: number; wrap: boolean }> = {
+		arc: { count: 0, wrap: false },
+		dots: { count: 3, wrap: true },
+		orbit: { count: 2, wrap: false },
+		pulse: { count: 1, wrap: false },
+		bars: { count: 4, wrap: true },
+		grid: { count: 9, wrap: true },
+		clock: { count: 0, wrap: false },
+		bounce: { count: 2, wrap: false }
+	};
+</script>
+
 <script lang="ts">
-	// Inline loading spinner — a spinning `loader` glyph. Tracks the surrounding
-	// text size by default (1em), or pass an explicit pixel `size`. The spin
-	// animation is owned by Icon and is halted under prefers-reduced-motion, so
-	// motion-sensitive users see a static glyph instead.
+	// Inline loading indicator. `icon` (default) spins the `loader` glyph; the
+	// 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.
 	import Icon from './Icon.svelte';
 
 	let {
+		variant = 'icon',
 		size,
 		label = 'Loading',
+		class: klass = '',
+		style: styleProp = '',
 		...rest
 	}: {
+		variant?: SpinnerVariant;
 		/** Explicit pixel size. Omit to track the surrounding text (1em). */
 		size?: number;
 		/** AT label announcing the busy state. Set to undefined to make the
@@ -19,6 +50,434 @@
 		style?: string;
 		[key: string]: unknown;
 	} = $props();
+
+	const parts = $derived(variant === 'icon' ? undefined : PARTS[variant]);
 </script>
 
-<Icon name="loader" spin {size} {label} data-tsu="Spinner" {...rest} />
+{#if !parts}
+	<Icon name="loader" spin {size} {label} data-tsu="Spinner" class={klass} style={styleProp} {...rest} />
+{:else}
+	<span
+		data-tsu="Spinner"
+		class="spinner v-{variant} {klass}"
+		style="{size ? `font-size: ${size}px;` : ''}{styleProp}"
+		role={label ? 'img' : undefined}
+		aria-label={label}
+		aria-hidden={label ? undefined : 'true'}
+		{...rest}
+	>
+		{#if parts.wrap}
+			<span class="in">
+				{#each { length: parts.count } as _, i (i)}<span></span>{/each}
+			</span>
+		{:else}
+			{#each { length: parts.count } as _, i (i)}<span></span>{/each}
+		{/if}
+	</span>
+{/if}
+
+<style>
+	@property --tsu-spin-arc {
+		syntax: '<angle>';
+		inherits: false;
+		initial-value: 100deg;
+	}
+
+	.spinner {
+		--sw: max(1.5px, 0.11em);
+		--t: calc(1s * var(--spinner-speed, 1));
+		position: relative;
+		display: inline-block;
+		flex: none;
+		width: 1em;
+		height: 1em;
+		vertical-align: -0.125em;
+		color: inherit;
+	}
+	.spinner span,
+	.spinner::before,
+	.spinner::after {
+		box-sizing: border-box;
+	}
+	.in {
+		position: absolute;
+		inset: 0;
+	}
+
+	.v-arc::before,
+	.v-arc::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		background: currentColor;
+		-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-arc::before {
+		opacity: 0.18;
+	}
+	.v-arc::after {
+		--tsu-spin-arc: 100deg;
+		-webkit-mask:
+			radial-gradient(farthest-side, transparent calc(100% - var(--sw)), #000 calc(100% - var(--sw) + 0.5px)),
+			conic-gradient(#000 var(--tsu-spin-arc), transparent 0);
+		-webkit-mask-composite: source-in;
+		mask:
+			radial-gradient(farthest-side, transparent calc(100% - var(--sw)), #000 calc(100% - var(--sw) + 0.5px))
+				intersect,
+			conic-gradient(#000 var(--tsu-spin-arc), transparent 0);
+		mask-composite: intersect;
+		animation:
+			tsu-spin-arc calc(var(--t) * 1.4) cubic-bezier(0.5, 0, 0.5, 1) infinite,
+			tsu-spin-rot calc(var(--t) * 1.4) linear infinite;
+	}
+	@keyframes tsu-spin-arc {
+		0% {
+			--tsu-spin-arc: 20deg;
+		}
+		50% {
+			--tsu-spin-arc: 280deg;
+		}
+		100% {
+			--tsu-spin-arc: 20deg;
+		}
+	}
+	@keyframes tsu-spin-rot {
+		0% {
+			transform: rotate(0deg);
+		}
+		50% {
+			transform: rotate(160deg);
+		}
+		100% {
+			transform: rotate(720deg);
+		}
+	}
+
+	.v-dots .in {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 0.04em;
+	}
+	.v-dots .in span {
+		width: 0.24em;
+		height: 0.24em;
+		border-radius: 50%;
+		background: currentColor;
+		animation: tsu-spin-dot calc(var(--t) * 1.1) cubic-bezier(0.45, 0, 0.55, 1) infinite;
+	}
+	.v-dots .in span:nth-child(1) {
+		opacity: 1;
+	}
+	.v-dots .in span:nth-child(2) {
+		opacity: 0.6;
+		animation-delay: calc(var(--t) * 0.14);
+	}
+	.v-dots .in span:nth-child(3) {
+		opacity: 0.32;
+		animation-delay: calc(var(--t) * 0.28);
+	}
+	@keyframes tsu-spin-dot {
+		0%,
+		60%,
+		100% {
+			transform: translateY(0);
+			opacity: 0.32;
+		}
+		25% {
+			transform: translateY(-0.22em);
+			opacity: 1;
+		}
+	}
+
+	.v-orbit::before {
+		content: '';
+		position: absolute;
+		inset: 0.08em;
+		border-radius: 50%;
+		border: max(1px, 0.06em) solid currentColor;
+		opacity: 0.22;
+	}
+	.v-orbit > span:nth-child(1) {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: 0.3em;
+		height: 0.3em;
+		margin: -0.15em;
+		border-radius: 50%;
+		background: currentColor;
+		animation: tsu-spin-core calc(var(--t) * 1.2) ease-in-out infinite;
+	}
+	.v-orbit > span:nth-child(2) {
+		position: absolute;
+		inset: 0;
+		transform: rotate(45deg);
+		animation: tsu-spin-orbit calc(var(--t) * 1.2) cubic-bezier(0.6, 0.15, 0.4, 0.85) infinite;
+	}
+	.v-orbit > span:nth-child(2)::before {
+		content: '';
+		position: absolute;
+		left: 50%;
+		top: 0;
+		width: 0.24em;
+		height: 0.24em;
+		margin-left: -0.12em;
+		border-radius: 50%;
+		background: currentColor;
+	}
+	@keyframes tsu-spin-orbit {
+		from {
+			transform: rotate(45deg);
+		}
+		to {
+			transform: rotate(405deg);
+		}
+	}
+	@keyframes tsu-spin-core {
+		0%,
+		100% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(0.7);
+		}
+	}
+
+	.v-pulse > span {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: 0.3em;
+		height: 0.3em;
+		margin: -0.15em;
+		border-radius: 50%;
+		background: currentColor;
+	}
+	.v-pulse::before,
+	.v-pulse::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		border: var(--sw) solid currentColor;
+		transform: scale(0.72);
+		opacity: 0.45;
+		animation: tsu-spin-ripple calc(var(--t) * 1.6) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
+	}
+	.v-pulse::after {
+		animation-delay: calc(var(--t) * -0.8);
+	}
+	@keyframes tsu-spin-ripple {
+		0% {
+			transform: scale(0.3);
+			opacity: 1;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 0;
+		}
+	}
+
+	.v-bars .in {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.06em 0.08em;
+	}
+	.v-bars .in span {
+		width: 0.13em;
+		height: 100%;
+		border-radius: 0.1em;
+		background: currentColor;
+		transform-origin: 50% 50%;
+		animation: tsu-spin-bar var(--t) ease-in-out infinite;
+	}
+	.v-bars .in span:nth-child(1) {
+		transform: scaleY(0.4);
+		animation-delay: calc(var(--t) * -0.9);
+	}
+	.v-bars .in span:nth-child(2) {
+		transform: scaleY(0.85);
+		animation-delay: calc(var(--t) * -0.6);
+	}
+	.v-bars .in span:nth-child(3) {
+		transform: scaleY(0.6);
+		animation-delay: calc(var(--t) * -0.3);
+	}
+	.v-bars .in span:nth-child(4) {
+		transform: scaleY(1);
+		animation-delay: calc(var(--t) * -0.75);
+	}
+	@keyframes tsu-spin-bar {
+		0%,
+		100% {
+			transform: scaleY(0.3);
+		}
+		50% {
+			transform: scaleY(1);
+		}
+	}
+
+	.v-grid .in {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		place-items: center;
+		padding: 0.04em;
+	}
+	.v-grid .in span {
+		width: 0.2em;
+		height: 0.2em;
+		border-radius: 0.05em;
+		background: currentColor;
+		opacity: calc(1 - var(--d) * 0.18);
+		animation: tsu-spin-cell calc(var(--t) * 1.2) ease-in-out infinite;
+		animation-delay: calc(var(--t) * 0.1 * var(--d) - var(--t) * 1.2);
+	}
+	.v-grid .in span:nth-child(1) {
+		--d: 0;
+	}
+	.v-grid .in span:nth-child(2),
+	.v-grid .in span:nth-child(4) {
+		--d: 1;
+	}
+	.v-grid .in span:nth-child(3),
+	.v-grid .in span:nth-child(5),
+	.v-grid .in span:nth-child(7) {
+		--d: 2;
+	}
+	.v-grid .in span:nth-child(6),
+	.v-grid .in span:nth-child(8) {
+		--d: 3;
+	}
+	.v-grid .in span:nth-child(9) {
+		--d: 4;
+	}
+	@keyframes tsu-spin-cell {
+		0%,
+		100% {
+			opacity: 0.2;
+			transform: scale(0.7);
+		}
+		35% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	.v-clock {
+		border-radius: 50%;
+		border: var(--sw) solid currentColor;
+	}
+	.v-clock::before,
+	.v-clock::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		bottom: 50%;
+		width: var(--sw);
+		margin-left: calc(var(--sw) / -2);
+		border-radius: var(--sw);
+		background: currentColor;
+		transform-origin: 50% 100%;
+		translate: 0 calc(var(--sw) / 2);
+	}
+	.v-clock::before {
+		height: 0.32em;
+		transform: rotate(0deg);
+		animation: tsu-spin-hand-m var(--t) linear infinite;
+	}
+	.v-clock::after {
+		height: 0.22em;
+		transform: rotate(90deg);
+		animation: tsu-spin-hand-h calc(var(--t) * 12) linear infinite;
+	}
+	@keyframes tsu-spin-hand-m {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes tsu-spin-hand-h {
+		from {
+			transform: rotate(90deg);
+		}
+		to {
+			transform: rotate(450deg);
+		}
+	}
+
+	.v-bounce > span:nth-child(1) {
+		position: absolute;
+		left: 50%;
+		bottom: 0.16em;
+		width: 0.34em;
+		height: 0.34em;
+		margin-left: -0.17em;
+		border-radius: 50%;
+		background: currentColor;
+		transform-origin: 50% 100%;
+		animation: tsu-spin-ball calc(var(--t) * 0.9) infinite;
+	}
+	.v-bounce > span:nth-child(2) {
+		position: absolute;
+		left: 50%;
+		bottom: 0.06em;
+		width: 0.46em;
+		height: 0.08em;
+		margin-left: -0.23em;
+		border-radius: 50%;
+		background: currentColor;
+		opacity: 0.3;
+		animation: tsu-spin-shadow calc(var(--t) * 0.9) infinite;
+	}
+	@keyframes tsu-spin-ball {
+		0% {
+			transform: translateY(0) scale(1.18, 0.82);
+			animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
+		}
+		12% {
+			transform: translateY(0) scale(1, 1);
+			animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
+		}
+		50% {
+			transform: translateY(-0.5em) scale(0.95, 1.05);
+			animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3);
+		}
+		100% {
+			transform: translateY(0) scale(1.18, 0.82);
+		}
+	}
+	@keyframes tsu-spin-shadow {
+		0%,
+		100% {
+			transform: scaleX(1);
+			opacity: 0.35;
+		}
+		50% {
+			transform: scaleX(0.5);
+			opacity: 0.12;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.spinner.spinner,
+		.spinner.spinner span,
+		.spinner.spinner::before,
+		.spinner.spinner::after {
+			animation: none;
+		}
+	}
+</style>

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

@@ -1,4 +1,6 @@
+export type SpinnerVariant = 'icon' | 'arc' | 'dots' | 'orbit' | 'pulse' | 'bars' | 'grid' | 'clock' | 'bounce';
 type $$ComponentProps = {
+    variant?: SpinnerVariant;
     /** Explicit pixel size. Omit to track the surrounding text (1em). */
     size?: number;
     /** AT label announcing the busy state. Set to undefined to make the

package/dist/components/molecules/EmojiPicker.svelte

@@ -173,7 +173,7 @@
 						onclick={(e) => onGridClick(e, close)}
 						onkeydown={(e) => onGridKeydown(e, close)}
 					>
-						{#each shown as x, i (x.emoji)}
+						{#each shown as x, i (`${i}:${x.emoji}`)}
 							<div
 								role="option"
 								class="cell"

package/dist/components/molecules/FilterInput.svelte

@@ -429,7 +429,7 @@
 	{#if open && menu}
 		<div bind:this={menuEl} id={listboxId} class="fi__menu" role="listbox" aria-label={kindLabel[menu.kind]}>
 			<div class="fi__menu-head">{kindLabel[menu.kind]}</div>
-			{#each menu.items as item, i (item.insert + i)}
+			{#each menu.items as item, i (`${i}:${item.insert}`)}
 				<button
 					type="button"
 					id="{uid}-opt-{i}"

package/dist/components/molecules/Menu.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" module>
 	export interface MenuItem {
 		label: string;
+		/** Stable row identity; labels may repeat. */
+		id?: string;
 		/** Required for button rows; a `control` row's hosted control acts on its own. */
 		onselect?: () => void;
 		icon?: import('../atoms/Icon.svelte').IconName;
@@ -202,7 +204,7 @@
 >
 	{#snippet children({ close }: { close: () => void })}
 	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
-		{#each items as item (item.label)}
+		{#each items as item, i (item.id ?? `${i}:${item.label}`)}
 			{#if item.control}
 			<div {...item.attrs as HTMLAttributes<HTMLDivElement>} role="none" class="menu-item menu-row" class:danger={item.danger} inert={item.disabled}>
 				{#if item.icon}<Icon name={item.icon} />{/if}

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

@@ -1,5 +1,7 @@
 export interface MenuItem {
     label: string;
+    /** Stable row identity; labels may repeat. */
+    id?: string;
     /** Required for button rows; a `control` row's hosted control acts on its own. */
     onselect?: () => void;
     icon?: import('../atoms/Icon.svelte').IconName;

package/dist/components/molecules/RadialMenu.svelte

@@ -390,7 +390,7 @@
 	{/if}
 	<div id={menuId} role="menu" aria-label={label} class="radial-menu">
 		{#if open}
-			{#each petals as item, i (item.label)}
+			{#each petals as item, i (item.id ?? `${i}:${item.label}`)}
 				{@const p = points[i]}
 				{#if p}
 					{@const glyphs = menuItemGlyphs(item)}

package/dist/components/molecules/SelectButton.svelte

@@ -92,7 +92,7 @@
 		onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
 	>
 		{#if groups}
-			{#each groups as g (g.label)}
+			{#each groups as g, i (`${i}:${g.label}`)}
 				<optgroup label={g.label}>
 					{#each g.options as o (o.value)}
 						<option value={o.value}>{o.label}</option>

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export type { SelectOption } from './components/atoms/Select.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
+export type { SpinnerVariant } from './components/atoms/Spinner.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
@@ -114,7 +115,9 @@ export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, singleQuery, suggest, suggestSingle, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { type OptionSection, sectionOptions } from './select-options';
 export type { ControlSize } from './size';
+export { playSound, type SoundMuted, type SoundName } from './sound';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
+export { sound } from './stores/sound.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
 export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
 export { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, pickerValue, preferenceFrom, resolveTheme, type SlotOf, type ThemeChoice, type ThemePreference, type ThemeSlot, } from './theme-mode';

package/dist/index.js

@@ -2,7 +2,7 @@
 //
 // Styles are NOT auto-imported (so consumers control bundling). Import once at
 // your app root:
-//   import '@dorsk/tsumikit/styles/app.css';
+//   import './styles/app.css';
 // then use the components below.
 export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
@@ -123,8 +123,10 @@ export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time
 export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, singleQuery, suggest, suggestSingle, toSql, walk, } from './query';
 export { sectionOptions } from './select-options';
+export { playSound } from './sound';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
+export { sound } from './stores/sound.svelte';
 export { THEMES, theme } from './stores/theme.svelte';
 export { toasts, } from './stores/toast.svelte';
 export { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, pickerValue, preferenceFrom, resolveTheme, } from './theme-mode';

package/dist/sound-synth.d.ts

@@ -0,0 +1,3 @@
+import type { SoundName } from './stores/sound.svelte';
+export declare function unlock(): void;
+export declare function play(name: SoundName, volume: number): void;

package/dist/sound-synth.js

@@ -0,0 +1,86 @@
+const PALETTE = {
+    click: [
+        ['n', 3200, 0, 0, 0.012, 0.25],
+        ['sine', 620, 380, 0, 0.04, 0.18],
+    ],
+    'toggle-on': [
+        ['n', 3000, 0, 0, 0.008, 0.3],
+        ['triangle', 660, 880, 0.045, 0.05, 0.3],
+    ],
+    'toggle-off': [
+        ['n', 3000, 0, 0, 0.008, 0.3],
+        ['triangle', 880, 620, 0.045, 0.05, 0.3],
+    ],
+    open: [['sine', 420, 760, 0, 0.09, 0.25]],
+    close: [['sine', 700, 380, 0, 0.08, 0.25]],
+    success: [
+        ['sine', 784, 784, 0, 0.07, 0.25],
+        ['sine', 1175, 1175, 0.06, 0.1, 0.22],
+    ],
+    error: [
+        ['triangle', 330, 300, 0, 0.07, 0.28],
+        ['triangle', 262, 240, 0.075, 0.1, 0.28],
+    ],
+    tick: [['n', 5200, 0, 0, 0.006, 0.25]],
+};
+let ctx;
+let out;
+let noise;
+function context() {
+    ctx ??= new AudioContext();
+    if (ctx.state === 'suspended')
+        ctx.resume().catch(() => { });
+    return ctx;
+}
+// Call synchronously inside a user gesture so Safari lets the context start.
+export function unlock() {
+    context();
+}
+export function play(name, volume) {
+    const voices = PALETTE[name];
+    if (!voices)
+        return;
+    const c = context();
+    if (!out) {
+        out = c.createGain();
+        out.connect(c.destination);
+    }
+    out.gain.value = volume;
+    const t = c.currentTime + 0.005;
+    for (const [wave, f0, f1, at, d, g] of voices) {
+        const env = c.createGain();
+        const s = t + at;
+        env.gain.setValueAtTime(0.0001, s);
+        env.gain.exponentialRampToValueAtTime(g, s + 0.003);
+        env.gain.exponentialRampToValueAtTime(0.0001, s + d);
+        env.connect(out);
+        let src;
+        if (wave === 'n') {
+            if (!noise) {
+                noise = c.createBuffer(1, c.sampleRate * 0.05, c.sampleRate);
+                const data = noise.getChannelData(0);
+                for (let i = 0; i < data.length; i++)
+                    data[i] = Math.random() * 2 - 1;
+            }
+            const buf = c.createBufferSource();
+            buf.buffer = noise;
+            const bp = c.createBiquadFilter();
+            bp.type = 'bandpass';
+            bp.frequency.value = f0;
+            bp.Q.value = 1.2;
+            buf.connect(bp).connect(env);
+            src = buf;
+        }
+        else {
+            const osc = c.createOscillator();
+            osc.type = wave;
+            osc.frequency.setValueAtTime(f0, s);
+            osc.frequency.exponentialRampToValueAtTime(f1, s + d);
+            osc.connect(env);
+            src = osc;
+        }
+        src.start(s);
+        src.stop(s + d + 0.02);
+        src.onended = () => env.disconnect();
+    }
+}

package/dist/sound.d.ts

@@ -0,0 +1 @@
+export { playSound, type SoundMuted, type SoundName } from './stores/sound.svelte';

package/dist/sound.js

@@ -0,0 +1,3 @@
+// What components import to play a sound. No audio code lives here: the synth
+// is a separate chunk that `playSound` imports on demand once sounds are on.
+export { playSound } from './stores/sound.svelte';

package/dist/stores/sound.svelte.d.ts

@@ -0,0 +1,20 @@
+export type SoundName = 'click' | 'toggle-on' | 'toggle-off' | 'open' | 'close' | 'success' | 'error' | 'tick';
+export type SoundMuted = 'off' | 'reduced-motion' | null;
+/**
+ * Play a UI sound if the user enabled sounds. `allow` is the per-component
+ * opt-out (`sound={false}`). Safe to call during SSR: it is a no-op there.
+ */
+export declare function playSound(name: SoundName, allow?: boolean | undefined): void;
+declare class Sound {
+    enabled: boolean;
+    volume: number;
+    constructor();
+    /** Why nothing would play right now, for a settings hint. */
+    get muted(): SoundMuted;
+    setEnabled(on: boolean): void;
+    setVolume(v: number): void;
+    play(name: SoundName): void;
+    private save;
+}
+export declare const sound: Sound;
+export {};

package/dist/stores/sound.svelte.js

@@ -0,0 +1,150 @@
+import { browser } from '../env';
+import { readStorage, writeStorage } from './storage';
+// OPT-IN UI sound effects. Off by default and persisted; while off nothing is
+// imported, no AudioContext exists and no listener is attached. The synth is a
+// separate chunk loaded on first play (or eagerly when enabling, so a gesture
+// listener can unlock audio for Safari).
+//
+// With `prefers-reduced-motion: reduce` only the feedback sounds (success,
+// error) play: they carry information, the decorative ones are muted.
+// Calls inside one frame are coalesced and the highest priority wins
+// (error > success > open/close > toggle > click > tick); the same sound plays
+// at most once per 50 ms (tick: 40 ms). Hidden tabs are silent.
+const KEY = 'tsumikit-sound';
+const DEFAULT_VOLUME = 0.5;
+// Lowest to highest priority; the last two are feedback and survive reduced motion.
+const ORDER = [
+    'tick',
+    'click',
+    'toggle-on',
+    'toggle-off',
+    'open',
+    'close',
+    'success',
+    'error',
+];
+const GAP_MS = 50;
+const TICK_GAP_MS = 40;
+let synth = null;
+let loading = null;
+let armed = false;
+let pending = null;
+const last = new Map();
+function clamp(v, fallback) {
+    return Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : fallback;
+}
+function reducedMotion() {
+    return !!globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+function load() {
+    loading ??= import('../sound-synth').then((m) => (synth = m));
+    return loading;
+}
+function unlock() {
+    if (!synth)
+        return;
+    synth.unlock();
+    listen(false);
+}
+function listen(on) {
+    if (armed === on)
+        return;
+    armed = on;
+    for (const type of ['pointerdown', 'keydown']) {
+        if (on)
+            addEventListener(type, unlock, { capture: true });
+        else
+            removeEventListener(type, unlock, { capture: true });
+    }
+}
+function flush() {
+    const name = pending;
+    pending = null;
+    if (!name || !sound.enabled)
+        return;
+    const now = performance.now();
+    if (now - (last.get(name) ?? -1e9) < (name === 'tick' ? TICK_GAP_MS : GAP_MS))
+        return;
+    last.set(name, now);
+    const volume = sound.volume;
+    if (synth)
+        synth.play(name, volume);
+    else
+        load().then((m) => m.play(name, volume), () => { });
+}
+/**
+ * Play a UI sound if the user enabled sounds. `allow` is the per-component
+ * opt-out (`sound={false}`). Safe to call during SSR: it is a no-op there.
+ */
+export function playSound(name, allow = true) {
+    if (!browser || allow === false || !sound.enabled || sound.volume <= 0)
+        return;
+    if (document.hidden)
+        return;
+    if (navigator.userActivation && !navigator.userActivation.hasBeenActive)
+        return;
+    const rank = ORDER.indexOf(name);
+    if (rank < ORDER.length - 2 && reducedMotion())
+        return;
+    if (pending === null) {
+        requestAnimationFrame(flush);
+        pending = name;
+    }
+    else if (rank > ORDER.indexOf(pending))
+        pending = name;
+}
+class Sound {
+    enabled = $state(false);
+    volume = $state(DEFAULT_VOLUME);
+    constructor() {
+        if (!browser)
+            return;
+        const raw = readStorage(KEY);
+        if (raw) {
+            try {
+                const saved = JSON.parse(raw);
+                if (typeof saved?.enabled === 'boolean')
+                    this.enabled = saved.enabled;
+                if (typeof saved?.volume === 'number')
+                    this.volume = clamp(saved.volume, DEFAULT_VOLUME);
+            }
+            catch { }
+        }
+        if (this.enabled) {
+            load().catch(() => { });
+            listen(true);
+        }
+    }
+    /** Why nothing would play right now, for a settings hint. */
+    get muted() {
+        if (!this.enabled)
+            return 'off';
+        return reducedMotion() ? 'reduced-motion' : null;
+    }
+    setEnabled(on) {
+        this.enabled = on;
+        this.save();
+        if (!browser)
+            return;
+        if (on) {
+            load().catch(() => { });
+            listen(true);
+            unlock();
+        }
+        else
+            listen(false);
+    }
+    setVolume(v) {
+        this.volume = clamp(v, this.volume);
+        this.save();
+    }
+    play(name) {
+        playSound(name);
+    }
+    save() {
+        if (!browser)
+            return;
+        writeStorage(KEY, JSON.stringify({ enabled: this.enabled, volume: this.volume }));
+    }
+}
+export const sound = new Sound();

package/dist/styles/reset.css

@@ -106,14 +106,31 @@ pre {
 	}
 }
 
+/* Reduced motion: fewer and gentler, not zero. Movement tokens go neutral and
+   transitions are limited to colour/opacity, so feedback still fades while
+   nothing moves. */
 @media (prefers-reduced-motion: reduce) {
+	:root {
+		--press-scale: 1;
+		--press-scale-sm: 1;
+		--press-scale-lg: 1;
+		--enter-scale: 1;
+		--tip-scale: 1;
+		--shift-xs: 0px;
+		--shift-sm: 0px;
+		--shift-md: 0px;
+		--ease-spring: var(--ease-out);
+		--ease-spring-bounce: var(--ease-out);
+	}
 	*,
 	*::before,
 	*::after {
+		scroll-behavior: auto !important;
 		animation-duration: 0.01ms !important;
 		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
+		transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, fill, stroke, text-decoration-color, visibility, display, overlay !important;
+		transition-duration: var(--dur-fast) !important;
+		transition-delay: 0ms !important;
 	}
 }
 

package/dist/styles/tokens.css

@@ -123,6 +123,9 @@
 	   ballooning UI. Default 1 = no scaling. */
   --fs-scale: 1;
 
+  /* Type scale. 2xs is the floor (never go below 11px). 13 / 15 / 16 are
+	   "UI small / UI / body": no more steps between them. */
+  --fs-2xs: calc(0.6875rem * var(--fs-scale)); /* 11 */
   --fs-xs: calc(0.75rem * var(--fs-scale)); /* 12 */
   --fs-sm: calc(0.8125rem * var(--fs-scale)); /* 13 */
   --fs-base: calc(0.9375rem * var(--fs-scale)); /* 15 */
@@ -130,18 +133,28 @@
   --fs-lg: calc(1.125rem * var(--fs-scale)); /* 18 */
   --fs-xl: calc(1.375rem * var(--fs-scale)); /* 22 */
   --fs-2xl: calc(1.75rem * var(--fs-scale)); /* 28 */
+  --fs-3xl: calc(2.25rem * var(--fs-scale)); /* 36 */
 
   --fw-normal: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
 
+  /* Leading paired to the scale: none = single-line controls and glyphs,
+	   snug = chips / captions / tooltips (2xs–sm), tight = fields and labels
+	   (sm–md), normal = body prose (md–lg), heading = xl and up. */
+  --lh-none: 1;
+  --lh-heading: 1.2;
   --lh-tight: 1.25;
+  --lh-snug: 1.375;
   --lh-normal: 1.5;
 
   /* ---- Spacing (4px base) ---- */
   --sp-0: 0;
+  --sp-px: 1px;
+  --sp-0-5: 0.125rem;
   --sp-1: 0.25rem;
+  --sp-1-5: 0.375rem;
   --sp-2: 0.5rem;
   --sp-3: 0.75rem;
   --sp-4: 1rem;
@@ -152,6 +165,8 @@
   --sp-12: 3rem;
 
   /* ---- Radii ---- */
+  /* Nested corners stay concentric: inner = outer - (border + padding). */
+  --r-xs: 2px;
   --r-sm: 6px;
   --r-md: 10px;
   --r-lg: 14px;
@@ -170,16 +185,46 @@
   --control-height-default: 2.5rem;
   --control-height-large: 3rem;
   --control-height: 2.75rem;
-  /* Keyboard focus indicator shared by every interactive atom. */
+  /* Per-tier control contract (sm 32 / md 40 / lg 48): height, label size,
+	   side padding, icon size. Text buttons get roomier sides via --btn-px-*. */
+  --control-sm: var(--control-height-compact);
+  --control-md: var(--control-height-default);
+  --control-lg: var(--control-height-large);
+  --control-fs-sm: var(--fs-xs);
+  --control-fs-md: var(--fs-sm);
+  --control-fs-lg: var(--fs-base);
+  --control-px-sm: var(--sp-2);
+  --control-px-md: var(--sp-3);
+  --control-px-lg: var(--sp-4);
+  --control-icon-sm: var(--icon-sm);
+  --control-icon-md: var(--icon-md);
+  --control-icon-lg: var(--icon-lg);
+  --btn-px-sm: var(--sp-3);
+  --btn-px-md: var(--sp-4);
+  --btn-px-lg: var(--sp-5);
+  /* Chip-class heights (Badge, Switch track, Checkbox box) on the 4px grid. */
+  --chip-xs: 1rem;
+  --chip-sm: 1.25rem;
+  --chip-md: 1.5rem;
+  /* Icon glyph sizes follow the text scale, not the chrome. */
+  --icon-xs: calc(0.75rem * var(--fs-scale));
+  --icon-sm: calc(0.875rem * var(--fs-scale));
+  --icon-md: calc(1rem * var(--fs-scale));
+  --icon-lg: calc(1.25rem * var(--fs-scale));
+  --icon-xl: calc(1.5rem * var(--fs-scale));
+  --disabled-opacity: 0.45;
+  /* Keyboard focus indicator shared by every interactive atom. `-inset` is for
+	   rows and clipped containers that cannot draw outside their box. */
+  --focus-ring-width: 2px;
   --focus-ring: 2px solid var(--accent);
-  --focus-ring-offset: 1px;
+  --focus-ring-offset: 2px;
+  --focus-ring-offset-inset: calc(-1 * var(--focus-ring-width));
   /* Square box scale for icon-only controls (IconButton, Button `box`/`square`,
-	   SelectButton, Popover trigger, CopyButton, FileButton). md is the classic
-	   2.25rem icon button; sm/lg reuse the control heights so a boxed control
-	   lines up with text controls in the same row. */
+	   SelectButton, Popover trigger, CopyButton, FileButton). sm/md/lg match the
+	   control heights so a boxed control lines up with text controls in a row. */
   --box-xs: 1.5rem;
   --box-sm: var(--control-height-compact);
-  --box-md: 2.25rem;
+  --box-md: 2.5rem;
   --box-lg: var(--control-height-default);
   /* Minimum hit area on coarse pointers (WCAG 2.5.8); px so it never shrinks
 	   under a small root font-size. */
@@ -212,5 +257,43 @@
   --safe-left: env(safe-area-inset-left, 0px);
   --safe-right: env(safe-area-inset-right, 0px);
 
+  /* ---- Motion ---- */
   --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-spring: var(--ease-out);
+  --ease-spring-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
+
+  --dur-instant: 0ms;
+  --dur-press: 100ms;
+  --dur-fast: 120ms;
+  --dur-base: 180ms;
+  --dur-slow: 240ms;
+  --dur-sheet: 280ms;
+  --dur-exit-fast: 80ms;
+  --dur-exit: 140ms;
+  --dur-exit-slow: 200ms;
+  --dur-spring: 250ms;
+  --dur-spring-bounce: 330ms;
+
+  --press-scale: 0.97;
+  --press-scale-sm: 0.92;
+  --press-scale-lg: 0.985;
+  --enter-scale: 0.96;
+  --tip-scale: 0.97;
+  --shift-xs: 2px;
+  --shift-sm: 4px;
+  --shift-md: 8px;
+}
+
+@supports (animation-timing-function: linear(0, 1)) {
+  :root {
+    /* stiffness 1200, damping 56, mass 1: zeta 0.81, 1.1% overshoot, settles 250ms */
+    /* prettier-ignore */
+    --ease-spring: linear(0, 0.007 1.2%, 0.023 2.4%, 0.055 4%, 0.098 5.6%, 0.188 8.4%, 0.53 18%, 0.629 21.2%, 0.704 24%, 0.778 27.2%, 0.839 30.4%, 0.887 33.6%, 0.928 37.2%, 0.959 40.8%, 0.982 44.8%, 0.998 49.2%, 1.007 54.4%, 1.011 64.4%, 1);
+    /* stiffness 1000, damping 40, mass 1: zeta 0.63, 7.4% overshoot, settles 330ms */
+    /* prettier-ignore */
+    --ease-spring-bounce: linear(0, 0.01 1.2%, 0.033 2.4%, 0.067 3.6%, 0.122 5.2%, 0.244 7.9%, 0.502 13%, 0.618 15.5%, 0.735 18.2%, 0.824 20.6%, 0.898 23%, 0.957 25.5%, 1.007 28.2%, 1.041 30.9%, 1.067 34.8%, 1.073 39.4%, 1.064 44.2%, 1.016 58.2%, 1 66.4%, 0.995 77.3%, 1);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.73.1",
+  "version": "0.74.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",