@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/components/molecules/Tabs.svelte

@@ -123,7 +123,9 @@
 		indLeft = left;
 		indWidth = width;
 		ind.style.width = `${width}px`;
-		if (!animate || !placed || width === 0) {
+		const fx = getComputedStyle(ind).getPropertyValue('--tabs-fx').trim();
+		const still = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+		if (!animate || !placed || width === 0 || still) {
 			ind.style.transition = 'none';
 			ind.style.translate = `${left}px 0`;
 			ind.style.scale = '1 1';
@@ -132,6 +134,22 @@
 			placed = true;
 			return;
 		}
+		if (fx === 'stretch' && typeof ind.animate === 'function') {
+			const lo = Math.min(prevLeft, left);
+			const hi = Math.max(prevLeft + prevWidth, left + width);
+			const ease = (name: string) => getComputedStyle(ind).getPropertyValue(name).trim() || 'ease-out';
+			ind.style.translate = `${left}px 0`;
+			ind.style.scale = '1 1';
+			ind.animate(
+				[
+					{ translate: `${prevLeft}px 0`, scale: `${prevWidth / width} 1`, easing: ease('--ease-out') },
+					{ translate: `${lo}px 0`, scale: `${(hi - lo) / width} 1`, offset: 0.4, easing: ease('--ease-spring') },
+					{ translate: `${left}px 0`, scale: '1 1' }
+				],
+				{ duration: 280 }
+			);
+			return;
+		}
 		ind.style.transition = 'none';
 		ind.style.translate = `${prevLeft}px 0`;
 		ind.style.scale = `${prevWidth / width} 1`;
@@ -152,6 +170,14 @@
 		return () => ro.disconnect();
 	});
 
+	function inkFrom(e: MouseEvent) {
+		const el = e.currentTarget as HTMLElement;
+		const r = el.getBoundingClientRect();
+		const pointer = e.detail > 0;
+		el.style.setProperty('--ink-x', pointer ? `${e.clientX - r.left}px` : '50%');
+		el.style.setProperty('--ink-y', pointer ? `${e.clientY - r.top}px` : '50%');
+	}
+
 	function select(id: string, focus = false) {
 		if (tabs.find((t) => t.id === id)?.disabled) return;
 		if (value !== id) playSound('click', sound);
@@ -161,7 +187,11 @@
 			// The list scrolls when it is too narrow, so keyboard selection has to
 			// bring the tab back into view or it moves somewhere unseen.
 			el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-			if (focus) el?.focus();
+			if (focus) {
+				el?.style.removeProperty('--ink-x');
+				el?.style.removeProperty('--ink-y');
+				el?.focus();
+			}
 		});
 	}
 	// Step to the next non-disabled tab in a direction, wrapping around.
@@ -236,7 +266,10 @@
 						class="tab closable"
 						class:selected={value === t.id}
 						class:disabled={t.disabled}
-						onclick={() => select(t.id)}
+						onclick={(e) => {
+							inkFrom(e);
+							select(t.id);
+						}}
 						onauxclick={(e) => onauxclick(e, t.id)}
 					>
 						{@render body(t)}
@@ -268,7 +301,10 @@
 						tabindex={stop?.id === t.id ? 0 : -1}
 						class="tab"
 						class:selected={value === t.id}
-						onclick={() => select(t.id)}
+						onclick={(e) => {
+							inkFrom(e);
+							select(t.id);
+						}}
 					>
 						{@render body(t)}
 					</button>
@@ -297,7 +333,7 @@
 		flex: 1 1 auto;
 		min-width: 0;
 		gap: var(--sp-1);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 		overflow-x: auto;
 		overflow-y: hidden;
 		scrollbar-width: thin;
@@ -330,7 +366,7 @@
 		font-weight: var(--fw-medium);
 		--icon-size: var(--control-icon-md);
 		border-bottom: 2px solid transparent;
-		margin-bottom: -1px;
+		margin-bottom: calc(-1 * var(--edge-width));
 		max-width: var(--tab-max-width, none);
 		transition:
 			color var(--dur-fast) var(--ease),
@@ -373,7 +409,7 @@
 		align-items: center;
 		gap: var(--sp-1);
 		padding-inline-start: var(--sp-2);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.tabpanel {
 		padding-top: var(--sp-4);
@@ -389,4 +425,121 @@
 		outline-offset: var(--focus-ring-offset);
 		border-radius: var(--r-sm);
 	}
