@dorsk/tsumikit 0.74.0 → 0.75.0

package/dist/components/molecules/RadioGroup.svelte

@@ -14,6 +14,7 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { playSound } from '../../sound';
 
 	// Native <input type="radio"> sharing one `name`: the browser handles
 	// single-selection, arrow keys and form participation. `variant="rows"`
@@ -28,6 +29,7 @@
 		action,
 		below,
 		onfocuschange,
+		sound = true,
 		class: klass = ''
 	}: {
 		options: RadioOption[];
@@ -41,6 +43,8 @@
 		/** Fires once each time a different option becomes active — by keyboard
 		 *  focus or by pointer hover — so a consumer can drive a preview pane. */
 		onfocuschange?: (value: string) => void;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		class?: string;
 	} = $props();
 
@@ -53,6 +57,7 @@
 		active = v;
 		onfocuschange?.(v);
 	}
+	const onchange = () => playSound('click', sound);
 </script>
 
 <div
@@ -76,6 +81,7 @@
 					aria-label={o.label}
 					aria-describedby={descId(o)}
 					onfocus={() => activate(o.value)}
+					{onchange}
 				/>
 				{#if o.description}<span class="sr-only" id={descId(o)}>{o.description}</span>{/if}
 				<span class="swatch-chip" aria-hidden="true" style="--swatch: {o.color ?? 'var(--accent)'}"></span>
@@ -92,6 +98,7 @@
 							disabled={o.disabled}
 							aria-describedby={descId(o)}
 							onfocus={() => activate(o.value)}
+							{onchange}
 						/>
 						<span class="dot-ctl" aria-hidden="true"></span>
 						<span class="texts">
@@ -117,6 +124,7 @@
 					disabled={o.disabled}
 					aria-describedby={descId(o)}
 					onfocus={() => activate(o.value)}
+					{onchange}
 				/>
 				<span class="dot-ctl" aria-hidden="true"></span>
 				<span class="texts">
@@ -149,7 +157,7 @@
 	}
 	.radio.disabled,
 	.row.disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 	}
 	input {
 		position: absolute;
@@ -161,40 +169,47 @@
 	.dot-ctl {
 		position: relative;
 		flex: none;
-		width: 1.15rem;
-		height: 1.15rem;
-		margin-top: 0.1rem;
+		width: var(--chip-sm);
+		height: var(--chip-sm);
+		margin-top: var(--sp-px);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-pill);
 		background: var(--bg);
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) var(--ease);
 	}
 	.dot-ctl::after {
 		content: '';
 		position: absolute;
-		inset: 50%;
-		width: 0.55rem;
-		height: 0.55rem;
-		margin: -0.275rem 0 0 -0.275rem;
+		inset: 0;
+		width: var(--sp-2);
+		height: var(--sp-2);
+		margin: auto;
 		border-radius: var(--r-pill);
 		background: var(--accent);
-		transform: scale(0);
-		transition: transform 0.1s var(--ease);
+		opacity: 0;
+		scale: 0.5;
+		transition:
+			opacity var(--dur-exit-fast) var(--ease-out),
+			scale var(--dur-exit-fast) var(--ease-out);
 	}
 	input:checked + .dot-ctl {
 		border-color: var(--accent);
 	}
 	input:checked + .dot-ctl::after {
-		transform: scale(1);
+		opacity: 1;
+		scale: 1;
+		transition:
+			opacity var(--dur-spring) var(--ease-spring),
+			scale var(--dur-spring) var(--ease-spring);
 	}
 	input:focus-visible + .dot-ctl {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.texts {
 		display: flex;
 		flex-direction: column;
-		gap: 1px;
+		gap: var(--sp-px);
 		min-width: 0;
 	}
 	.hint {
@@ -218,8 +233,8 @@
 		border: 1px solid var(--border);
 		border-radius: var(--r-md);
 		transition:
-			border-color 0.12s var(--ease),
-			background-color 0.12s var(--ease);
+			border-color var(--dur-fast) var(--ease),
+			background-color var(--dur-fast) var(--ease);
 	}
 	.row.selected {
 		border-color: var(--accent-dim);
@@ -240,7 +255,7 @@
 		min-width: 0;
 	}
 	.row .label-text {
-		font-weight: 600;
+		font-weight: var(--fw-semibold);
 	}
 	.note {
 		font-size: var(--fs-xs);
@@ -287,17 +302,17 @@
 		cursor: pointer;
 	}
 	.swatch.disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.swatch-chip {
-		width: 1.6rem;
-		height: 1.6rem;
+		width: var(--chip-md);
+		height: var(--chip-md);
 		border-radius: var(--r-pill);
 		background: var(--swatch);
 		border: 2px solid transparent;
 		box-shadow: 0 0 0 1px var(--border-strong);
-		transition: box-shadow 0.12s var(--ease);
+		transition: box-shadow var(--dur-fast) var(--ease);
 	}
 	.swatch input:checked + .swatch-chip {
 		border-color: var(--bg);
@@ -305,6 +320,6 @@
 	}
 	.swatch input:focus-visible + .swatch-chip {
 		outline: var(--focus-ring);
-		outline-offset: 2px;
+		outline-offset: var(--focus-ring-offset);
 	}
 </style>

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

@@ -22,6 +22,8 @@ type $$ComponentProps = {
     /** Fires once each time a different option becomes active — by keyboard
      *  focus or by pointer hover — so a consumer can drive a preview pane. */
     onfocuschange?: (value: string) => void;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     class?: string;
 };
 declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/molecules/SectionHeader.svelte

@@ -86,6 +86,7 @@
 	class:sh-sticky={sticky}
 	class:sh-uppercase={uppercase}
 	class:sh-open={open}
+	class:sh-collapsible={collapsible}
 	{...rest}
 >
 	<div class="sh-row">
@@ -221,7 +222,7 @@
 		display: inline-flex;
 		flex: none;
 		color: var(--sh-tone);
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.sh-swatch {
 		flex: none;
@@ -263,23 +264,27 @@
 		border-radius: var(--r-sm);
 	}
 	.sh-toggle:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
 	}
 	.section-header :global(.sh-chevron) {
 		flex: none;
 		color: var(--text-muted);
-		transition: transform 0.15s var(--ease);
+		transition: rotate var(--dur-base) var(--ease-out);
 	}
 	.sh-open :global(.sh-chevron) {
-		transform: rotate(90deg);
+		rotate: 90deg;
 	}
 	.sh-panel {
 		margin-top: var(--sp-3);
+		transition:
+			opacity var(--dur-base) var(--ease-out),
+			translate var(--dur-base) var(--ease-out);
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.section-header :global(.sh-chevron) {
-			transition: none;
+	@starting-style {
+		.sh-collapsible.sh-open .sh-panel {
+			opacity: 0;
+			translate: 0 calc(-1 * var(--shift-xs));
 		}
 	}
 </style>

package/dist/components/molecules/SeekSlider.svelte

@@ -7,6 +7,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { describeMediaTime, formatMediaTime, isLiveDuration } from '../../media-time';
+	import { playSound } from '../../sound';
 
 	type Own = {
 		/** Position in seconds. Updated only on commit, never while dragging. */
@@ -22,6 +23,8 @@
 		disabled?: boolean;
 		size?: 'sm' | 'md';
 		label?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		formatTime?: (seconds: number, ref?: number) => string;
 		/** Fired on every pointer move while scrubbing with the previewed time. */
 		oninput?: (seconds: number) => void;
@@ -44,6 +47,7 @@
 		disabled = false,
 		size = 'md',
 		label = 'Seek',
+		sound = true,
 		formatTime = formatMediaTime,
 		oninput,
 		onchange,
@@ -77,6 +81,7 @@
 					.filter(([a, b]) => b > a)
 	);
 	const valueText = $derived(describeMediaTime(shown, live ? null : duration, formatTime));
+	const discrete = $derived(duration > 0 && duration / step <= 20);
 
 	function fracAt(el: HTMLElement, clientX: number) {
 		const r = el.getBoundingClientRect();
@@ -125,6 +130,7 @@
 		const el = e.currentTarget as HTMLElement;
 		if (pointerId === e.pointerId) {
 			preview = fracAt(el, e.clientX) * duration;
+			if (discrete) playSound('tick', sound);
 			oninput?.(preview);
 			return;
 		}
@@ -182,6 +188,7 @@
 		}
 		if (next === null) return;
 		e.preventDefault();
+		playSound('tick', sound);
 		commit(next);
 	}
 </script>
@@ -233,8 +240,9 @@
 <style>
 	.seek {
 		--seek-track: 3px;
-		--seek-track-active: 5px;
+		--seek-track-grow: 1.6;
 		--seek-thumb: 12px;
+		--seek-halo: 0 0 0 4px color-mix(in srgb, var(--seek-accent) 20%, transparent);
 		--seek-slab: 1.25rem;
 		--seek-accent: var(--slider-accent, var(--accent));
 		position: relative;
@@ -249,7 +257,6 @@
 	}
 	.seek--md {
 		--seek-track: 4px;
-		--seek-track-active: 6px;
 		--seek-thumb: 14px;
 		--seek-slab: 1.5rem;
 	}
@@ -259,8 +266,8 @@
 		}
 	}
 	.seek--inert {
-		cursor: default;
-		opacity: 0.45;
+		cursor: not-allowed;
+		opacity: var(--disabled-opacity);
 	}
 	.seek-track {
 		position: absolute;
@@ -271,19 +278,12 @@
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
 		overflow: hidden;
-		transition:
-			height 120ms var(--ease),
-			margin-top 120ms var(--ease);
+		transform-origin: center;
+		transition: scale var(--dur-fast) var(--ease);
 	}
