@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/molecules/SeekSlider.svelte

@@ -7,6 +7,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { describeMediaTime, formatMediaTime, isLiveDuration } from '../../media-time';
+	import { playSound } from '../../sound';
 
 	type Own = {
 		/** Position in seconds. Updated only on commit, never while dragging. */
@@ -22,6 +23,8 @@
 		disabled?: boolean;
 		size?: 'sm' | 'md';
 		label?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		formatTime?: (seconds: number, ref?: number) => string;
 		/** Fired on every pointer move while scrubbing with the previewed time. */
 		oninput?: (seconds: number) => void;
@@ -44,6 +47,7 @@
 		disabled = false,
 		size = 'md',
 		label = 'Seek',
+		sound = true,
 		formatTime = formatMediaTime,
 		oninput,
 		onchange,
@@ -77,6 +81,7 @@
 					.filter(([a, b]) => b > a)
 	);
 	const valueText = $derived(describeMediaTime(shown, live ? null : duration, formatTime));
+	const discrete = $derived(duration > 0 && duration / step <= 20);
 
 	function fracAt(el: HTMLElement, clientX: number) {
 		const r = el.getBoundingClientRect();
@@ -125,6 +130,7 @@
 		const el = e.currentTarget as HTMLElement;
 		if (pointerId === e.pointerId) {
 			preview = fracAt(el, e.clientX) * duration;
+			if (discrete) playSound('tick', sound);
 			oninput?.(preview);
 			return;
 		}
@@ -182,6 +188,7 @@
 		}
 		if (next === null) return;
 		e.preventDefault();
+		playSound('tick', sound);
 		commit(next);
 	}
 </script>
@@ -233,8 +240,9 @@
 <style>
 	.seek {
 		--seek-track: 3px;
-		--seek-track-active: 5px;
+		--seek-track-grow: 1.6;
 		--seek-thumb: 12px;
+		--seek-halo: 0 0 0 4px color-mix(in srgb, var(--seek-accent) 20%, transparent);
 		--seek-slab: 1.25rem;
 		--seek-accent: var(--slider-accent, var(--accent));
 		position: relative;
@@ -249,7 +257,6 @@
 	}
 	.seek--md {
 		--seek-track: 4px;
-		--seek-track-active: 6px;
 		--seek-thumb: 14px;
 		--seek-slab: 1.5rem;
 	}
@@ -259,8 +266,8 @@
 		}
 	}
 	.seek--inert {
-		cursor: default;
-		opacity: 0.45;
+		cursor: not-allowed;
+		opacity: var(--disabled-opacity);
 	}
 	.seek-track {
 		position: absolute;
@@ -271,19 +278,12 @@
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
 		overflow: hidden;
-		transition:
-			height 120ms var(--ease),
-			margin-top 120ms var(--ease);
+		transform-origin: center;
+		transition: scale var(--dur-fast) var(--ease);
 	}
-	.seek:hover .seek-track,
 	.seek:focus-visible .seek-track,
 	.seek--dragging .seek-track {
-		height: var(--seek-track-active);
-		margin-top: calc(var(--seek-track-active) / -2);
-	}
-	.seek--inert:hover .seek-track {
-		height: var(--seek-track);
-		margin-top: calc(var(--seek-track) / -2);
+		scale: 1 var(--seek-track-grow);
 	}
 	.seek-buffered,
 	.seek-played {
@@ -319,28 +319,45 @@
 		top: 0;
 		width: var(--seek-thumb);
 		height: var(--seek-thumb);
-		border-radius: 50%;
+		border-radius: var(--r-pill);
 		background: var(--seek-accent);
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
-		transform: translate(-50%, -50%) scale(0.6);
+		transform: translate(-50%, -50%);
+		scale: 0.6;
 		opacity: 0;
 		transition:
-			opacity 120ms var(--ease),
-			transform 120ms var(--ease);
+			opacity var(--dur-fast) var(--ease),
+			scale var(--dur-press) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease);
 	}
