@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/molecules/SoundSettings.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	// Opt-in UI sound control: a speaker trigger opens a popover with the
+	// on/off switch, a volume slider (disabled while off), a preview button and
+	// the reason nothing plays (off, or reduced motion muting decorative sounds).
+	import type { ComponentProps } from 'svelte';
+	import Button from '../atoms/Button.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import Slider from '../atoms/Slider.svelte';
+	import Switch from '../atoms/Switch.svelte';
+	import Popover from './Popover.svelte';
+	import { sound } from '../../stores/sound.svelte';
+
+	type TriggerChrome = Pick<
+		ComponentProps<typeof Popover>,
+		'variant' | 'tone' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'
+	>;
+
+	let {
+		size = 'md',
+		box = size,
+		placement = 'bottom-end',
+		variant,
+		tone,
+		pill,
+		control,
+		block,
+		bare,
+		hitArea,
+		disabled,
+		label = 'Sound',
+		switchLabel = 'Sound effects',
+		volumeLabel = 'Volume',
+		previewLabel = 'Preview',
+		offHint = 'Off. Nothing is loaded until you turn it on.',
+		reducedMotionHint = 'Decorative sounds are muted because your system asks for reduced motion.',
+		class: klass = '',
+		style: styleProp = '',
+	}: TriggerChrome & {
+		size?: 'sm' | 'md';
+		label?: string;
+		switchLabel?: string;
+		volumeLabel?: string;
+		previewLabel?: string;
+		offHint?: string;
+		reducedMotionHint?: string;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const icon = $derived(
+		!sound.enabled || sound.volume === 0 ? 'volume-off' : sound.volume < 0.5 ? 'volume-low' : 'volume-high'
+	);
+	const percent = $derived(Math.round(sound.volume * 100));
+	const hint = $derived(
+		sound.muted === 'off' ? offHint : sound.muted === 'reduced-motion' ? reducedMotionHint : null
+	);
+</script>
+
+<Popover
+	{label}
+	{placement}
+	{box}
+	{variant}
+	{tone}
+	{pill}
+	{control}
+	{block}
+	{bare}
+	{hitArea}
+	{disabled}
+	triggerClass={klass}
+	style={styleProp}
+	sound={false}
+>
+	{#snippet trigger()}
+		<span data-tsu="SoundSettings" class="glyph" title="{label}: {sound.enabled ? `${percent}%` : 'off'}">
+			<Icon name={icon} size={size === 'sm' ? 16 : 18} />
+		</span>
+	{/snippet}
+	<div class="panel" class:panel-sm={size === 'sm'}>
+		<div class="row">
+			<Switch
+				label={switchLabel}
+				labelVisible
+				size={size === 'sm' ? 'sm' : 'md'}
+				bind:checked={() => sound.enabled, (on) => sound.setEnabled(on)}
+			/>
+			<Button
+				size="sm"
+				variant="ghost"
+				disabled={!sound.enabled}
+				sound={false}
+				onclick={() => sound.play('success')}>{previewLabel}</Button
+			>
+		</div>
+		<div class="row">
+			<Icon name="volume" size={16} />
+			<Slider
+				value={sound.volume}
+				min={0}
+				max={1}
+				step={0.05}
+				label={volumeLabel}
+				aria-valuetext="{percent}%"
+				disabled={!sound.enabled}
+				oninput={(e) => sound.setVolume(Number((e.currentTarget as HTMLInputElement).value))}
+			/>
+			<span class="value">{percent}%</span>
+		</div>
+		{#if hint}
+			<div class="hint" aria-live="polite">{hint}</div>
+		{/if}
+	</div>
+</Popover>
+
+<style>
+	.glyph {
+		display: inline-flex;
+		line-height: var(--lh-none);
+	}
+	.panel {
+		width: min(17rem, 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(15rem, calc(100vw - var(--sp-6)));
+		padding: var(--sp-2) var(--sp-3);
+		font-size: 0.8125rem;
+	}
+	.row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		color: var(--text-muted);
+	}
+	.row > :global(.switch-row) {
+		flex: 1 1 auto;
+		color: var(--text);
+	}
+	.row > :global(.slider) {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.value {
+		flex: none;
+		min-width: 2.5rem;
+		text-align: end;
+		font-size: 0.75rem;
+		font-variant-numeric: tabular-nums;
+	}
+	.hint {
+		font-size: 0.75rem;
+		color: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import Popover from './Popover.svelte';
+type TriggerChrome = Pick<ComponentProps<typeof Popover>, 'variant' | 'tone' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'>;
+type $$ComponentProps = TriggerChrome & {
+    size?: 'sm' | 'md';
+    label?: string;
+    switchLabel?: string;
+    volumeLabel?: string;
+    previewLabel?: string;
+    offHint?: string;
+    reducedMotionHint?: string;
+    class?: string;
+    style?: string;
+};
+declare const SoundSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type SoundSettings = ReturnType<typeof SoundSettings>;
+export default SoundSettings;

package/dist/components/molecules/SplitButton.svelte

@@ -48,6 +48,8 @@
 		loading?: boolean;
 		/** Handler of the primary action. */
 		onclick?: (e: MouseEvent) => void;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		style?: string;
 		/** Content of the primary action. */
@@ -75,6 +77,7 @@
 		type = 'button',
 		loading = false,
 		onclick,
+		sound = true,
 		class: klass = '',
 		style: styleProp = '',
 		children,
@@ -102,6 +105,8 @@
 	class="split {klass}"
 	class:split-primary={variant === 'primary'}
 	class:split-half={caret === 'half'}
+	class:split-sm={size === 'sm'}
+	class:split-lg={size === 'lg'}
 	style={styleProp}
 	style:--split-height={height}
 >
@@ -114,6 +119,7 @@
 			{type}
 			{loading}
 			{disabled}
+			{sound}
 			block
 			{onclick}
 			onkeydown={onPrimaryKeydown}
@@ -139,7 +145,7 @@
 			{onopen}
 			{onclose}
 		>
-			{#snippet trigger()}<Icon name="chevron-down" size={size === 'sm' ? 14 : 16} />{/snippet}
+			{#snippet trigger()}<span class="caret-glyph"><Icon name="chevron-down" /></span>{/snippet}
 		</Menu>
 	</span>
 </div>
@@ -169,14 +175,35 @@
 	.split-half .split-caret {
 		width: calc(var(--split-height) / 2);
 	}
+	.caret-glyph {
+		display: inline-flex;
+		align-items: center;
+		font-size: var(--control-icon-md);
+	}
+	.split-sm .caret-glyph {
+		font-size: var(--control-icon-sm);
+	}
+	.split-lg .caret-glyph {
+		font-size: var(--control-icon-lg);
+	}
+	/* Coarse pointers: the narrow caret keeps a 24px hit box without changing its drawn width. */
+	@media (pointer: coarse) {
+		.split-half .split-caret {
+			min-width: var(--box-xs);
+		}
+	}
 	/* The hovered or focused segment paints above its neighbour, so its
 	   accent border and focus ring are not cut by the overlap. */
-	.split-main:hover,
 	.split-main:focus-within,
-	.split-caret:hover,
 	.split-caret:focus-within {
 		z-index: 1;
 	}
+	@media (hover: hover) and (pointer: fine) {
+		.split-main:hover,
+		.split-caret:hover {
+			z-index: 1;
+		}
+	}
 	/* On a filled primary the borders match the fill; paint the divider in the
 	   on-accent foreground instead. */
 	.split-primary .split-caret::before {

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

@@ -40,6 +40,8 @@ type Own = {
     loading?: boolean;
     /** Handler of the primary action. */
     onclick?: (e: MouseEvent) => void;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     style?: string;
     /** Content of the primary action. */

package/dist/components/molecules/SwipeRow.svelte

@@ -27,6 +27,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Icon from '../atoms/Icon.svelte';
 	import { canonicalTone } from '../../tone';
+	import { playSound } from '../../sound';
 
 	type Own = {
 		children: Snippet;
@@ -40,6 +41,8 @@
 		/** Fraction of the row width the content must travel to fire. */
 		threshold?: number;
 		disabled?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		style?: string;
 	};
@@ -52,6 +55,7 @@
 		trailing,
 		threshold = 0.35,
 		disabled = false,
+		sound = true,
 		class: klass = '',
 		style: styleProp,
 		...rest
@@ -150,7 +154,12 @@
 		const fire = locked === 'x' && armed ? active : undefined;
 		release(el);
 		settle();
-		fire?.onaction();
+		if (fire) run(fire);
+	}
+
+	function run(action: SwipeAction) {
+		playSound('click', sound);
+		action.onaction();
 	}
 
 	function onpointercancel(e: PointerEvent) {
@@ -223,12 +232,12 @@
 	{#if leadingAction || trailingAction}
 		<div class="swiperow-actions" data-part="actions">
 			{#if leadingAction}
-				<button type="button" class="swiperow-sr" data-part="leading-button" {disabled} onclick={() => leadingAction?.onaction()}>
+				<button type="button" class="swiperow-sr" data-part="leading-button" {disabled} onclick={() => leadingAction && run(leadingAction)}>
 					{leadingAction.label}
 				</button>
 			{/if}
 			{#if trailingAction}
-				<button type="button" class="swiperow-sr" data-part="trailing-button" {disabled} onclick={() => trailingAction?.onaction()}>
+				<button type="button" class="swiperow-sr" data-part="trailing-button" {disabled} onclick={() => trailingAction && run(trailingAction)}>
 					{trailingAction.label}
 				</button>
 			{/if}
@@ -276,7 +285,7 @@
 		background: var(--swiperow-tone);
 		color: var(--swiperow-ink);
 		font-size: var(--fs-sm);
-		font-weight: 600;
+		font-weight: var(--fw-semibold);
 		visibility: hidden;
 		pointer-events: none;
 	}
@@ -291,10 +300,10 @@
 		visibility: visible;
 	}
 	.swiperow-pane :global(svg) {
-		transition: transform 120ms var(--ease);
+		transition: scale var(--dur-spring) var(--ease-spring);
 	}
 	.swiperow--armed .swiperow-pane :global(svg) {
-		transform: scale(1.2);
+		scale: 1.2;
 	}
 	.swiperow-content {
 		position: relative;
@@ -303,7 +312,7 @@
 		will-change: transform;
 	}
 	.swiperow--settling .swiperow-content {
-		transition: transform 200ms var(--ease);
+		transition: transform var(--dur-exit-slow) var(--ease-out);
 	}
 	.swiperow--dragging .swiperow-content {
 		cursor: grabbing;
@@ -341,13 +350,7 @@
 		color: var(--swiperow-ink);
 		background: var(--swiperow-tone);
 		border-radius: var(--r-sm);
-		outline: 2px solid var(--accent);
-		outline-offset: 1px;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.swiperow--settling .swiperow-content,
-		.swiperow-pane :global(svg) {
-			transition: none;
-		}
+		outline: var(--focus-ring);
+		outline-offset: var(--sp-px);
 	}
 </style>

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

@@ -32,6 +32,8 @@ type Own = {
     /** Fraction of the row width the content must travel to fire. */
     threshold?: number;
     disabled?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/Tabs.svelte

@@ -31,10 +31,12 @@
 	// Without `panel` the tablist stands alone as a document strip: `closable`
 	// tabs gain a close control, Delete and middle-click close the focused tab,
 	// `leading` decorates each tab and `actions` trails the strip.
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Icon from '../atoms/Icon.svelte';
 	import IconButton from './IconButton.svelte';
+	import { playSound } from '../../sound';
 
 	let {
 		tabs,
@@ -50,6 +52,7 @@
 		style: styleProp = '',
 		panelClass = '',
 		panelPadding = 'md',
+		sound = true,
 		...rest
 	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
 
@@ -73,6 +76,8 @@
 		style?: string;
 		panelClass?: string;
 		panelPadding?: 'none' | 'sm' | 'md';
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 	};
 
 	// Default to the first selectable tab when no value is supplied.
@@ -97,8 +102,59 @@
 		return t.closable ?? closable;
 	}
 
+	// One indicator slides under the selected tab on translate/scale (never
+	// width/left). It snaps on mount and on reflow, and only animates on a
+	// selection change; until it is placed the selected tab draws its own line.
+	let indicator = $state<HTMLSpanElement | null>(null);
+	let placed = $state(false);
+	let indLeft = 0;
+	let indWidth = 0;
+	function placeIndicator(animate: boolean) {
+		const el = listEl?.querySelector<HTMLElement>('.tab.selected');
+		const ind = indicator;
+		if (!el || !ind) {
+			placed = false;
+			return;
+		}
+		const left = el.offsetLeft;
+		const width = el.offsetWidth;
+		const prevLeft = indLeft;
+		const prevWidth = indWidth;
+		indLeft = left;
+		indWidth = width;
+		ind.style.width = `${width}px`;
+		if (!animate || !placed || width === 0) {
+			ind.style.transition = 'none';
+			ind.style.translate = `${left}px 0`;
+			ind.style.scale = '1 1';
+			ind.getBoundingClientRect();
+			ind.style.transition = '';
+			placed = true;
+			return;
+		}
+		ind.style.transition = 'none';
+		ind.style.translate = `${prevLeft}px 0`;
+		ind.style.scale = `${prevWidth / width} 1`;
+		ind.getBoundingClientRect();
+		ind.style.transition = '';
+		ind.style.translate = `${left}px 0`;
+		ind.style.scale = '1 1';
+	}
+	$effect(() => {
+		value;
+		tabs;
+		tick().then(() => placeIndicator(true));
+	});
+	$effect(() => {
+		if (!listEl || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver(() => placeIndicator(false));
+		ro.observe(listEl);
+		return () => ro.disconnect();
+	});
+
 	function select(id: string, focus = false) {
 		if (tabs.find((t) => t.id === id)?.disabled) return;
+		if (value !== id) playSound('click', sound);
 		value = id;
 		queueMicrotask(() => {
 			const el = listEl?.ownerDocument.getElementById(tabId(id));
@@ -163,7 +219,8 @@
 
 <div {...rest} class="tabs {klass}" style={styleProp} data-tsu="Tabs">
 	<div class="strip">
-		<div bind:this={listEl} role="tablist" aria-label={label} tabindex="-1" class="tablist" {onkeydown}>
+		<div bind:this={listEl} role="tablist" aria-label={label} tabindex="-1" class="tablist" class:placed {onkeydown}>
+				<span bind:this={indicator} class="indicator" aria-hidden="true"></span>
 			{#each tabs as t (t.id)}
 				{#if canClose(t)}
 					<!-- A close control cannot nest inside a <button>, so a closable tab is a div. -->
@@ -235,6 +292,7 @@
 		align-items: stretch;
 	}
 	.tablist {
+		position: relative;
 		display: flex;
 		flex: 1 1 auto;
 		min-width: 0;
@@ -244,42 +302,66 @@
 		overflow-y: hidden;
 		scrollbar-width: thin;
 	}
+	.indicator {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: 0;
+		height: 2px;
+		background: var(--accent);
+		transform-origin: left center;
+		pointer-events: none;
+		transition:
+			translate var(--dur-spring) var(--ease-spring),
+			scale var(--dur-spring) var(--ease-spring);
+	}
 	.tab {
 		display: inline-flex;
 		flex: 0 0 auto;
 		white-space: nowrap;
 		align-items: center;
 		gap: var(--sp-2);
-		padding: var(--sp-2) var(--sp-3);
+		min-height: var(--control-md);
+		padding: 0 var(--control-px-md);
 		border: none;
 		background: none;
 		color: var(--text-muted);
-		font-size: var(--fs-sm);
+		font-size: var(--control-fs-md);
 		font-weight: var(--fw-medium);
+		--icon-size: var(--control-icon-md);
 		border-bottom: 2px solid transparent;
 		margin-bottom: -1px;
 		max-width: var(--tab-max-width, none);
 		transition:
-			color 0.12s var(--ease),
-			border-color 0.12s var(--ease);
+			color var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease);
 	}
 	.tab.closable {
 		cursor: pointer;
 		padding-inline-end: var(--sp-2);
 		user-select: none;
 	}
-	.tab:hover:not(:disabled, .disabled) {
-		color: var(--text);
+	@media (hover: hover) and (pointer: fine) {
+		.tab:hover:not(:disabled, .disabled) {
+			color: var(--text);
+		}
 	}
 	.tab:disabled,
 	.tab.disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.tab.selected {
 		color: var(--accent);
+	}
+	.tablist:not(.placed) .tab.selected {
 		border-bottom-color: var(--accent);
 	}
+	/* The list clips its overflow, so the ring sits inside the tab. */
+	.tab:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
+	}
 	.label {
 		min-width: 0;
 		overflow: hidden;
@@ -303,8 +385,8 @@
 		padding-top: 0;
 	}
 	.tabpanel:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
 		border-radius: var(--r-sm);
 	}
 </style>

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

@@ -39,6 +39,8 @@ type Own = {
     style?: string;
     panelClass?: string;
     panelPadding?: 'none' | 'sm' | 'md';
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
 };
 type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
 declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/molecules/ThemePicker.svelte

@@ -157,11 +157,11 @@
 		position: absolute;
 		right: -0.35rem;
 		bottom: -0.35rem;
-		border-radius: 50%;
+		border-radius: var(--r-pill);
 		background: var(--bg);
 		color: var(--text-muted);
 		font-size: var(--fs-xs);
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.swatch {
 		display: grid;
@@ -215,19 +215,27 @@
 		gap: var(--sp-1);
 	}
 	.cell {
+		--cell-scale-dur: var(--dur-fast);
 		display: inline-flex;
-		padding: 3px;
+		padding: var(--sp-0-5);
 		border: 2px solid transparent;
 		border-radius: var(--r-md);
 		background: none;
 		cursor: pointer;
+		transition:
+			background-color var(--dur-fast) ease,
+			border-color var(--dur-fast) ease,
+			scale var(--cell-scale-dur) var(--ease-out);
 	}
+	/* Concentric with the cell: outer radius minus border and padding. */
 	.cell .swatch {
 		width: 1.6rem;
 		height: 1.6rem;
+		border-radius: calc(var(--r-md) - var(--sp-1));
 	}
-	.cell:hover {
-		background: var(--bg-elevated-2);
+	.cell:active {
+		--cell-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
 	}
 	.cell.current {
 		border-color: var(--accent);
@@ -238,8 +246,8 @@
 	}
 	.cell:focus-visible,
 	.auto:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 1px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 	.auto {
 		display: flex;
@@ -255,16 +263,23 @@
 		color: inherit;
 		text-align: left;
 		cursor: pointer;
+		transition:
+			background-color var(--dur-fast) ease,
+			border-color var(--dur-fast) ease;
 	}
-	.auto:hover {
-		background: var(--bg-elevated-2);
+	@media (hover: hover) and (pointer: fine) {
+		.cell:hover,
+		.auto:hover {
+			background: var(--bg-elevated-2);
+			transition-duration: var(--dur-instant);
+		}
 	}
 	.auto.current {
 		border-color: var(--accent);
 	}
 	.auto-glyph {
 		font-size: var(--fs-md);
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.auto-text {
 		display: flex;

package/dist/components/molecules/Timestamp.svelte

@@ -199,10 +199,19 @@
 		text-underline-offset: 2px;
 		text-decoration-color: var(--border-strong);
 	}
-	.ts-trigger:hover,
 	.ts-trigger:focus-visible {
 		text-decoration-color: currentColor;
 	}
+	@media (hover: hover) and (pointer: fine) {
+		.ts-trigger:hover {
+			text-decoration-color: currentColor;
+		}
+		.ts-mode:hover {
+			background: var(--bg-elevated-2);
+			color: var(--text);
+			transition-duration: var(--dur-instant);
+		}
+	}
 
 	.ts-panel {
 		display: flex;
@@ -224,12 +233,8 @@
 		font-size: var(--fs-xs);
 		cursor: pointer;
 		transition:
-			background 0.12s var(--ease),
-			color 0.12s var(--ease);
-	}
-	.ts-mode:hover {
-		background: var(--bg-elevated-2);
-		color: var(--text);
+			background var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease);
 	}
 	.ts-mode.active {
 		background: var(--bg-elevated-2);