@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/molecules/InputGroup.svelte

@@ -113,9 +113,9 @@
 	   full width and the scrollbar ends above the controls. */
 	.ig {
 		--ig-h: var(--control-height-default);
-		--ig-pad-x: var(--sp-3);
+		--ig-pad-x: var(--control-px-md);
 		--ig-gap: var(--sp-2);
-		--ig-inset: 2px;
+		--ig-inset: var(--sp-0-5);
 		--ig-radius: var(--r-md);
 		position: relative;
 		display: flex;
@@ -123,12 +123,12 @@
 	}
 	.ig-sm {
 		--ig-h: var(--control-height-compact);
-		--ig-pad-x: var(--sp-2);
+		--ig-pad-x: var(--control-px-sm);
 		--ig-gap: var(--sp-1);
 	}
 	.ig-lg {
 		--ig-h: var(--control-height-large);
-		--ig-pad-x: var(--sp-4);
+		--ig-pad-x: var(--control-px-lg);
 	}
 	.ig-field {
 		width: 100%;
@@ -138,10 +138,10 @@
 	   following the field's; inner corners go square. In the bar they hug the
 	   bottom and side borders, so only the bottom-outer corner is rounded. */
 	.ig-adorn {
-		--ig-fuse-r: calc(var(--ig-radius) - 1px);
+		--ig-fuse-r: calc(var(--ig-radius) - var(--sp-px));
 		position: absolute;
-		top: 1px;
-		bottom: 1px;
+		top: var(--sp-px);
+		bottom: var(--sp-px);
 		z-index: 1;
 		display: flex;
 		align-items: center;
@@ -149,10 +149,10 @@
 		pointer-events: none;
 	}
 	.ig-leading {
-		inset-inline-start: 1px;
+		inset-inline-start: var(--sp-px);
 	}
 	.ig-trailing {
-		inset-inline-end: 1px;
+		inset-inline-end: var(--sp-px);
 	}
 	.ig-adorn > :global(*) {
 		pointer-events: auto;
@@ -197,7 +197,7 @@
 	}
 	.ig-bar .ig-adorn {
 		top: auto;
-		height: calc(var(--ig-h) - 1px);
+		height: calc(var(--ig-h) - var(--sp-px));
 	}
 	.ig-bar .ig-leading > :global(:first-child) {
 		--btn-radius: 0 0 0 var(--ig-fuse-r);
@@ -225,7 +225,7 @@
 		border: 1px solid var(--textarea-border, var(--border-strong));
 		border-top: 0;
 		border-radius: 0 0 var(--ig-radius) var(--ig-radius);
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) ease;
 		pointer-events: none;
 	}
 	.ig-bar:has(.ig-field :global(:focus))::before {
@@ -244,7 +244,8 @@
 		pointer-events: none;
 	}
 	.ig.disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
 	}
 	.ig.disabled .ig-adorn > :global(:disabled) {
 		opacity: 1;

package/dist/components/molecules/LoadMore.svelte

@@ -15,6 +15,7 @@
 		retryLabel = 'Retry',
 		doneLabel = 'No more items',
 		pill = false,
+		sound = true,
 		class: klass = '',
 		...rest
 	}: {
@@ -26,6 +27,8 @@
 		retryLabel?: string;
 		doneLabel?: string;
 		pill?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -44,12 +47,13 @@
 		<Text variant="caption" class="load-more-done">{doneLabel}</Text>
 	{:else if state === 'error'}
 		<Text tone="danger" size="sm" class="load-more-error">{errorLabel}</Text>
-		<Button size="sm" onclick={() => onload?.()}>{retryLabel}</Button>
+		<Button size="sm" {sound} onclick={() => onload?.()}>{retryLabel}</Button>
 	{:else}
 		<Button
 			size="sm"
 			variant={pill ? 'default' : 'ghost'}
 			loading={state === 'loading'}
+			{sound}
 			class={pill ? 'load-more-chip' : ''}
 			onclick={() => onload?.()}
 		>
@@ -67,6 +71,7 @@
 		gap: var(--sp-2);
 		padding: var(--sp-2);
 		min-height: var(--sp-8);
+		flex-shrink: 0;
 	}
 	.load-more-pill {
 		padding: var(--sp-1);

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

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

package/dist/components/molecules/Menu.svelte

@@ -51,6 +51,7 @@
 	import Icon from '../atoms/Icon.svelte';
 	import Badge from '../atoms/Badge.svelte';
 	import { menuItemCloses, menuItemGlyphs } from './menu-item';
+	import { playSound } from '../../sound';
 
 	type PopoverProps = ComponentProps<typeof Popover>;
 	type TriggerChrome = Pick<
@@ -103,6 +104,7 @@
 		style: styleProp = '',
 		panelClass = '',
 		panelStyle = '',
+		sound = true,
 		...rest
 	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
@@ -123,9 +125,13 @@
 		 *  size or cap it (`min-width`, `max-height`, `padding`). */
 		panelClass?: string;
 		panelStyle?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 	} & TriggerChrome;
 
 	let listEl = $state<HTMLDivElement | null>(null);