+
+	/* Sliding pill: a raised pill glides behind the selected tab with a slight overshoot. */
+	.tabs:not(:global([data-fx-tabs]:not([data-fx-tabs='pill'])) *),
+	:global([data-fx-tabs='pill']) .tabs:not(:global([data-fx-tabs='pill'] [data-fx-tabs]:not([data-fx-tabs='pill'])) *) {
+		--tabs-fx: pill;
+		& .tablist {
+			isolation: isolate;
+			flex: 0 1 auto;
+			padding: 3px;
+			border-bottom: 0;
+			border-radius: var(--r-pill);
+			background: var(--surface-fill-2);
+			box-shadow: inset 0 0 0 var(--edge-width) var(--surface-edge);
+		}
+		& .actions {
+			border-bottom: 0;
+		}
+		& .tab {
+			min-height: calc(var(--control-md) - 6px);
+			margin-bottom: 0;
+			border-bottom: 0;
+			border-radius: var(--r-pill);
+		}
+		& .tab.selected {
+			color: var(--text);
+		}
+		& .tablist:not(.placed) .tab.selected {
+			background: var(--surface);
+		}
+		& .tab.selected:focus-visible {
+			outline: none;
+		}
+		& .indicator {
+			top: 3px;
+			bottom: 3px;
+			z-index: -1;
+			height: auto;
+			border-radius: var(--r-pill);
+			background: var(--surface);
+			box-shadow:
+				0 0 0 var(--edge-width) color-mix(in srgb, var(--accent) 35%, var(--surface-edge)),
+				0 1px 3px color-mix(in srgb, var(--text) 14%, transparent);
+			transition-timing-function: var(--ease-spring-bounce);
+		}
+		& .tablist:has(.tab.selected:focus-visible) .indicator {
+			box-shadow:
+				0 0 0 2px var(--accent),
+				0 1px 3px color-mix(in srgb, var(--text) 14%, transparent);
+		}
+	}
+	/* Stretch line: the script stretches the line across both tabs, then lets the tail catch up. */
+	:global([data-fx-tabs='stretch']) .tabs:not(:global([data-fx-tabs='stretch'] [data-fx-tabs]:not([data-fx-tabs='stretch'])) *) {
+		--tabs-fx: stretch;
+	}
+	/* Ink blot: a tint spreads from the click point and a short mark springs in under the label. */
+	:global([data-fx-tabs='ink']) .tabs:not(:global([data-fx-tabs='ink'] [data-fx-tabs]:not([data-fx-tabs='ink'])) *) {
+		--tabs-fx: ink;
+		& .indicator {
+			display: none;
+		}
+		& .tab {
+			position: relative;
+			isolation: isolate;
+			overflow: hidden;
+			border-radius: var(--r-md) var(--r-md) 0 0;
+		}
+		& .tab::before,
+		& .tab::after {
+			content: '';
+			position: absolute;
+			pointer-events: none;
+		}
+		& .tab::before {
+			left: var(--ink-x, 50%);
+			top: var(--ink-y, 50%);
+			z-index: -1;
+			width: 260%;
+			aspect-ratio: 1;
+			translate: -50% -50%;
+			border-radius: var(--r-pill);
+			background: radial-gradient(
+				circle closest-side,
+				color-mix(in srgb, var(--accent) 22%, transparent) 0 55%,
+				color-mix(in srgb, var(--accent) 14%, transparent) 80%,
+				transparent
+			);
+			scale: 0;
+			opacity: 0;
+			transition-property: opacity, scale;
+			transition-duration: var(--dur-exit), var(--dur-instant);
+			transition-delay: var(--dur-instant), var(--dur-exit);
+			transition-timing-function: ease;
+		}
+		& .tab.selected::before {
+			scale: 1;
+			opacity: 1;
+			transition-duration: var(--dur-fast), var(--dur-slow);
+			transition-delay: var(--dur-instant);
+			transition-timing-function: ease, var(--ease-out);
+		}
+		& .tab::after {
+			inset: auto 30% 4px;
+			height: 2px;
+			border-radius: var(--r-xs);
+			background: var(--accent);
+			opacity: 0;
+			scale: 0.2 1;
+			transition-property: opacity, scale;
+			transition-duration: var(--dur-exit-fast);
+		}
+		& .tab.selected::after {
+			opacity: 1;
+			scale: 1 1;
+			transition-duration: var(--dur-fast), var(--dur-spring);
+			transition-timing-function: ease, var(--ease-spring-bounce);
+		}
+	}
 </style>

package/dist/components/molecules/ThemePicker.svelte