-	.seek:hover .seek-thumb,
 	.seek:focus-visible .seek-thumb,
 	.seek--dragging .seek-thumb {
 		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
+		scale: 1;
+	}
+	.seek--dragging .seek-thumb {
+		scale: 1.15;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.seek:not(.seek--inert):hover .seek-track {
+			scale: 1 var(--seek-track-grow);
+		}
+		.seek:not(.seek--inert):hover .seek-thumb {
+			opacity: 1;
+			scale: 1;
+			box-shadow: var(--shadow-sm), var(--seek-halo);
+		}
+		.seek--dragging .seek-thumb {
+			scale: 1.15;
+		}
 	}
 	.seek--inert .seek-thumb {
 		opacity: 0;
 	}
 	.seek:focus-visible .seek-thumb {
 		outline: var(--focus-ring);
-		outline-offset: 2px;
+		outline-offset: var(--focus-ring-offset);
 	}
 	.seek-tip {
 		position: absolute;
@@ -361,10 +378,4 @@
 		font-variant-numeric: tabular-nums;
 		white-space: nowrap;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.seek-track,
-		.seek-thumb {
-			transition: none;
-		}
-	}
 </style>

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

@@ -19,6 +19,8 @@ type Own = {
     disabled?: boolean;
     size?: 'sm' | 'md';
     label?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     formatTime?: (seconds: number, ref?: number) => string;
     /** Fired on every pointer move while scrubbing with the previewed time. */
     oninput?: (seconds: number) => void;

package/dist/components/molecules/SegmentedControl.svelte

@@ -23,9 +23,11 @@
 	// Implemented with `radiogroup`/`radio` semantics + roving tabindex so the
 	// browser-free keyboard model matches Tabs: ←/→ and Home/End move selection,
 	// Space/Enter (or click) activate. `value` is bindable.
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { Attachment } from 'svelte/attachments';
 	import Icon from '../atoms/Icon.svelte';
+	import { playSound } from '../../sound';
 	import { formatSegmentCount } from './segmented-control-count.js';
 	import { nextEnabledSegment } from './segmented-control-keyboard.js';
 
@@ -49,6 +51,7 @@
 		collapseLabels = 'never',
 		scroll = false,
 		block = false,
+		sound = true,
 		class: klass = '',
 		// Custom rendering per option (overrides the built-in label/count/icon).
 		option: optionSnippet
@@ -75,6 +78,8 @@
 		scroll?: boolean;
 		/** Fill the parent width, sharing it equally between segments. */
 		block?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		option?: Snippet<[SegmentOption, boolean]>;
 	} = $props();
@@ -116,8 +121,55 @@
 		};
 	};
 
