@dorsk/tsumikit 0.74.0 → 0.76.0

package/README.md

@@ -305,7 +305,7 @@ controlled mode, `chevron` start/end/false, `size="compact"` for strip rows, nat
 leading/trailing controls fused into one bordered unit, see below),
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
 ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme),
-EmojiPicker (popover with a searchable EN+FR glyph catalogue, grouped tabs, roving-tabindex grid; pass `groups` to swap the catalogue), FontScalePicker (popover with a stepped slider across the five text sizes), SectionHeader, KeyValue, LoadMore,
+EmojiPicker (popover with a searchable EN+FR glyph catalogue, grouped tabs, roving-tabindex grid; pass `groups` to swap the catalogue), FontScalePicker (popover with a stepped slider across the five text sizes), SoundSettings (popover with the sound switch, volume and preview; see [Sound](#sound-opt-in)), SectionHeader, KeyValue, LoadMore,
 GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
 auto/never/glyph degrades to icons inside a narrow `.cq` container),
 CapBar (consumption track with a draggable, keyboard-steppable cap handle that
@@ -1043,6 +1043,43 @@ wider than its container switches to the `scroll` layout until it fits again
 forks `variables.css` must keep them (Button `control`, Select `sm`, every `box`)
 or those controls render with unresolved sizes.
 
+## Sound (opt-in)
+
+UI sound effects are **off by default** and nothing is loaded while they stay off:
+no audio code, no `AudioContext`, no listeners. The user opts in with
+`<SoundSettings />` (a speaker popover with an on/off switch, a volume slider and a
+preview button; `size="sm"` for toolbars) or your own UI bound to the `sound` store.
+The choice persists in `localStorage` under `tsumikit-sound`.
+
+```svelte
+<script>
+	import { Button, SoundSettings, sound } from '@dorsk/tsumikit';
+</script>
+
+<SoundSettings size="sm" />
+<Button sound={false}>Silent button</Button>
+<Button onclick={() => sound.play('success')}>Play success</Button>
+```
+
+- **Palette**: `click` (buttons, selections, menu items), `toggle-on` / `toggle-off`
+  (Switch, Checkbox, Toggle), `open` / `close` (Modal, Drawer, Popover, Menu,
+  Accordion…), `success` / `error` (ok and error toasts, CopyButton), `tick` (slider
+  steps, pull-to-refresh threshold). Every sound is a short soft synth tone, under
+  120 ms for interactions and under 160 ms for `success` / `error`; nothing is hover
+  driven.
+- **Per instance**: every hooked component takes `sound={false}` to stay silent.
+- **Your events**: `sound.play('success' | 'error' | …)` goes through the same gates
+  (enabled, volume, hidden tab, user activation), so an app can fire feedback on its
+  own saves and failures.
+- **Reduced motion**: with `prefers-reduced-motion: reduce` only `success` and
+  `error` play; decorative sounds are muted. `sound.muted` tells why nothing plays
+  (`'off' | 'reduced-motion' | null`) and `SoundSettings` shows it as a hint.
+- **Weight**: the synth is a separate lazy chunk of about 0.7 KB gzipped, imported
+  on the first play (or when the setting is turned on, so a gesture can unlock audio
+  on Safari). What components import is a ~0.3 KB gate plus the store.
+- Calls within one frame coalesce (the highest priority wins: error > success >
+  open/close > toggle > click > tick) and the same sound plays at most once per 50 ms.
+
 ## Built on the platform
 
 Interactive components lean on modern web features rather than reimplementing

package/dist/autoresize.d.ts

@@ -9,6 +9,8 @@
 export declare function rowsHeight(node: HTMLTextAreaElement, rows: number): number;
 /** The `rows` attribute as a height floor; a single row has none. */
 export declare function rowsFloor(node: HTMLTextAreaElement): number;
+/** Vertical border a border-box `height` must cover on top of scrollHeight. */
+export declare function borderBlock(node: HTMLTextAreaElement): number;
 export declare function autoresize(node: HTMLTextAreaElement, _value?: string): {
     update(): void;
     destroy(): void;

package/dist/autoresize.js

@@ -21,6 +21,13 @@ export function rowsFloor(node) {
     const rows = node.rows || 0;
     return rows <= 1 ? 0 : rowsHeight(node, rows);
 }
+/** Vertical border a border-box `height` must cover on top of scrollHeight. */
+export function borderBlock(node) {
+    const cs = getComputedStyle(node);
+    if (cs.boxSizing !== 'border-box')
+        return 0;
+    return (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
+}
 export function autoresize(node, _value) {
     const resize = () => {
         // A manual drag handle may set `min-height` as a user-chosen floor; grow
@@ -28,7 +35,7 @@ export function autoresize(node, _value) {
         // bound, so dragging shorter than the text can't shrink past it.
         const floor = Math.max(parseFloat(node.style.minHeight) || 0, rowsFloor(node));
         node.style.height = 'auto';
-        node.style.height = `${Math.max(node.scrollHeight, floor)}px`;
+        node.style.height = `${Math.max(node.scrollHeight + borderBlock(node), floor)}px`;
     };
     resize();
     node.addEventListener('input', resize);

package/dist/components/atoms/Artwork.svelte

@@ -107,8 +107,9 @@
 		color: var(--text-muted);
 		container-type: inline-size;
 		transition:
-			border-color 0.12s var(--ease),
-			box-shadow 0.12s var(--ease);
+			border-color var(--dur-fast) var(--ease),
+			box-shadow var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease-out);
 	}
 	.r-sm {
 		border-radius: var(--r-sm);
@@ -122,9 +123,15 @@
 	.r-pill {
 		border-radius: var(--r-pill);
 	}
-	.hover:hover {
-		border-color: var(--border-strong);
-		box-shadow: var(--shadow-md);
+	@media (hover: hover) and (pointer: fine) {
+		.hover:hover {
+			border-color: var(--border-strong);
+			box-shadow: var(--shadow-md);
+		}
+	}
+	.hover:active {
+		scale: var(--press-scale-lg);
+		transition-duration: var(--dur-press);
 	}
 	.img {
 		position: absolute;

package/dist/components/atoms/Avatar.svelte

@@ -80,7 +80,7 @@
 		border-radius: var(--r-pill);
 		font-weight: var(--fw-semibold);
 		font-size: calc(var(--avatar-size) * 0.46);
-		line-height: 1;
+		line-height: var(--lh-none);
 		background: var(--avatar-bg, var(--bg-elevated-2));
 		color: var(--avatar-fg, var(--text-muted));
 		user-select: none;

package/dist/components/atoms/Badge.svelte

@@ -179,15 +179,20 @@
 		display: flex;
 		width: 100%;
 	}
+	/* Chip heights sit on the 4px grid (md 24 / sm 20 / xs 16) through a
+	   min-height, so the leading never decides the box. */
 	.badge {
+		--badge-h: var(--chip-md);
 		display: inline-flex;
 		align-items: center;
 		gap: var(--sp-1);
-		padding: 0.15rem var(--sp-2);
+		min-height: var(--badge-h);
+		padding: 0 var(--sp-2);
 		border-radius: var(--badge-radius, var(--r-pill));
 		font-size: var(--badge-fs, var(--fs-xs));
 		font-weight: var(--badge-fw, var(--fw-medium));
-		line-height: 1.4;
+		line-height: var(--lh-snug);
+		--icon-size: var(--icon-xs);
 		background: var(--badge-bg, var(--bg-elevated-2));
 		color: var(--badge-fg, var(--text-muted));
 		border: 1px solid var(--badge-border, var(--border));
@@ -197,13 +202,15 @@
 	.badge-sm,
 	.badge-xs {
 		font-size: var(--badge-fs, var(--fs-xs));
-		gap: 0.15rem;
+		gap: var(--sp-0-5);
 	}
 	.badge-sm {
-		padding: 0 0.4rem;
+		--badge-h: var(--chip-sm);
+		padding: 0 var(--sp-1-5);
 	}
 	.badge-xs {
-		padding: 0.05rem var(--sp-2);
+		--badge-h: var(--chip-xs);
+		line-height: var(--lh-none);
 	}
 	.toned {
 		color: var(--badge-fg, var(--badge-tone));
@@ -211,6 +218,7 @@
 		background: var(--badge-bg, color-mix(in srgb, var(--badge-tone) 12%, transparent));
 	}
 	.text {
+		min-height: 0;
 		padding: 0;
 		border-color: transparent;
 		background: none;
@@ -233,7 +241,7 @@
 	.numeric {
 		font-variant-numeric: tabular-nums;
 		min-width: var(--badge-min-size, 1.5em);
-		min-height: var(--badge-min-size, auto);
+		min-height: var(--badge-min-size, var(--badge-h));
 		justify-content: center;
 	}
 	.truncate {
@@ -255,25 +263,36 @@
 	.interactive {
 		cursor: pointer;
 		transition:
-			border-color 0.12s var(--ease),
-			color 0.12s var(--ease);
+			border-color var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease-out);
 	}
-	.interactive:hover {
-		border-color: var(--border-strong);
-		color: var(--text);
+	@media (hover: hover) and (pointer: fine) {
+		.interactive:hover {
+			border-color: var(--border-strong);
+			color: var(--text);
+		}
+		.interactive.active:hover {
+			color: var(--text-on-accent);
+			border-color: var(--badge-tone, var(--accent));
+			filter: brightness(1.08);
+		}
 	}
-	.interactive.active:hover {
-		color: var(--text-on-accent);
-		border-color: var(--badge-tone, var(--accent));
-		filter: brightness(1.08);
+	.interactive:active:not(:disabled, [aria-disabled='true']) {
+		scale: var(--press-scale);
+		transition-duration: var(--dur-press);
 	}
 	.interactive:focus-visible {
-		outline: 2px solid var(--badge-tone, var(--accent));
-		outline-offset: 2px;
+		outline: var(--focus-ring-width) solid var(--badge-tone, var(--accent));
+		outline-offset: var(--focus-ring-offset);
 	}
 	.removed {
 		opacity: 0.55;
 		text-decoration: line-through;
+		transition:
+			opacity var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease),
+			text-decoration-color var(--dur-fast) var(--ease);
 	}
 	.removed .action {
 		text-decoration: none;
@@ -282,19 +301,36 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		margin: 0 -0.15rem 0 0;
-		padding: 0 0.1rem;
+		margin: 0 calc(-1 * var(--sp-0-5)) 0 0;
+		padding: 0 var(--sp-0-5);
 		border: 0;
+		border-radius: var(--r-xs);
 		background: none;
 		color: inherit;
 		font: inherit;
-		line-height: 1;
+		line-height: var(--lh-none);
 		cursor: pointer;
 		opacity: 0.6;
-		transition: opacity 0.12s var(--ease);
+		transition:
+			opacity var(--dur-fast) var(--ease),
+			background var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease-out);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.action:hover {
+			opacity: 1;
+			background: color-mix(in srgb, currentColor 12%, transparent);
+			transition-duration: var(--dur-instant);
+		}
+	}
+	.action:active {
+		scale: var(--press-scale-sm);
+		transition-duration: var(--dur-press);
 	}
-	.action:hover {
-		opacity: 1;
+	/* The ring sits inside: a truncating badge clips its box. */
+	.action:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
 	}
 	@media (pointer: coarse) {
 		.action {