+	// The activated row keeps its accent flash while the menu runs its exit.
+	let flashed = $state<string | null>(null);
 
 	const ROW_TARGET = ':is(select, input, textarea, button):not(:disabled), a[href], [tabindex]:not([tabindex="-1"])';
 
@@ -162,9 +168,13 @@
 			focusAt(b.length - 1);
 		}
 	}
-	function select(item: MenuItem, close: () => void) {
+	function select(item: MenuItem, key: string, close: () => void) {
 		if (item.disabled) return;
-		if (menuItemCloses(item, closeOnSelect)) close();
+		playSound('click', sound);
+		if (menuItemCloses(item, closeOnSelect)) {
+			flashed = key;
+			close();
+		}
 		item.onselect?.();
 	}
 </script>
@@ -193,11 +203,13 @@
 	{gap}
 	{count}
 	{countMax}
+	{sound}
 	role="menu"
 	haspopup="menu"
 	bind:open
 	{onclose}
 	onopen={() => {
+		flashed = null;
 		queueMicrotask(() => focusAt(0));
 		onopen?.();
 	}}
@@ -205,6 +217,7 @@
 	{#snippet children({ close }: { close: () => void })}
 	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item, i (item.id ?? `${i}:${item.label}`)}
+			{@const key = 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}
@@ -219,9 +232,10 @@
 				class="menu-item"
 				class:danger={item.danger}
 				class:on={item.pressed}
+				data-flash={flashed === key || undefined}
 				disabled={item.disabled}
 				tabindex="-1"
-				onclick={() => select(item, close)}
+				onclick={() => select(item, key, close)}
 			>
 				{#if item.content}
 					{@render item.content(item)}
@@ -251,7 +265,7 @@
 	.menu {
 		display: flex;
 		flex-direction: column;
-		gap: 1px;
+		gap: var(--sp-px);
 	}
 	.menu-item {
 		display: flex;
@@ -266,15 +280,27 @@
 		border-radius: var(--r-sm);
 		font-size: var(--fs-sm);
 		white-space: nowrap;
+		transition: background-color var(--dur-fast) var(--ease);
 	}
 	.menu-row {
 		position: relative;
 	}
-	.menu-item:hover:not(:disabled),
+	/* Highlight lands instantly and fades out: rows change at pointer speed. */
 	.menu-item:focus-visible,
-	.menu-row:focus-within {
+	.menu-row:focus-within,
+	.menu-item[data-flash] {
 		background: var(--bg-elevated-2);
 		outline: none;
+		transition-duration: var(--dur-instant);
+	}
+	.menu-item[data-flash] {
+		background: color-mix(in srgb, var(--accent) 18%, transparent);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.menu-item:hover:not(:disabled) {
+			background: var(--bg-elevated-2);
+			transition-duration: var(--dur-instant);
+		}
 	}
 	.menu-item.danger {
 		color: var(--danger);
@@ -305,7 +331,7 @@
 	}
 	.menu-item:disabled,
 	.menu-row[inert] {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 </style>

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

@@ -58,6 +58,8 @@ type Own = {
      *  size or cap it (`min-width`, `max-height`, `padding`). */
     panelClass?: string;
     panelStyle?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
 } & TriggerChrome;
 type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "open">;

package/dist/components/molecules/Metric.svelte

@@ -188,7 +188,7 @@
 		letter-spacing: 0.06em;
 		color: var(--text-muted);
 		font-family: var(--font-mono);
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 	}
 	.metric-chip {
 		display: inline-flex;
@@ -198,7 +198,7 @@
 		width: 1.75rem;
 		height: 1.75rem;
 		border-radius: var(--r-md);
-		font-size: 1rem;
+		font-size: var(--fs-md);
 		color: var(--metric-tone);
 		background: color-mix(in srgb, var(--metric-tone) 14%, transparent);
 		border: 1px solid color-mix(in srgb, var(--metric-tone) 30%, transparent);
@@ -208,7 +208,7 @@
 		align-items: baseline;
 		gap: var(--sp-1);
 		font-family: var(--font-mono);
-		line-height: 1.1;
+		line-height: var(--lh-none);
 	}
 	.metric-num {
 		min-width: 0;
@@ -229,7 +229,7 @@
 	.metric-sub {
 		font-size: var(--fs-xs);
 		color: var(--text-faint);
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 	}
 	:global(.metric-sm) .metric-num {
 		font-size: var(--fs-lg);
@@ -237,7 +237,7 @@
 	:global(.metric-sm) .metric-chip {
 		width: 1.5rem;
 		height: 1.5rem;
-		font-size: 0.875rem;
+		font-size: var(--fs-sm);
 	}
 	.metric-inline {
 		flex-direction: row;
@@ -260,12 +260,14 @@
 		cursor: pointer;
 		border-radius: var(--r-sm);
 	}
-	.metric-inline.metric-tap:hover .metric-label {
-		color: var(--text);
+	@media (hover: hover) and (pointer: fine) {
+		.metric-inline.metric-tap:hover .metric-label {
+			color: var(--text);
+		}
 	}
 	.metric-inline.metric-tap:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.metric-segments {
 		display: flex;

package/dist/components/molecules/Modal.svelte

@@ -10,6 +10,7 @@
 	import type { Snippet } from 'svelte';
 	import { browser } from '../../env';
 	import { readStorage, writeStorage } from '../../stores/storage';
+	import { playSound } from '../../sound';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import Spinner from '../atoms/Spinner.svelte';
 	import IconButton from './IconButton.svelte';
@@ -37,6 +38,7 @@
 		style: styleProp = '',
 		bodyClass = '',
 		maxHeight,
+		sound = true,
 	}: {
 		title: string;
 		/** Controlled visibility. When provided the `<dialog>` stays mounted and
@@ -67,6 +69,8 @@
 		bodyClass?: string;
 		/** Cap the sheet height; the body scrolls inside it. */
 		maxHeight?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 	} = $props();
 	const t = $derived(canonicalTone(tone));
 
@@ -87,19 +91,26 @@
 
 	// Open as a modal (top layer + trap + inert background + focus mgmt). The
 	// native element restores focus to the trigger automatically on close.
+	// Mounting (or mounting with `open` already true) is a sync, not a
+	// transition, so it stays silent.
+	let synced = false;
 	$effect(() => {
 		if (!dialogEl) return;
 		if (!controlled) {
 			dialogEl.showModal();
 			return;
 		}
-		if (open && !dialogEl.open) dialogEl.showModal();
-		else if (!open && dialogEl.open) dialogEl.close();
+		if (open && !dialogEl.open) {
+			dialogEl.showModal();
+			if (synced) playSound('open', sound);
+		} else if (!open && dialogEl.open) dialogEl.close();
+		synced = true;
 	});
 
 	function requestClose() {
 		if (busy) return;
 		if (controlled) open = false;
+		else playSound('close', sound);
 		onclose?.();
 	}
 
@@ -174,6 +185,7 @@
 	}}
 	onclose={() => {
 		if (controlled) open = false;
+		playSound('close', sound);
 	}}
 	onpointerdown={onDialogPointerDown}
 	onclick={onDialogClick}
@@ -189,7 +201,7 @@
 	>
 		<div class="sheet-head">
 			{#if t !== 'neutral'}
-				<span class="sheet-tone-icon"><Icon name={TONE_ICON[t]} size={18} /></span>
+				<span class="sheet-tone-icon"><Icon name={TONE_ICON[t]} /></span>
 			{/if}
 			<span id={titleId} class="sheet-title truncate">{title}</span>
 			{#if busy}<Spinner label="Working" />{/if}
@@ -234,17 +246,28 @@
 		display: flex;
 		align-items: flex-end;
 		justify-content: center;
+		/* Exits run natively on close(): the box leaves the top layer once the sheet is gone. */
+		transition:
+			display var(--dur-exit-slow) allow-discrete,
+			overlay var(--dur-exit-slow) allow-discrete;
 	}
 	.modal:not([open]) {
 		display: none;
 	}
 	.modal::backdrop {
 		background: rgba(0, 0, 0, 0.55);
-		/* animate the backdrop in (progressive enhancement) */
-		animation: backdrop-in 0.18s var(--ease);
+		opacity: 0;
+		transition:
+			opacity var(--dur-exit) var(--ease-out),
+			display var(--dur-exit) allow-discrete,
+			overlay var(--dur-exit) allow-discrete;
+	}
+	.modal[open]::backdrop {
+		opacity: 1;
+		transition-duration: var(--dur-base);
 	}
-	@keyframes backdrop-in {
-		from {
+	@starting-style {
+		.modal[open]::backdrop {
 			opacity: 0;
 		}
 	}
@@ -267,8 +290,24 @@
 		border: 1px solid var(--border);
 		border-radius: var(--r-lg) var(--r-lg) 0 0;
 		box-shadow: var(--shadow-lg);
-		animation: sheet-up 0.18s var(--ease);
 		padding-bottom: var(--safe-bottom);
+		/* Bottom sheet: slides up on enter, down on exit. */
+		opacity: 0;
+		translate: 0 100%;
+		transition:
+			opacity var(--dur-exit-slow) var(--ease-out),
+			translate var(--dur-exit-slow) var(--ease-drawer);
+	}
+	.modal[open] .sheet {
+		opacity: 1;
+		translate: 0;
+		transition-duration: var(--dur-sheet);
+	}
+	@starting-style {
+		.modal[open] .sheet {
+			opacity: 0;
+			translate: 0 100%;
+		}
 	}
 	@media (min-width: 640px) {
 		.sheet {
@@ -276,6 +315,22 @@
 			padding-bottom: 0;
 			width: var(--sheet-w, var(--sw));
 			max-width: min(var(--sheet-w, var(--sw)), calc(100vw - 2rem));
+			/* Centred dialog: scales from the middle instead of sliding. */
+			translate: 0;
+			scale: var(--enter-scale);
+			transition:
+				opacity var(--dur-exit) var(--ease-out),
+				scale var(--dur-exit) var(--ease-out);
+		}
+		.modal[open] .sheet {
+			scale: 1;
+			transition-duration: var(--dur-slow);
+		}
+		@starting-style {
+			.modal[open] .sheet {
+				translate: 0;
+				scale: var(--enter-scale);
+			}
 		}
 		.sheet-sm {
 			--sw: 24rem;
@@ -287,18 +342,6 @@
 			--sw: 72rem;
 		}
 	}
-	@keyframes sheet-up {
-		from {
-			transform: translateY(8%);
-			opacity: 0.4;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.modal::backdrop,
-		.sheet {
-			animation: none;
-		}
-	}
 	.modal.resizing .sheet {
 		user-select: none;
 		/* Make per-frame width changes cheap to paint: hint the animated property,
@@ -322,6 +365,7 @@
 	.sheet-tone-icon {
 		display: inline-flex;
 		flex: none;
+		font-size: var(--icon-lg);
 		color: var(--modal-tone);
 	}
 	.sheet-title {
@@ -372,9 +416,9 @@
 			bottom: 0;
 			right: 6px;
 			width: 2px;
-			border-radius: 999px;
+			border-radius: var(--r-pill);
 			background: transparent;
-			transition: background 0.12s var(--ease);
+			transition: background-color var(--dur-fast) var(--ease);
 		}
 		.sheet-resize::after {
 			content: '';
@@ -384,17 +428,23 @@
 			transform: translateY(-50%);
 			width: 4px;
 			height: 44px;
-			border-radius: 999px;
+			border-radius: var(--r-pill);
 			background: var(--border-strong);
-			transition: background 0.12s var(--ease);
+			transition: background-color var(--dur-fast) var(--ease);
 		}
-		.sheet-resize:hover::before,
 		.modal.resizing .sheet-resize::before {
 			background: color-mix(in srgb, var(--accent) 45%, transparent);
 		}
-		.sheet-resize:hover::after,
 		.modal.resizing .sheet-resize::after {
 			background: var(--accent);
 		}
 	}
+	@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
+		.sheet-resize:hover::before {
+			background: color-mix(in srgb, var(--accent) 45%, transparent);
+		}
+		.sheet-resize:hover::after {
+			background: var(--accent);
+		}
+	}
 </style>

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

@@ -30,6 +30,8 @@ type $$ComponentProps = {
     bodyClass?: string;
     /** Cap the sheet height; the body scrolls inside it. */
     maxHeight?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
 };
 declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/molecules/OptionButton.svelte

@@ -9,6 +9,7 @@
 	// own <button> + scoped styles rather than specializing the Button atom.
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { playSound } from '../../sound';
 
 	let {
 		selected = false,
@@ -22,6 +23,8 @@
 		onfocuschange,
 		onfocus,
 		onpointerenter,
+		onclick,
+		sound = true,
 		'aria-describedby': describedBy,
 		class: klass = '',
 		children,
@@ -41,6 +44,8 @@
 		align?: 'center' | 'start';
 		/** Stretch to fill the container width (full-width list/menu row). */
 		block?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		children?: Snippet;
 	} = $props();
 
@@ -68,6 +73,11 @@
 		onpointerenter?.(e);
 		activate();
 	}}
+	onclick={(e) => {
+		if (disabled) return;
+		playSound('click', sound);
+		onclick?.(e);
+	}}
 	class="opt {klass}"
 	class:row
 	class:align-start={align === 'start'}
@@ -83,7 +93,7 @@
 	.opt {
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+		gap: var(--sp-0-5);
 		padding: var(--sp-2);
 		background: var(--bg);
 		border: 1px solid var(--border-strong);
@@ -92,17 +102,20 @@
 		text-align: left;
 		white-space: normal;
 		user-select: none;
+		--opt-scale-dur: var(--dur-fast);
 		transition:
-			background 0.12s var(--ease),
-			border-color 0.12s var(--ease),
-			color 0.12s var(--ease);
+			background var(--dur-fast) ease,
+			border-color var(--dur-fast) ease,
+			color var(--dur-fast) ease,
+			scale var(--opt-scale-dur) var(--ease-out);
 	}
 	.opt:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
-	.opt:hover:not(:disabled):not(.selected) {
-		border-color: var(--border-strong);
+	.opt:active:not(:disabled) {
+		--opt-scale-dur: var(--dur-press);
+		scale: var(--press-scale);
 	}
 	.opt.row {
 		flex-direction: row;
@@ -140,8 +153,13 @@
 		background: color-mix(in srgb, var(--oc) 14%, var(--bg));
 		color: var(--oc);
 	}
-	.opt.selected:hover:not(:disabled) {
-		border-color: var(--oc);
-		background: color-mix(in srgb, var(--oc) 20%, var(--bg));
+	@media (hover: hover) and (pointer: fine) {
+		.opt:hover:not(:disabled):not(.selected) {
+			border-color: var(--border-strong);
+		}
+		.opt.selected:hover:not(:disabled) {
+			border-color: var(--oc);
+			background: color-mix(in srgb, var(--oc) 20%, var(--bg));
+		}
 	}
 </style>

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

@@ -15,6 +15,8 @@ type $$ComponentProps = Omit<HTMLButtonAttributes, 'value'> & {
     align?: 'center' | 'start';
     /** Stretch to fill the container width (full-width list/menu row). */
     block?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     children?: Snippet;
 };
 declare const OptionButton: import("svelte").Component<$$ComponentProps, {}, "">;