-	.seek:hover .seek-track,
 	.seek:focus-visible .seek-track,
 	.seek--dragging .seek-track {
-		height: var(--seek-track-active);
-		margin-top: calc(var(--seek-track-active) / -2);
-	}
-	.seek--inert:hover .seek-track {
-		height: var(--seek-track);
-		margin-top: calc(var(--seek-track) / -2);
+		scale: 1 var(--seek-track-grow);
 	}
 	.seek-buffered,
 	.seek-played {
@@ -319,28 +319,45 @@
 		top: 0;
 		width: var(--seek-thumb);
 		height: var(--seek-thumb);
-		border-radius: 50%;
+		border-radius: var(--r-pill);
 		background: var(--seek-accent);
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
-		transform: translate(-50%, -50%) scale(0.6);
+		transform: translate(-50%, -50%);
+		scale: 0.6;
 		opacity: 0;
 		transition:
-			opacity 120ms var(--ease),
-			transform 120ms var(--ease);
+			opacity var(--dur-fast) var(--ease),
+			scale var(--dur-press) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease);
 	}
-	.seek:hover .seek-thumb,
 	.seek:focus-visible .seek-thumb,
 	.seek--dragging .seek-thumb {
 		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
+		scale: 1;
+	}
+	.seek--dragging .seek-thumb {
+		scale: 1.15;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.seek:not(.seek--inert):hover .seek-track {
+			scale: 1 var(--seek-track-grow);
+		}
+		.seek:not(.seek--inert):hover .seek-thumb {
+			opacity: 1;
+			scale: 1;
+			box-shadow: var(--shadow-sm), var(--seek-halo);
+		}
+		.seek--dragging .seek-thumb {
+			scale: 1.15;
+		}
 	}
 	.seek--inert .seek-thumb {
 		opacity: 0;
 	}
 	.seek:focus-visible .seek-thumb {
 		outline: var(--focus-ring);
-		outline-offset: 2px;
+		outline-offset: var(--focus-ring-offset);
 	}
 	.seek-tip {
 		position: absolute;
@@ -361,10 +378,4 @@
 		font-variant-numeric: tabular-nums;
 		white-space: nowrap;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.seek-track,
-		.seek-thumb {
-			transition: none;
-		}
-	}
 </style>

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

@@ -19,6 +19,8 @@ type Own = {
     disabled?: boolean;
     size?: 'sm' | 'md';
     label?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     formatTime?: (seconds: number, ref?: number) => string;
     /** Fired on every pointer move while scrubbing with the previewed time. */
     oninput?: (seconds: number) => void;