+	// A thumb slides under the selected segment on translate/scale (never
+	// width/left): the size snaps, the old-to-new width ratio is inverted and
+	// released (FLIP). It snaps on mount and reflow; until placed the selected
+	// segment paints its own fill.
+	let thumb = $state<HTMLSpanElement | null>(null);
+	let placed = $state(false);
+	let rect = { x: 0, y: 0, w: 0, h: 0 };
+	function placeThumb(animate: boolean) {
+		const el = listEl?.querySelector<HTMLElement>('.seg-item.selected');
+		const th = thumb;
+		if (!el || !th) {
+			placed = false;
+			return;
+		}
+		const prev = rect;
+		rect = { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight };
+		th.style.width = `${rect.w}px`;
+		th.style.height = `${rect.h}px`;
+		th.style.transition = 'none';
+		if (!animate || !placed || rect.w === 0) {
+			th.style.translate = `${rect.x}px ${rect.y}px`;
+			th.style.scale = '1 1';
+			th.getBoundingClientRect();
+			th.style.transition = '';
+			placed = true;
+			return;
+		}
+		th.style.translate = `${prev.x}px ${prev.y}px`;
+		th.style.scale = `${prev.w / rect.w} ${prev.h / rect.h}`;
+		th.getBoundingClientRect();
+		th.style.transition = '';
+		th.style.translate = `${rect.x}px ${rect.y}px`;
+		th.style.scale = '1 1';
+	}
+	$effect(() => {
+		value;
+		options;
+		tick().then(() => placeThumb(true));
+	});
+	$effect(() => {
+		if (!listEl || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver(() => placeThumb(false));
+		ro.observe(listEl);
+		return () => ro.disconnect();
+	});
+
 	function select(val: string, focus = false) {
 		if (options.find((o) => o.value === val)?.disabled) return;
+		if (value !== val) playSound('click', sound);
 		value = val;
 		onchange?.(val);
 		if (focus) {
@@ -149,10 +201,12 @@
 	class:seg-scroll={scroll}
 	class:seg-block={block}
 	class:seg-overflow={overflowing}
+	class:placed
 	data-tsu="SegmentedControl"
 	{onkeydown}
 	{@attach watchOverflow}
 >
+	<span bind:this={thumb} class="seg-thumb" aria-hidden="true"></span>
 	{#each options as o (o.value)}
 		{@const selected = value === o.value}
 		<button
@@ -180,11 +234,19 @@
 </div>
 
 <style>
+	/* Every size pins the track height (sm 32 / md 40 / control 44 / box 40);
+	   items fill the inside, which is the height minus border and padding. */
 	.seg {
+		--seg-h: var(--control-md);
+		--seg-inset: calc(var(--sp-0-5) + 1px);
+		--seg-item-h: calc(var(--seg-h) - 2 * var(--seg-inset));
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 		gap: var(--sp-1);
-		padding: 3px;
+		height: var(--seg-h);
+		min-height: var(--seg-h);
+		padding: var(--sp-0-5);
 		background: var(--bg-elevated-2);
 		border: 1px solid var(--border);
 		border-radius: var(--r-pill);
@@ -194,8 +256,19 @@
 	.seg-icon {
 		border-radius: var(--r-md);
 	}
+	.seg-sm {
+		--seg-h: var(--control-sm);
+	}
+	.seg-control {
+		--seg-h: var(--control-height);
+		height: var(--control-height);
+	}
+	.seg-box {
+		--seg-h: var(--control-height-default);
+	}
 	.seg-wrap {
 		flex-wrap: wrap;
+		height: auto;
 	}
 	.justify-start {
 		margin-inline-end: auto;
@@ -246,103 +319,83 @@
 		text-overflow: ellipsis;
 	}
 
+	.seg-thumb {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 0;
+		height: 0;
+		border-radius: var(--r-pill);
+		background: var(--bg);
+		box-shadow: var(--shadow-sm);
+		transform-origin: top left;
+		pointer-events: none;
+		transition:
+			translate var(--dur-spring) var(--ease-spring),
+			scale var(--dur-spring) var(--ease-spring);
+	}
+	.seg:not(.placed) .seg-thumb {
+		display: none;
+	}
 	.seg-item {
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		gap: var(--sp-2);
-		padding: 0.3rem var(--sp-3);
+		height: 100%;
+		padding: 0 var(--control-px-md);
 		border: 0;
 		border-radius: var(--r-pill);
 		background: transparent;
 		color: var(--text-muted);
-		font-size: var(--fs-sm);
+		font-size: var(--control-fs-md);
 		font-weight: var(--fw-medium);
-		line-height: 1.3;
+		line-height: var(--lh-none);
+		--icon-size: var(--control-icon-md);
 		white-space: nowrap;
 		cursor: pointer;
 		transition:
-			background 0.12s var(--ease),
-			color 0.12s var(--ease);
-	}
-	.seg-sm .seg-item {
-		padding: 0.2rem var(--sp-2);
-		font-size: var(--fs-xs);
-	}
-	/* Compact toolbar contract: the outer interactive box exactly matches
-	   Button size="sm" and Popover size="sm". */
-	.seg-sm {
-		height: var(--control-height-compact);
-		min-height: var(--control-height-compact);
+			background var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease);
 	}
 	.seg-sm .seg-item {
-		height: 100%;
-	}
-	/* Shared toolbar/composer height contract — matches Button/Popover `control`. */
-	.seg-control {
-		height: var(--control-height);
-		min-height: var(--control-height);
-	}
-	.seg-control .seg-item {
-		height: 100%;
-	}
-	.seg-box {
-		height: var(--control-height-default);
-		min-height: var(--control-height-default);
-	}
-	.seg-box .seg-item {
-		height: 100%;
-	}
-	/* Wrapped rows size to their content; each item keeps the one-row height. */
-	.seg-wrap.seg-sm,
-	.seg-wrap.seg-control,
-	.seg-wrap.seg-box {
-		height: auto;
-	}
-	.seg-wrap.seg-sm .seg-item {
-		height: auto;
-		min-height: calc(var(--control-height-compact) - 8px);
+		padding: 0 var(--control-px-sm);
+		font-size: var(--control-fs-sm);
+		--icon-size: var(--control-icon-sm);
 	}
-	.seg-wrap.seg-control .seg-item {
+	.seg-wrap .seg-item {
 		height: auto;
-		min-height: calc(var(--control-height) - 8px);
-	}
-	.seg-wrap.seg-box .seg-item {
-		height: auto;
-		min-height: calc(var(--control-height-default) - 8px);
+		min-height: var(--seg-item-h);
 	}
 	/* Capped at half a row: one row stays a pill, extra rows square the corners. */
 	.seg-wrap:not(.seg-icon) {
-		border-radius: calc((0.6rem + 1.3 * var(--fs-sm)) / 2 + 4px);
-	}
-	.seg-wrap.seg-sm:not(.seg-icon) {
-		border-radius: calc(var(--control-height-compact) / 2);
-	}
-	.seg-wrap.seg-control:not(.seg-icon) {
-		border-radius: calc(var(--control-height) / 2);
+		border-radius: calc(var(--seg-h) / 2);
 	}
-	.seg-wrap.seg-box:not(.seg-icon) {
-		border-radius: calc(var(--control-height-default) / 2);
+	/* Icon-only segments are squares; corners stay concentric with the track. */
+	.seg-icon .seg-item,
+	.seg-icon .seg-thumb {
+		border-radius: calc(var(--r-md) - var(--seg-inset));
 	}
 	.seg-icon .seg-item {
 		gap: 0;
-		padding: 0.35rem;
-		border-radius: var(--r-sm);
-		font-size: var(--fs-md);
+		padding: 0;
+		width: var(--seg-item-h);
+		font-size: var(--control-icon-md);
 	}
 	.seg-icon.seg-sm .seg-item {
-		padding: 0.25rem;
-		font-size: var(--fs-sm);
+		font-size: var(--control-icon-sm);
 	}
 	/* A labelled icon segment renders <icon><label>, so it must keep the normal
 	   icon/label gap and the roomier pill padding — only true icon-only segments
-	   collapse to the square gap:0 layout above. */
+	   collapse to the square layout above. */
 	.seg-icon .seg-item.has-label {
 		gap: var(--sp-2);
-		padding: 0.3rem var(--sp-3);
+		width: auto;
+		padding: 0 var(--control-px-md);
 	}
 	.seg-icon.seg-sm .seg-item.has-label {
-		padding: 0.2rem var(--sp-2);
+		padding: 0 var(--control-px-sm);
 	}
 
 	/* collapseLabels='mobile': below the breakpoint, drop the label text and
@@ -354,10 +407,8 @@
 		}
 		.seg-collapse-mobile .seg-item.has-label {
 			gap: 0;
-			padding: 0.35rem;
-		}
-		.seg-collapse-mobile.seg-sm .seg-item.has-label {
-			padding: 0.25rem;
+			padding: 0;
+			width: var(--seg-item-h);
 		}
 	}
 	@container (max-width: 35rem) {
@@ -366,37 +417,42 @@
 		}
 		.collapse-container .seg-item.has-label {
 			gap: 0;
-			padding: 0.35rem;
-		}
-		.collapse-container.seg-sm .seg-item.has-label {
-			padding: 0.25rem;
+			padding: 0;
+			width: var(--seg-item-h);
 		}
 	}
 
-	.seg-item:hover:not(:disabled):not(.selected) {
-		color: var(--text);
-		background: var(--bg-elevated);
+	@media (hover: hover) and (pointer: fine) {
+		.seg-item:hover:not(:disabled):not(.selected) {
+			color: var(--text);
+			background: var(--bg-elevated);
+		}
 	}
 	.seg-item.selected {
 		color: var(--text);
 		background: var(--bg);
 		box-shadow: var(--shadow-sm);
 	}
+	.seg.placed .seg-item.selected {
+		background: transparent;
+		box-shadow: none;
+	}
 	.seg-item:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
+	/* Scrolling tracks clip their overflow, so the ring sits inside the item. */
 	.seg-item:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 
 	.seg-count {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 1.25rem;
-		padding: 0 0.35rem;
+		min-width: var(--sp-5);
+		padding: 0 var(--sp-1-5);
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
 		color: var(--text-faint);
@@ -404,13 +460,10 @@
 		font-weight: var(--fw-semibold);
 		font-variant-numeric: tabular-nums;
 		transition:
-			background 0.12s var(--ease),
-			color 0.12s var(--ease);
+			background var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease);
 	}
 	@media (pointer: coarse) {
-		.seg-item {
-			position: relative;
-		}
 		.seg-item::before {
 			content: '';
 			position: absolute;

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

@@ -36,6 +36,8 @@ type $$ComponentProps = {
     scroll?: boolean;
     /** Fill the parent width, sharing it equally between segments. */
     block?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     option?: Snippet<[SegmentOption, boolean]>;
 };

package/dist/components/molecules/SelectButton.svelte

@@ -8,6 +8,7 @@
 	import Button from '../atoms/Button.svelte';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import Select from '../atoms/Select.svelte';
+	import { playSound } from '../../sound';
 
 	type Option = { value: string; label: string };
 
@@ -28,6 +29,7 @@
 		grow = false,
 		shrink = true,
 		block = false,
+		sound = true,
 		class: klass = '',
 		...rest
 	}: {
@@ -60,9 +62,16 @@
 		// Shared square box scale (`--box-xs/sm/md/lg`); default is the 2.25rem icon box.
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		hitArea?: 'auto' | 'compact';
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
+
+	function change(e: Event) {
+		playSound('click', sound);
+		onchange((e.currentTarget as HTMLSelectElement).value);
+	}
 </script>
 
 <!-- The wrapper (owned here, so styled scoped) is the positioning context that
@@ -89,7 +98,7 @@
 		aria-label={label}
 		{title}
 		{value}
-		onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
+		onchange={change}
 	>
 		{#if groups}
 			{#each groups as g, i (`${i}:${g.label}`)}
@@ -129,14 +138,20 @@
 	.select-button.active {
 		color: var(--accent);
 	}
-	/* The inert face takes no pointer events: mirror ghost hover and the
+	/* The inert face takes no pointer events: mirror ghost hover, press and the
 	   focus ring from the select overlaying it. */
-	.select-button:hover :global(.btn-ghost) {
-		background: var(--bg-elevated-2);
+	.select-button:active :global(.btn-ghost) {
+		--btn-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
 	}
 	.select-button:has(:focus-visible) {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.select-button:hover :global(.btn-ghost) {
+			background: var(--bg-elevated-2);
+		}
 	}
 	.select-button.row :global(.btn) {
 		justify-content: flex-start;

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

@@ -32,6 +32,8 @@ type $$ComponentProps = {
     onchange: (value: string) => void;
     box?: 'xs' | 'sm' | 'md' | 'lg';
     hitArea?: 'auto' | 'compact';
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/molecules/SortableList.svelte

@@ -585,8 +585,8 @@
 		border-radius: var(--r-sm);
 		background: transparent;
 		transition:
-			transform 0.16s var(--ease),
-			box-shadow 0.16s var(--ease);
+			transform var(--dur-base) var(--ease),
+			box-shadow var(--dur-base) var(--ease);
 	}
 	.sortable-sm .sl-lift {
 		min-height: var(--sortable-row-h, 1.875rem);
@@ -637,13 +637,17 @@
 		translate: -50% -50%;
 		background: radial-gradient(circle, currentColor 1px, transparent 1.5px) 0 0 / 5px 5px;
 	}
-	.sl-grip:hover,
+	@media (hover: hover) and (pointer: fine) {
+		.sl-grip:hover {
+			color: var(--accent);
+		}
+	}
 	.sl-grip[aria-pressed='true'] {
 		color: var(--accent);
 	}
 	.sl-grip:focus-visible {
 		outline: var(--focus-ring);
-		outline-offset: -2px;
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 	.handle-row .sl-row:not(.locked) {
 		cursor: grab;
@@ -676,7 +680,7 @@
 	}
 	button.sl-body:focus-visible {
 		outline: var(--focus-ring);
-		outline-offset: -2px;
+		outline-offset: var(--focus-ring-offset-inset);
 		border-radius: var(--r-sm);
 	}
 	.sl-row.selected button.sl-body {
@@ -687,7 +691,7 @@
 		flex: none;
 		display: inline-flex;
 		align-items: center;
-		gap: 2px;
+		gap: var(--sp-0-5);
 	}
 	.sl-live {
 		position: absolute;
@@ -712,9 +716,4 @@
 			inset-inline: 0;
 		}
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.sl-lift {
-			transition: none;
-		}
-	}
 </style>