@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/components/molecules/MotionSettings.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import Button from '../atoms/Button.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import Select from '../atoms/Select.svelte';
+	import Popover from './Popover.svelte';
+	import { FX, FX_FAMILIES, type FxFamily, type FxSettings } from '../../fx';
+	import { fx } from '../../stores/fx.svelte';
+
+	type TriggerChrome = Pick<
+		ComponentProps<typeof Popover>,
+		'variant' | 'tone' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'
+	>;
+
+	let {
+		families = FX_FAMILIES,
+		size = 'md',
+		box = size,
+		placement = 'bottom-end',
+		variant,
+		tone,
+		pill,
+		control,
+		block,
+		bare,
+		hitArea,
+		disabled,
+		label = 'Motion',
+		resetLabel = 'Reset',
+		reducedMotionHint = 'Your system asks for reduced motion: effects show their static fallback.',
+		onchange,
+		class: klass = '',
+		style: styleProp = '',
+	}: TriggerChrome & {
+		/** Restrict and order the offered families. */
+		families?: readonly FxFamily[];
+		size?: 'sm' | 'md';
+		label?: string;
+		resetLabel?: string;
+		reducedMotionHint?: string;
+		onchange?: (settings: FxSettings) => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const uid = $props.id();
+	let reduced = $state(false);
+
+	$effect(() => {
+		const mq = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)');
+		if (!mq) return;
+		reduced = mq.matches;
+		const on = (e: MediaQueryListEvent) => (reduced = e.matches);
+		mq.addEventListener?.('change', on);
+		return () => mq.removeEventListener?.('change', on);
+	});
+
+	const offCount = $derived(families.filter((f) => fx.settings[f] === 'none').length);
+
+	function pick(family: FxFamily, value: string) {
+		fx.set(family, value);
+		onchange?.(fx.settings);
+	}
+</script>
+
+<Popover
+	{label}
+	{placement}
+	{box}
+	{variant}
+	{tone}
+	{pill}
+	{control}
+	{block}
+	{bare}
+	{hitArea}
+	{disabled}
+	triggerClass={klass}
+	style={styleProp}
+	sound={false}
+>
+	{#snippet trigger()}
+		<span
+			data-tsu="MotionSettings"
+			class="glyph"
+			title={offCount === families.length ? `${label}: off` : label}
+		>
+			<Icon name="zap" size={size === 'sm' ? 16 : 18} />
+		</span>
+	{/snippet}
+	<div class="panel" class:panel-sm={size === 'sm'}>
+		<div class="grid">
+			{#each families as family (family)}
+				<label class="name" for="{uid}-{family}">{FX[family].label}</label>
+				<Select
+					id="{uid}-{family}"
+					size="sm"
+					value={fx.settings[family]}
+					options={FX[family].variants.map((v) => ({ value: v.id, label: v.label }))}
+					onchange={(e) => pick(family, (e.currentTarget as HTMLSelectElement).value)}
+				/>
+			{/each}
+		</div>
+		<div class="row">
+			{#if reduced}
+				<div class="hint" aria-live="polite">{reducedMotionHint}</div>
+			{/if}
+			<Button
+				size="sm"
+				variant="ghost"
+				class="reset"
+				disabled={fx.isDefault}
+				sound={false}
+				onclick={() => {
+					fx.reset();
+					onchange?.(fx.settings);
+				}}>{resetLabel}</Button
+			>
+		</div>
+	</div>
+</Popover>
+
+<style>
+	.glyph {
+		display: inline-flex;
+		line-height: var(--lh-none);
+	}
+	.panel {
+		width: min(19rem, calc(100vw - var(--sp-6)));
+		box-sizing: border-box;
+		display: grid;
+		gap: var(--sp-2);
+		padding: var(--sp-3);
+		font-size: 0.875rem;
+		line-height: var(--lh-snug);
+	}
+	.panel-sm {
+		width: min(17rem, calc(100vw - var(--sp-6)));
+		padding: var(--sp-2) var(--sp-3);
+		font-size: 0.8125rem;
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		align-items: center;
+		gap: var(--sp-1) var(--sp-3);
+	}
+	.name {
+		color: var(--text-muted);
+		white-space: nowrap;
+	}
+	.row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+	}
+	.row > :global(.reset) {
+		margin-inline-start: auto;
+	}
+	.hint {
+		flex: 1 1 0;
+		min-width: 0;
+		font-size: 0.75rem;
+		color: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import Popover from './Popover.svelte';
+import { type FxFamily, type FxSettings } from '../../fx';
+type TriggerChrome = Pick<ComponentProps<typeof Popover>, 'variant' | 'tone' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'>;
+type $$ComponentProps = TriggerChrome & {
+    /** Restrict and order the offered families. */
+    families?: readonly FxFamily[];
+    size?: 'sm' | 'md';
+    label?: string;
+    resetLabel?: string;
+    reducedMotionHint?: string;
+    onchange?: (settings: FxSettings) => void;
+    class?: string;
+    style?: string;
+};
+declare const MotionSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type MotionSettings = ReturnType<typeof MotionSettings>;
+export default MotionSettings;

package/dist/components/molecules/OptionButton.svelte

@@ -95,9 +95,10 @@
 		flex-direction: column;
 		gap: var(--sp-0-5);
 		padding: var(--sp-2);
-		background: var(--bg);
-		border: 1px solid var(--border-strong);
+		background: var(--control-fill);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-md);
+		box-shadow: var(--control-shadow);
 		color: var(--text);
 		text-align: left;
 		white-space: normal;
@@ -107,6 +108,7 @@
 			background var(--dur-fast) ease,
 			border-color var(--dur-fast) ease,
 			color var(--dur-fast) ease,
+			translate var(--dur-fast) ease,
 			scale var(--opt-scale-dur) var(--ease-out);
 	}
 	.opt:disabled {
@@ -154,8 +156,11 @@
 		color: var(--oc);
 	}
 	@media (hover: hover) and (pointer: fine) {
+		.opt:hover:not(:disabled) {
+			translate: 0 calc(-1 * var(--hover-lift));
+		}
 		.opt:hover:not(:disabled):not(.selected) {
-			border-color: var(--border-strong);
+			border-color: var(--control-edge);
 		}
 		.opt.selected:hover:not(:disabled) {
 			border-color: var(--oc);

package/dist/components/molecules/Pagination.svelte

@@ -189,7 +189,7 @@
 		min-width: var(--box-md);
 		height: var(--box-md);
 		padding: 0 var(--control-px-md);
-		border: 1px solid transparent;
+		border: var(--edge-width) solid transparent;
 		border-radius: var(--r-md);
 		background: transparent;
 		color: var(--text-muted);
@@ -201,6 +201,7 @@
 			background var(--dur-fast) ease,
 			border-color var(--dur-fast) ease,
 			color var(--dur-fast) ease,
+			translate var(--dur-fast) ease,
 			scale var(--page-scale-dur) var(--ease-out);
 	}
 	.page:active {
@@ -211,6 +212,7 @@
 		.page:hover {
 			background: var(--bg-elevated-2);
 			color: var(--text);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 	}
 	.page.on {

package/dist/components/molecules/Popover.svelte

@@ -392,7 +392,7 @@
 		min-height: var(--pop-box, var(--box-sm));
 		min-width: var(--pop-box, var(--box-sm));
 		padding: var(--pop-trigger-pad, var(--sp-1));
-		border: 1px solid var(--pop-trigger-border, transparent);
+		border: var(--edge-width) solid var(--pop-trigger-border, transparent);
 		border-radius: var(--pop-trigger-radius, var(--r-md));
 		background: var(--pop-trigger-bg, transparent);
 		color: var(--pop-trigger-fg, var(--text));
@@ -403,6 +403,8 @@
 			background-color var(--dur-fast) var(--ease),
 			border-color var(--dur-fast) var(--ease),
 			color var(--dur-fast) var(--ease),
+			box-shadow var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease),
 			scale var(--pop-scale-dur) var(--ease-out);
 	}
 	.pop-trigger:not(.bare, .trigger-toggle):active:not(:disabled, .is-disabled) {
@@ -418,11 +420,14 @@
 		}
 		.pop-trigger.canonical:hover:not(:disabled) {
 			border-color: var(--accent);
-			background: var(--surface);
+			background: var(--btn-fill);
+			box-shadow: var(--btn-shadow-hover);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 		.pop-trigger.trigger-primary:hover:not(:disabled) {
-			background: var(--accent);
-			border-color: var(--accent);
+			background: var(--btn-primary-fill);
+			border-color: var(--btn-primary-edge);
+			box-shadow: var(--btn-primary-shadow-hover);
 			filter: brightness(1.08);
 		}
 		.pop-trigger.trigger-ghost:hover:not(:disabled) {
@@ -453,8 +458,9 @@
 		min-width: 0;
 		min-height: var(--control-height-default);
 		padding: var(--pop-trigger-pad, var(--sp-2) var(--btn-px-md));
-		border-color: var(--pop-trigger-border, var(--border-strong));
-		background: var(--pop-trigger-bg, var(--surface));
+		border-color: var(--pop-trigger-border, var(--btn-edge));
+		background: var(--pop-trigger-bg, var(--btn-fill));
+		box-shadow: var(--btn-shadow);
 		font-weight: var(--fw-medium);
 		font-size: var(--pop-trigger-size, var(--control-fs-md));
 		line-height: var(--lh-none);
@@ -462,8 +468,9 @@
 		white-space: nowrap;
 	}
 	.pop-trigger.trigger-primary {
-		background: var(--pop-trigger-bg, var(--accent));
-		border-color: var(--pop-trigger-border, var(--accent));
+		background: var(--pop-trigger-bg, var(--btn-primary-fill));
+		border-color: var(--pop-trigger-border, var(--btn-primary-edge));
+		box-shadow: var(--btn-primary-shadow);
 		color: var(--pop-trigger-fg, var(--text-on-accent));
 		font-weight: var(--fw-semibold);
 	}
@@ -620,11 +627,11 @@
 		min-width: 10rem;
 		max-width: min(22rem, calc(100vw - 2 * var(--sp-3)));
 		padding: var(--sp-1);
-		background: var(--bg-elevated);
+		background: var(--raised-fill);
 		color: var(--text);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-md);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		transform-origin: var(--tsu-origin, top left);
 		opacity: 0;
 		scale: var(--enter-scale);

package/dist/components/molecules/Prose.svelte

@@ -76,15 +76,15 @@
 		font-family: var(--font-mono);
 		font-size: 0.92em;
 		color: var(--md-code, var(--text));
-		background: var(--md-code-bg, var(--bg-elevated-2));
+		background: var(--md-code-bg, var(--surface-fill-2));
 		padding: 0.1em 0.35em;
 		border-radius: var(--r-sm);
 	}
 	.prose :global(pre) {
 		margin: 0;
 		padding: var(--sp-3);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
+		background: var(--surface-fill);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		overflow-x: auto;
 		font-family: var(--font-mono);
@@ -119,12 +119,12 @@
 	.prose :global(th),
 	.prose :global(td) {
 		padding: var(--sp-1) var(--sp-2);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		text-align: left;
 		vertical-align: top;
 	}
 	.prose :global(th) {
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		color: var(--text-muted);
 		font-weight: var(--fw-semibold);
 	}
@@ -135,6 +135,6 @@
 	}
 	.prose :global(hr) {
 		border: 0;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 </style>

package/dist/components/molecules/RadialMenu.svelte

@@ -542,11 +542,11 @@
 		width: max(var(--radial-petal-size, 3.5rem), var(--touch-target));
 		height: max(var(--radial-petal-size, 3.5rem), var(--touch-target));
 		padding: 0 var(--sp-0-5);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: 50%;
-		background: var(--bg-elevated);
+		background: var(--raised-fill);
 		color: var(--text);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		font-size: var(--fs-xs);
 		line-height: var(--lh-heading);
 		translate: -50% -50%;

package/dist/components/molecules/RadioGroup.svelte

@@ -172,9 +172,10 @@
 		width: var(--chip-sm);
 		height: var(--chip-sm);
 		margin-top: var(--sp-px);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-pill);
-		background: var(--bg);
+		background: var(--control-fill);
+		box-shadow: var(--control-shadow);
 		transition: border-color var(--dur-fast) var(--ease);
 	}
 	.dot-ctl::after {
@@ -202,9 +203,71 @@
 			opacity var(--dur-spring) var(--ease-spring),
 			scale var(--dur-spring) var(--ease-spring);
 	}