@@ -257,7 +257,7 @@
 		margin-top: var(--sp-2);
 		padding: var(--sp-1) var(--sp-2);
 		border: 2px solid transparent;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		background: none;
 		color: inherit;

package/dist/components/molecules/Timestamp.svelte

@@ -226,7 +226,7 @@
 	.ts-mode {
 		flex: 1;
 		padding: var(--sp-1) var(--sp-2);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--btn-edge);
 		border-radius: var(--r-sm);
 		background: transparent;
 		color: var(--text-muted);

package/dist/components/molecules/Toggle.svelte

@@ -82,15 +82,16 @@
 		font-weight: var(--fw-medium);
 		line-height: var(--lh-none);
 		--icon-size: var(--control-icon-sm);
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		color: var(--text-muted);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		white-space: nowrap;
 		user-select: none;
 		transition:
 			background var(--dur-fast) var(--ease),
 			border-color var(--dur-fast) var(--ease),
 			color var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease),
 			scale var(--dur-fast) var(--ease-out);
 	}
 	.toggle:disabled {
@@ -125,7 +126,8 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.toggle:hover:not(:disabled) {
-			border-color: var(--border-strong);
+			border-color: var(--surface-edge-strong);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 	}
 	.toggle:active:not(:disabled) {

package/dist/components/molecules/Tooltip.svelte

@@ -206,9 +206,9 @@
 		padding: var(--sp-1) var(--sp-2);
 		background: var(--bg-elevated-2);
 		color: var(--text);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-sm);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		font-size: var(--fs-xs);
 		line-height: var(--lh-snug);
 		white-space: normal;

package/dist/components/molecules/VolumeSlider.svelte

@@ -306,7 +306,7 @@
 		height: var(--vol-track);
 		margin-top: calc(var(--vol-track) / -2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 	}
 	.vol--vertical .vol-track {
@@ -354,7 +354,7 @@
 		border-radius: var(--r-pill);
 		background: var(--vol-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;
@@ -375,7 +375,7 @@
 		.vol-slab:not([aria-disabled='true']):hover .vol-thumb {
 			opacity: 1;
 			scale: 1;
-			box-shadow: var(--shadow-sm), var(--vol-halo);
+			box-shadow: var(--thumb-shadow), var(--vol-halo);
 		}
 		.vol--dragging .vol-thumb {
 			scale: 1.15;

package/dist/components/organisms/ConversationFeed.svelte

@@ -181,6 +181,6 @@
 		margin-inline: auto;
 		z-index: 1;
 		border-radius: var(--r-pill);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 	}
 </style>

package/dist/components/organisms/ConversationPanel.svelte

@@ -45,7 +45,7 @@
 		gap: var(--sp-2);
 		min-width: 0;
 		padding: var(--sp-2) var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-body {
 		flex: 1;
@@ -55,12 +55,12 @@
 	}
 	.panel-status {
 		flex: none;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-composer {
 		flex: none;
 		padding: var(--sp-2) var(--sp-3) var(--sp-3);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-status + .panel-composer {
 		border-top: 0;

package/dist/components/organisms/DataTable.svelte

@@ -239,6 +239,7 @@
 					<th
 						scope="col"
 						data-hide-below={col.hideBelow}
+						class:dt-sortable={col.sortable && !headerSnippets[col.key]}
 						style:width={col.width}
 						style:text-align={col.align ?? 'left'}
 						aria-sort={col.sortable
@@ -363,7 +364,7 @@
 		width: 100%;
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-lg);
 		container-type: inline-size;
 	}
@@ -382,7 +383,7 @@
 	th,
 	td {
 		padding: var(--sp-2) var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.dt.sm th,
 	.dt.sm td {
@@ -394,7 +395,7 @@
 		color: var(--text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		white-space: nowrap;
 	}
 	.dt.sticky th {
@@ -430,6 +431,15 @@
 		color: inherit;
 		cursor: pointer;
 	}
+	th.dt-sortable {
+		position: relative;
+	}
+	/* The whole header cell is the sort hit area. */
+	.dt-sort::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
 	.dt-arrow {
 		display: inline-block;
 		opacity: 0.4;
@@ -527,17 +537,9 @@
 		tbody tr:last-child td :global(.checkbox::before) {
 			inset-block-end: 0;
 		}
-		/* Sort slab: inline-end stays at 0 so it never reaches the next header
-		   cell, and the inline-start reach stays inside the cell's own padding. */
-		.dt-sort {
-			position: relative;
-		}
-		.dt-sort::before {
-			content: '';
-			position: absolute;
-			inset-block: var(--touch-slab);
-			inset-inline-start: var(--touch-slab);
-			inset-inline-end: 0;
+		/* The cell overlay grows vertically to the compact target, never sideways. */
+		.dt-sort::after {
+			inset-block: min(0px, calc((100% - var(--touch-target-compact)) / 2));
 		}
 	}
 	@container (max-width: 30rem) {
@@ -587,7 +589,7 @@
 		align-items: baseline;
 		gap: var(--sp-1) var(--sp-3);
 		padding: var(--sp-3);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	[data-stacked] tbody tr:last-child {
 		border-bottom: none;
@@ -679,7 +681,7 @@
 	.dt-more {
 		text-align: center;
 		padding: var(--sp-2);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.dt-more-btn {
 		border: 0;

package/dist/fx.d.ts

@@ -0,0 +1,149 @@
+export declare const FX: {
+    readonly hover: {
+        readonly label: "Button hover";
+        readonly variants: readonly [{
+            readonly id: "smoke";
+            readonly label: "Smoke";
+        }, {
+            readonly id: "ember";
+            readonly label: "Ember";
+        }, {
+            readonly id: "aurora";
+            readonly label: "Aurora";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly check: {
+        readonly label: "Checkbox";
+        readonly variants: readonly [{
+            readonly id: "draw";
+            readonly label: "Draw";
+        }, {
+            readonly id: "pop";
+            readonly label: "Pop";
+        }, {
+            readonly id: "confetti";
+            readonly label: "Confetti";
+        }, {
+            readonly id: "morph";
+            readonly label: "Morph";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly radio: {
+        readonly label: "Radio";
+        readonly variants: readonly [{
+            readonly id: "spring";
+            readonly label: "Spring";
+        }, {
+            readonly id: "liquid";
+            readonly label: "Liquid";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly switch: {
+        readonly label: "Switch";
+        readonly variants: readonly [{
+            readonly id: "squash";
+            readonly label: "Squash";
+        }, {
+            readonly id: "glow";
+            readonly label: "Glow";
+        }, {
+            readonly id: "calm";
+            readonly label: "Calm";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly focus: {
+        readonly label: "Input focus";
+        readonly variants: readonly [{
+            readonly id: "bloom";
+            readonly label: "Bloom";
+        }, {
+            readonly id: "label";
+            readonly label: "Spring label";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly tabs: {
+        readonly label: "Tabs";
+        readonly variants: readonly [{
+            readonly id: "pill";
+            readonly label: "Pill";
+        }, {
+            readonly id: "stretch";
+            readonly label: "Stretch";
+        }, {
+            readonly id: "ink";
+            readonly label: "Ink";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly copy: {
+        readonly label: "Copy";
+        readonly variants: readonly [{
+            readonly id: "burst";
+            readonly label: "Burst";
+        }, {
+            readonly id: "tick";
+            readonly label: "Tick";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly link: {
+        readonly label: "Link hover";
+        readonly variants: readonly [{
+            readonly id: "sweep";
+            readonly label: "Sweep";
+        }, {
+            readonly id: "highlight";
+            readonly label: "Highlight";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+    readonly card: {
+        readonly label: "Card hover";
+        readonly variants: readonly [{
+            readonly id: "spotlight";
+            readonly label: "Spotlight";
+        }, {
+            readonly id: "orbit";
+            readonly label: "Orbit";
+        }, {
+            readonly id: "none";
+            readonly label: "Off";
+        }];
+    };
+};
+export type FxFamily = keyof typeof FX;
+export type FxVariant<F extends FxFamily = FxFamily> = (typeof FX)[F]['variants'][number]['id'];
+export type FxSettings = {
+    [F in FxFamily]: FxVariant<F>;
+};
+export declare const FX_FAMILIES: FxFamily[];
+export declare const DEFAULT_FX: FxSettings;
+export declare function fxAttr(family: FxFamily): `data-fx-${FxFamily}`;
+export declare function isFxVariant<F extends FxFamily>(family: F, v: unknown): v is FxVariant<F>;
+/** Settings from an untrusted blob: unknown families are dropped, unknown
+ *  variants fall back to `defaults`. */
+export declare function parseFx(raw: unknown, defaults?: FxSettings): FxSettings;
+export declare function fxDiff(settings: FxSettings): Partial<FxSettings>;
+/** Inline <head> script painting the persisted `data-fx-*` before first paint. */
+export declare function fxPrepaint(key: string): string;