@dorsk/tsumikit 0.74.0 → 0.75.0

package/dist/components/molecules/FileButton.svelte

@@ -5,6 +5,7 @@
 	// JS to open the dialog. Emits the chosen files via `onfiles`. Dependency-free.
 	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
+	import { playSound } from '../../sound';
 
 	let {
 		onfiles,
@@ -20,6 +21,7 @@
 		control = false,
 		box,
 		hitArea = 'auto',
+		sound = true,
 		class: klass = ''
 	}: {
 		onfiles: (files: File[]) => void;
@@ -47,6 +49,8 @@
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		/** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 	} = $props();
 
@@ -81,6 +85,7 @@
 		{accept}
 		{multiple}
 		{disabled}
+		onclick={() => playSound('click', sound)}
 		onchange={onchange}
 	/>
 	{#if icon}
@@ -100,41 +105,52 @@
 		align-items: center;
 		justify-content: center;
 		gap: var(--sp-2);
-		padding: var(--sp-2) var(--sp-4);
-		min-height: 2.5rem;
+		padding: var(--sp-2) var(--btn-px-md);
+		min-height: var(--control-height-default);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
 		background: var(--surface);
 		color: var(--text);
 		font-weight: var(--fw-medium);
-		font-size: var(--fs-sm);
-		line-height: 1;
+		font-size: var(--control-fs-md);
+		line-height: var(--lh-none);
 		white-space: nowrap;
 		cursor: pointer;
 		user-select: none;
+		--icon-size: var(--control-icon-md);
+		--file-scale-dur: var(--dur-fast);
 		transition:
-			background 0.12s var(--ease),
-			border-color 0.12s var(--ease),
-			opacity 0.12s var(--ease);
+			background var(--dur-fast) ease,
+			border-color var(--dur-fast) ease,
+			color var(--dur-fast) ease,
+			opacity var(--dur-fast) ease,
+			scale var(--file-scale-dur) var(--ease-out);
 	}
-	.file-btn:hover:not(.disabled) {
-		border-color: var(--accent);
+	.file-btn:active:not(.disabled) {
+		--file-scale-dur: var(--dur-press);
+		scale: var(--press-scale);
+	}
+	.file-btn.icon-only:active:not(.disabled),
+	.file-btn.box:active:not(.disabled) {
+		scale: var(--press-scale-sm);
 	}
-	/* Size variants mirror the Button atom (sm 2rem / md 2.5rem / lg 3rem). */
+	/* Size variants mirror the Button atom. */
 	.file-btn.sm {
-		min-height: 2rem;
-		padding: var(--sp-1) var(--sp-3);
-		font-size: var(--fs-xs);
+		min-height: var(--control-height-compact);
+		padding: var(--sp-1) var(--btn-px-sm);
+		font-size: var(--control-fs-sm);
+		--icon-size: var(--control-icon-sm);
 	}
 	.file-btn.lg {
-		min-height: 3rem;
-		padding: var(--sp-3) var(--sp-5);
-		font-size: var(--fs-base);
+		min-height: var(--control-height-large);
+		padding: var(--sp-3) var(--btn-px-lg);
+		font-size: var(--control-fs-lg);
+		--icon-size: var(--control-icon-lg);
 	}
 	.file-btn.control {
 		height: var(--control-height);
 		min-height: var(--control-height);
-		padding: 0 var(--sp-3);
+		padding: 0 var(--control-px-md);
 	}
 	/* icon-only: square it up and drop the label gap. */
 	.file-btn.icon-only {
@@ -162,12 +178,17 @@
 			inset-inline-end: 0;
 		}
 	}
-	/* Emoji glyph is bumped above the text size — at 1em a paperclip is hard to
-	   read, so render it a touch larger for legibility. */
+	/* An emoji reads small next to an SVG glyph of the same size: one icon tier up. */
 	.emoji {
 		display: inline-flex;
-		font-size: 1.35em;
-		line-height: 1;
+		font-size: var(--icon-lg);
+		line-height: var(--lh-none);
+	}
+	.file-btn.sm .emoji {
+		font-size: var(--icon-md);
+	}
+	.file-btn.lg .emoji {
+		font-size: var(--icon-xl);
 	}
 	.file-btn.primary {
 		background: var(--accent);
@@ -175,25 +196,30 @@
 		color: var(--text-on-accent);
 		font-weight: var(--fw-semibold);
 	}
-	.file-btn.primary:hover:not(.disabled) {
-		filter: brightness(1.08);
-	}
 	.file-btn.ghost {
 		background: transparent;
 		border-color: transparent;
 	}