+	/* Effects follow the closest data-fx-radio ancestor; spring is the default. */
+	.radio-group:not(:global([data-fx-radio]:not([data-fx-radio='spring'])) *),
+	:global([data-fx-radio='spring']) .radio-group:not(:global([data-fx-radio='spring'] [data-fx-radio]:not([data-fx-radio='spring'])) *) {
+		& .dot-ctl::after {
+			inset: 22%;
+			width: auto;
+			height: auto;
+			margin: 0;
+			opacity: 1;
+			scale: 0;
+			transition: scale var(--dur-exit-fast) var(--ease-out);
+		}
+		& input:checked + .dot-ctl::after {
+			scale: 1;
+			transition: scale var(--dur-spring) var(--ease-spring-bounce);
+		}
+	}
+
+	/* Accent rises like liquid with a wobbling surface, then the pip drops in. */
+	:global([data-fx-radio='liquid']) .radio-group:not(:global([data-fx-radio='liquid'] [data-fx-radio]:not([data-fx-radio='liquid'])) *) {
+		& .dot-ctl {
+			overflow: hidden;
+		}
+		& .dot-ctl::before {
+			content: '';
+			position: absolute;
+			left: -50%;
+			top: 0;
+			width: 200%;
+			height: 200%;
+			border-radius: 42% 46% 40% 44%;
+			background: var(--accent);
+			translate: 0 50%;
+			pointer-events: none;
+			transition:
+				translate var(--dur-exit) var(--ease-in-out),
+				rotate var(--dur-exit) var(--ease-in-out);
+		}
+		& input:checked + .dot-ctl::before {
+			translate: 0 -30%;
+			rotate: 150deg;
+			transition:
+				translate var(--dur-slow) var(--ease-out),
+				rotate var(--dur-slow) var(--ease-out);
+		}
+		& .dot-ctl::after {
+			inset: 30%;
+			width: auto;
+			height: auto;
+			margin: 0;
+			background: var(--text-on-accent);
+			opacity: 1;
+			scale: 0;
+			transition: scale var(--dur-exit-fast) var(--ease-out);
+		}
+		& input:checked + .dot-ctl::after {
+			scale: 1;
+			transition: scale var(--dur-exit) var(--ease-spring-bounce) var(--dur-fast);
+		}
+	}
+
 	input:focus-visible + .dot-ctl {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	.texts {
 		display: flex;
@@ -231,7 +294,7 @@
 		min-width: 0;
 		gap: var(--sp-2);
 		padding: var(--pad, var(--sp-2) var(--sp-3));
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		transition:
 			border-color var(--dur-fast) var(--ease),
@@ -239,7 +302,7 @@
 	}
 	.row.selected {
 		border-color: var(--accent-dim);
-		background: var(--bg-elevated);
+		background: var(--surface-fill);
 	}
 	.row .radio {
 		flex: 1 1 auto;

package/dist/components/molecules/RichSelect.svelte

@@ -431,9 +431,10 @@
 		min-width: 0;
 		min-height: var(--rs-height);
 		padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-md);
 		background: var(--surface);
+		box-shadow: var(--control-shadow);
 		color: var(--text);
 		text-align: start;
 		cursor: pointer;
@@ -444,6 +445,7 @@
 	.rich-select :global(.pop-trigger.rs-trigger:focus-visible) {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	.rich-select :global(.pop-trigger.rs-trigger:active:not(:disabled)) {
 		scale: var(--press-scale-lg);
@@ -534,8 +536,8 @@
 	}
 	.rs-row[data-dragging] {
 		z-index: 1;
-		box-shadow: var(--shadow-md);
-		background: var(--bg-elevated);
+		box-shadow: var(--raised-shadow);
+		background: var(--raised-fill);
 		transition: none;
 	}
 	.rs-option {
@@ -587,6 +589,6 @@
 		display: flex;
 		flex-direction: column;
 		padding-top: var(--sp-1);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 </style>

package/dist/components/molecules/SectionHeader.svelte

@@ -172,7 +172,7 @@
 	}
 	.sh-divider > .sh-row {
 		padding-bottom: var(--sp-2);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.sh-group > .sh-row {
 		flex-wrap: nowrap;

package/dist/components/molecules/SeekSlider.svelte

@@ -276,7 +276,7 @@
 		height: var(--seek-track);
 		margin-top: calc(var(--seek-track) / -2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 		transform-origin: center;
 		transition: scale var(--dur-fast) var(--ease);
@@ -322,7 +322,7 @@
 		border-radius: var(--r-pill);
 		background: var(--seek-accent);
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transform: translate(-50%, -50%);
 		scale: 0.6;
 		opacity: 0;
@@ -346,7 +346,7 @@
 		.seek:not(.seek--inert):hover .seek-thumb {
 			opacity: 1;
 			scale: 1;
-			box-shadow: var(--shadow-sm), var(--seek-halo);
+			box-shadow: var(--thumb-shadow), var(--seek-halo);
 		}
 		.seek--dragging .seek-thumb {
 			scale: 1.15;
@@ -370,9 +370,9 @@
 		gap: var(--sp-1);
 		padding: var(--sp-1) var(--sp-2);
 		border-radius: var(--r-sm);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		box-shadow: var(--shadow-md);
+		background: var(--raised-fill);
+		border: var(--edge-width) solid var(--surface-edge);
+		box-shadow: var(--raised-shadow);
 		color: var(--text);
 		font-size: var(--fs-xs);
 		font-variant-numeric: tabular-nums;

package/dist/components/molecules/SegmentedControl.svelte

@@ -238,7 +238,7 @@
 	   items fill the inside, which is the height minus border and padding. */
 	.seg {
 		--seg-h: var(--control-md);
-		--seg-inset: calc(var(--sp-0-5) + 1px);
+		--seg-inset: calc(var(--sp-0-5) + var(--edge-width));
 		--seg-item-h: calc(var(--seg-h) - 2 * var(--seg-inset));
 		position: relative;
 		display: inline-flex;
@@ -247,8 +247,8 @@
 		height: var(--seg-h);
 		min-height: var(--seg-h);
 		padding: var(--sp-0-5);
-		background: var(--bg-elevated-2);
-		border: 1px solid var(--border);
+		background: var(--track-fill);
+		border: var(--edge-width) solid var(--track-edge);
 		border-radius: var(--r-pill);
 		max-width: 100%;
 		min-width: 0;
@@ -326,8 +326,8 @@
 		width: 0;
 		height: 0;
 		border-radius: var(--r-pill);
-		background: var(--bg);
-		box-shadow: var(--shadow-sm);
+		background: var(--thumb-fill);
+		box-shadow: var(--thumb-shadow);
 		transform-origin: top left;
 		pointer-events: none;
 		transition:
@@ -430,8 +430,8 @@
 	}
 	.seg-item.selected {
 		color: var(--text);
-		background: var(--bg);
-		box-shadow: var(--shadow-sm);
+		background: var(--thumb-fill);
+		box-shadow: var(--thumb-shadow);
 	}
 	.seg.placed .seg-item.selected {
 		background: transparent;

package/dist/components/molecules/SortableList.svelte

@@ -571,7 +571,7 @@
 	}
 	.sl-row {
 		position: relative;
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.sl-row:last-child {
 		border-bottom: 0;
@@ -609,7 +609,7 @@
 		position: relative;
 		z-index: 1;
 		background: var(--bg-elevated-2);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		transition: none;
 	}
 	.sl-grip,

package/dist/components/molecules/SplitButton.svelte

@@ -168,7 +168,7 @@
 		position: relative;
 		width: var(--split-height);
 		flex: none;
-		margin-inline-start: -1px;
+		margin-inline-start: calc(-1 * var(--edge-width));
 		--pop-trigger-radius: 0 var(--r-md) var(--r-md) 0;
 		--pop-trigger-pad: 0;
 	}