@dorsk/tsumikit 0.74.0 → 0.75.0

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);

package/dist/components/molecules/Toaster.svelte

@@ -7,11 +7,21 @@
 	// everything outside it is inert, top layer included, so the stack moves
 	// into the topmost modal dialog and back to its host when it closes.
 	import { toasts } from '../../stores/toast.svelte';
+	import { playSound } from '../../sound';
 	import Button from '../atoms/Button.svelte';
 	import Card from '../atoms/Card.svelte';
 	import Icon from '../atoms/Icon.svelte';
 
-	let { class: klass = '', style: styleProp = '' }: { class?: string; style?: string } = $props();
+	let {
+		class: klass = '',
+		style: styleProp = '',
+		sound = true
+	}: {
+		class?: string;
+		style?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
+	} = $props();
 
 	let host: HTMLDivElement | undefined = $state();
 	let el: HTMLDivElement | undefined = $state();
@@ -69,12 +79,45 @@
 	$effect(() => () => {
 		if (el && host && el.parentNode !== host) host.appendChild(el);
 	});
+
+	// Feedback tones sound once, when the toast appears; the queue present at
+	// mount is a sync, not an arrival.
+	let seen: Set<number> | null = null;
+	$effect(() => {
+		const items = toasts.items;
+		if (!seen) {
+			seen = new Set(items.map((t) => t.id));
+			return;
+		}
+		for (const t of items) {
+			if (seen.has(t.id)) continue;
+			seen.add(t.id);
+			if (t.tone === 'ok') playSound('success', sound);
+			else if (t.tone === 'error') playSound('error', sound);
+		}
+	});
+
+	// Hovering a toast holds its timer; only a real pointer counts.
+	function hold(e: PointerEvent, id: number) {
+		if (e.pointerType === 'mouse') toasts.pause(id);
+	}
+	function release(e: PointerEvent, id: number) {
+		if (e.pointerType === 'mouse') toasts.resume(id);
+	}
 </script>
 
 {#snippet toast(t: (typeof toasts.items)[number])}
 	{@const tone = t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
 	{#if t.action}
-		<Card as="div" surface="raised" class="toast" {tone}>
+		<Card
+			as="div"
+			surface="raised"
+			class="toast"
+			{tone}
+			data-leaving={t.leaving || undefined}
+			onpointerenter={(e: PointerEvent) => hold(e, t.id)}
+			onpointerleave={(e: PointerEvent) => release(e, t.id)}
+		>
 			<button
 				type="button"
 				class="toast-text"
@@ -98,6 +141,9 @@
 			{tone}
 			type="button"
 			aria-label="Dismiss: {t.message}"
+			data-leaving={t.leaving || undefined}
+			onpointerenter={(e: PointerEvent) => hold(e, t.id)}
+			onpointerleave={(e: PointerEvent) => release(e, t.id)}
 			onclick={() => toasts.dismiss(t.id)}
 		>
 			<span aria-hidden="true" class="toast-icon">
@@ -160,7 +206,23 @@
 		width: 100%;
 		text-align: left;
 		font-size: var(--fs-sm);
-		animation: toast-in 0.18s var(--ease);
+		transition:
+			opacity var(--dur-sheet) var(--ease-out),
+			translate var(--dur-sheet) var(--ease-out),
+			scale var(--dur-sheet) var(--ease-out);
+	}
+	@starting-style {
+		.toaster :global(.toast) {
+			opacity: 0;
+			translate: 0 var(--shift-md);
+			scale: 0.98;
+		}
+	}
+	.toaster :global(.toast[data-leaving]) {
+		opacity: 0;
+		scale: 0.96;
+		pointer-events: none;
+		transition-duration: var(--dur-exit-slow);
 	}
 	.toaster :global(.toast.card-ok) {
 		color: var(--ok);
@@ -188,15 +250,4 @@
 	.msg {
 		flex: 1;
 	}
-	@keyframes toast-in {
-		from {
-			transform: translateY(8px);
-			opacity: 0;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.toaster :global(.toast) {
-			animation: none;
-		}
-	}
 </style>

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     class?: string;
     style?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
 };
 declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
 type Toaster = ReturnType<typeof Toaster>;