-	.file-btn.ghost:hover:not(.disabled) {
-		background: var(--bg-elevated-2);
-		border-color: transparent;
-	}
 	/* The hidden input keeps focusability (sr-only, not display:none), so mirror
 	   its focus onto the label for a visible ring. */
 	.file-btn:focus-within {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.file-btn.disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
+	@media (hover: hover) and (pointer: fine) {
+		.file-btn:hover:not(.disabled) {
+			border-color: var(--accent);
+		}
+		.file-btn.primary:hover:not(.disabled) {
+			filter: brightness(1.08);
+		}
+		.file-btn.ghost:hover:not(.disabled) {
+			background: var(--bg-elevated-2);
+			border-color: transparent;
+		}
+	}
 </style>

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

@@ -26,6 +26,8 @@ type $$ComponentProps = {
     box?: 'xs' | 'sm' | 'md' | 'lg';
     /** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
 };
 declare const FileButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/FilterInput.svelte

@@ -465,20 +465,26 @@
 		min-width: 0;
 	}
 	.fi__bar {
+		--fi-icon: var(--control-icon-md);
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
-		padding: 0 var(--sp-3);
+		padding: 0 var(--control-px-md);
 		min-height: var(--control-height-default);
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
+		transition:
+			border-color var(--dur-fast) ease,
+			box-shadow var(--dur-fast) ease;
 	}
 	.fi--sm .fi__bar {
 		min-height: var(--control-height-compact);
+		padding: 0 var(--control-px-sm);
+		--fi-icon: var(--control-icon-sm);
 	}
 	.fi--sm .fi__input {
-		font-size: var(--fs-sm);
+		font-size: var(--control-fs-sm);
 	}
 	.fi--pill .fi__bar {
 		border-radius: var(--r-pill);
@@ -493,11 +499,11 @@
 	.fi__kbd {
 		font-family: var(--font-mono);
 		font-size: var(--fs-xs);
-		line-height: 1;
+		line-height: var(--lh-none);
 		color: var(--text-faint);
 		border: 1px solid var(--border);
 		border-radius: var(--r-sm);
-		padding: 2px var(--sp-1);
+		padding: var(--sp-0-5) var(--sp-1);
 	}
 	.fi__bar:focus-within {
 		border-color: var(--accent);
@@ -509,6 +515,7 @@
 	}
 	.fi__icon {
 		display: flex;
+		font-size: var(--fi-icon);
 		color: var(--text-faint);
 	}
 	.fi__field {
@@ -533,16 +540,16 @@
 		background: transparent;
 		color: var(--text);
 		font-family: var(--font-mono);
-		font-size: var(--fs-md);
+		font-size: var(--control-fs-md);
 		outline: none;
 		min-width: 0;
 	}
 	@media (pointer: coarse) {
 		.fi__input {
-			font-size: max(16px, var(--fs-md));
+			font-size: max(16px, var(--control-fs-md));
 		}
 		.fi--sm .fi__input {
-			font-size: max(16px, var(--fs-sm));
+			font-size: max(16px, var(--control-fs-sm));
 		}
 	}
 	.fi--sans .fi__input {
@@ -555,22 +562,40 @@
 		color: transparent;
 	}
 	.fi__clear {
+		--clear-scale-dur: var(--dur-fast);
 		display: flex;
 		border: 0;
 		background: transparent;
+		font-size: var(--fi-icon);
 		color: var(--text-faint);
 		cursor: pointer;
 		padding: var(--sp-1);
 		border-radius: var(--r-sm);
+		transition:
+			color var(--dur-fast) ease,
+			background-color var(--dur-fast) ease,
+			opacity var(--dur-fast) ease,
+			scale var(--clear-scale-dur) var(--ease-out);
+	}
+	@starting-style {
+		.fi__clear {
+			opacity: 0;
+		}
 	}
-	.fi__clear:hover {
-		color: var(--text);
-		background: var(--bg-elevated-2);
+	.fi__clear:active {
+		--clear-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.fi__clear:hover {
+			color: var(--text);
+			background: var(--bg-elevated-2);
+		}
 	}
 
 	.fi__menu {
 		position: absolute;
-		top: calc(100% + 4px);
+		top: calc(100% + var(--sp-1));
 		left: 0;
 		right: 0;
 		z-index: var(--z-drawer);
@@ -581,6 +606,18 @@
 		padding: var(--sp-1);
 		max-height: 320px;
 		overflow-y: auto;
+		transform-origin: top left;
+		transition:
+			opacity var(--dur-fast) var(--ease-out),
+			scale var(--dur-fast) var(--ease-out),
+			translate var(--dur-fast) var(--ease-out);
+	}
+	@starting-style {
+		.fi__menu {
+			opacity: 0;
+			scale: var(--enter-scale);
+			translate: 0 calc(-1 * var(--shift-sm));
+		}
 	}
 	.fi__menu-head {
 		font-size: var(--fs-xs);
@@ -602,9 +639,12 @@
 		border-radius: var(--r-sm);
 		cursor: pointer;
 		font-size: var(--fs-sm);
+		transition: background-color var(--dur-fast) ease;
 	}
+	/* Highlight lands instantly and fades out: list navigation is high frequency. */
 	.fi__opt.is-active {
 		background: var(--accent-dim);
+		transition-duration: var(--dur-instant);
 	}
 	.fi__opt-label {
 		font-weight: var(--fw-medium);

package/dist/components/molecules/FontScalePicker.svelte

@@ -75,14 +75,14 @@
 	.glyph {
 		font-weight: var(--fw-bold);
 		font-size: 1rem;
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.panel {
 		width: min(15rem, calc(100vw - var(--sp-6)));
 		box-sizing: border-box;
 		overflow: hidden;
 		font-size: 0.875rem;
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 		padding: var(--sp-2) var(--sp-3);
 	}
 	.row {
@@ -106,16 +106,27 @@
 		color: var(--text-muted);
 		font-family: inherit;
 		font-weight: var(--fw-bold);
-		line-height: 1;
+		line-height: var(--lh-none);
 		cursor: pointer;
-	}
-	.end:hover {
-		background: var(--bg-elevated-2);
-		color: var(--text);
+		--end-scale-dur: var(--dur-fast);
+		transition:
+			background-color var(--dur-fast) ease,
+			color var(--dur-fast) ease,
+			scale var(--end-scale-dur) var(--ease-out);
 	}
 	.end:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 1px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
+	}
+	.end:active {
+		--end-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.end:hover {
+			background: var(--bg-elevated-2);
+			color: var(--text);
+		}
 	}
 	.small {
 		font-size: 0.75rem;

package/dist/components/molecules/GitRef.svelte

@@ -115,7 +115,7 @@
 		min-width: 0;
 		font-family: var(--font-mono);
 		font-size: var(--fs-xs);
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 		white-space: nowrap;
 	}
 	.chip {
@@ -123,7 +123,7 @@
 		align-items: center;
 		gap: 0.25em;
 		min-width: 0;
-		padding: 0.15rem var(--sp-2);
+		padding: var(--sp-0-5) var(--sp-2);
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
 		color: var(--text-muted);
@@ -137,14 +137,16 @@
 		color: var(--git-ref-tone);
 		border-color: color-mix(in srgb, var(--git-ref-tone) 40%, transparent);
 		background: color-mix(in srgb, var(--git-ref-tone) 12%, transparent);
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) var(--ease);
 	}
-	.pr:hover {
-		border-color: var(--git-ref-tone);
+	@media (hover: hover) and (pointer: fine) {
+		.pr:hover {
+			border-color: var(--git-ref-tone);
+		}
 	}
 	.pr:focus-visible {
-		outline: 2px solid var(--git-ref-tone);
-		outline-offset: 2px;
+		outline: var(--focus-ring-width) solid var(--git-ref-tone);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.text {
 		min-width: 0;

package/dist/components/molecules/GlyphStack.svelte

@@ -55,6 +55,10 @@
 	}: Omit<HTMLAttributes<HTMLSpanElement>, keyof Own> & Own = $props();
 
 	let root = $state<HTMLElement>();
+	// Coarse pointers cannot hit 1rem cells, so a folded stack with items opens
+	// its tiles on tap unless the caller chose an expand mode.
+	let coarse = $state(false);
+	const mode = $derived(expand !== 'none' ? expand : coarse ? 'tap' : 'none');
 	let width = $state(Number.POSITIVE_INFINITY);
 	let limit = $state(0);
 	const stacked = $derived(stack === 'always' || (stack === 'auto' && width < limit));
@@ -82,7 +86,7 @@
 	const CONTROL = 'button, a[href], input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])';
 
 	const tiles = $derived(items?.slice(0, 4) ?? []);
-	const expandable = $derived(expand !== 'none' && stacked && tiles.length > 0);
+	const expandable = $derived(mode !== 'none' && stacked && tiles.length > 0);
 	let panel = $state<HTMLDivElement>();
 	let open = $state(false);
 	let armed = $state(-1);
@@ -151,7 +155,7 @@
 	}
 
 	function onPointerDown(e: PointerEvent) {
-		if (!expandable || expand !== 'slide' || e.button !== 0) return;
+		if (!expandable || mode !== 'slide' || e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
 		slide.down(e, root);
@@ -177,12 +181,21 @@
 		if (!expandable || e.detail === 0) return;
 		e.preventDefault();
 		e.stopPropagation();
-		if (expand === 'tap') {
+		if (mode === 'tap') {
 			if (open) hide();
 			else show();
 		}
 	}
 
+	$effect(() => {
+		if (!browser || typeof matchMedia !== 'function') return;
+		const mq = matchMedia('(pointer: coarse)');
+		const sync = () => (coarse = mq.matches);
+		sync();
+		mq.addEventListener?.('change', sync);
+		return () => mq.removeEventListener?.('change', sync);
+	});
+
 	$effect(() => {
 		if (!expandable && open) hide();
 	});
@@ -229,7 +242,7 @@
 	class:stacked
 	data-stack={stack}
 	data-stacked={stacked || undefined}
-	data-expand={expandable ? expand : undefined}
+	data-expand={expandable ? mode : undefined}
 	{...rest}
 	onpointerdown={onPointerDown}
 	onpointermove={onPointerMove}
@@ -249,13 +262,13 @@
 	{/if}
 </span>
 
-{#if expand !== 'none' && items}
+{#if mode !== 'none' && items}
 	<!-- `manual`: an `auto` popover would light-dismiss on the captured slide release. -->
 	<div
 		bind:this={panel}
 		popover="manual"
 		class="expand-panel"
-		data-expand-panel={expand}
+		data-expand-panel={mode}
 		role="group"
 		aria-label={expandLabel}
 		ontoggle={onToggle}
@@ -291,10 +304,12 @@
 		display: inline-grid;
 		grid-template-columns: repeat(2, 1rem);
 		grid-auto-rows: 1rem;
-		gap: 1px;
+		gap: var(--sp-px);
 		place-items: center;
 	}
+	/* Cells clip, so any focus ring inside draws inset. */
 	.stacked > :global(*) {
+		--focus-ring-offset: var(--focus-ring-offset-inset);
 		width: 1rem;
 		height: 1rem;
 		max-width: 1rem;
@@ -304,7 +319,7 @@
 		justify-content: center;
 		overflow: hidden;
 		font-size: var(--fs-xs);
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.glyph-stack[data-expand] {
 		cursor: pointer;
@@ -325,18 +340,24 @@
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
 		box-shadow: var(--shadow-md);
+		opacity: 0;
+		scale: var(--enter-scale);
+		transition:
+			opacity var(--dur-base) var(--ease-out),
+			scale var(--dur-base) var(--ease-out);
 	}
 	.expand-panel:popover-open {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(var(--glyph-stack-tile, 3rem), 1fr));
 		grid-auto-rows: minmax(var(--glyph-stack-tile, 3rem), 1fr);
 		gap: var(--sp-1);
-		animation: glyph-expand 0.12s var(--ease);
+		opacity: 1;
+		scale: 1;
 	}
-	@keyframes glyph-expand {
-		from {
+	@starting-style {
+		.expand-panel:popover-open {
 			opacity: 0;
-			transform: scale(0.6);
+			scale: var(--enter-scale);
 		}
 	}
 	.tile {
@@ -344,13 +365,16 @@
 		align-items: center;
 		justify-content: center;
 		padding: var(--sp-1);
-		border-radius: var(--r-sm);
+		border-radius: calc(var(--r-md) - var(--sp-1) - 1px);
 		background: var(--surface);
-		transition: background 0.08s var(--ease);
+		transition:
+			background var(--dur-fast) var(--ease),
+			box-shadow var(--dur-fast) var(--ease);
 	}
 	.tile.armed {
 		background: color-mix(in srgb, var(--accent) 18%, var(--surface));
 		box-shadow: inset 0 0 0 2px var(--accent);
+		transition-duration: var(--dur-instant);
 	}
 	.tile-body {
 		display: inline-flex;

package/dist/components/molecules/IconButton.svelte

@@ -26,8 +26,7 @@
 		tone?: Tone | 'none';
 		// Outlined `--box-lg` square icon-chip (header/toolbar actions).
 		chip?: boolean;
-		// Shared square box scale (`--box-xs/sm/md/lg`); default `md` is the classic
-		// 2.25rem box. Forwarded to Button.
+		// Shared square box scale (`--box-xs/sm/md/lg`). Forwarded to Button.
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		// SVG glyph px. Emoji text glyphs render at ×1.35 of it.
 		size?: number;
@@ -63,6 +62,8 @@
 		 *  in the accessible name. */
 		count?: number;
 		countMax?: number;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 	};
 
@@ -90,6 +91,7 @@
 		loading = false,
 		count,
 		countMax,
+		sound = true,
 		disabled = false,
 		onclick,
 		class: klass = '',
@@ -118,6 +120,7 @@
 	{loading}
 	{count}
 	{countMax}
+	{sound}
 	{title}
 	{onclick}
 	icon={!inline && !chip && !showLabel}
@@ -166,6 +169,6 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 </style>

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

@@ -40,6 +40,8 @@ type IconButtonProps = HTMLButtonAttributes & {
      *  in the accessible name. */
     count?: number;
     countMax?: number;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
 };
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;

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;