@dorsk/tsumikit 0.80.1 → 0.80.3

package/dist/components/atoms/Link.svelte

@@ -35,14 +35,14 @@
 		{href}
 		class="link tone-{tone} underline-{underline} align-{align} {klass}"
 		data-tsu="Link"
-		{...rest}>{@render children?.()}</a
+		{...rest}><span class="link-text"><span class="link-ink">{@render children?.()}</span></span></a
 	>
 {:else}
 	<button
 		class="link tone-{tone} underline-{underline} align-{align} {klass}"
 		data-tsu="Link"
 		{...rest}
-		type="button">{@render children?.()}</button
+		type="button"><span class="link-text"><span class="link-ink">{@render children?.()}</span></span></button
 	>
 {/if}
 
@@ -102,44 +102,52 @@
 		--link-hold: var(--dur-instant);
 	}
 
-	/* Sweep line: the underline fills in from the left and leaves to the right. */
+	/* Sweep line: the underline fills in from the left and leaves to the right. Both variants paint
+	   on the inline .link-ink so they follow the text whatever box the app gives .link. */
 	.link:not(.underline-none):not(:global([data-fx-link]:not([data-fx-link='sweep'])) *),
 	:global([data-fx-link='sweep']) .link:not(.underline-none):not(:global([data-fx-link='sweep'] [data-fx-link]:not([data-fx-link='sweep'])) *) {
 		--link-base: 0%;
 		text-decoration: none;
-		background-image:
-			linear-gradient(currentColor, currentColor),
-			linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
-		background-repeat: no-repeat;
-		background-position: var(--link-on, 100%) 100%, 0 100%;
-		background-size: var(--link-draw, 0%) 1.5px, var(--link-base) 1px;
-		transition:
-			color var(--dur-fast) ease,
-			background-size var(--dur-fast) var(--ease-out);
 		&.underline-always {
 			--link-base: 100%;
 		}
+		.link-ink {
+			background-image:
+				linear-gradient(currentColor, currentColor),
+				linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
+			background-repeat: no-repeat;
+			background-position: var(--link-on, 100%) 100%, 0 100%;
+			background-size: var(--link-draw, 0%) 1.5px, var(--link-base) 1px;
+			transition: background-size var(--dur-fast) var(--ease-out);
+		}
 	}
 
 	/* Highlighter: a marker swipes in behind the words and fades on leave. */
 	:global([data-fx-link='highlight']) .link:not(.underline-none):not(:global([data-fx-link='highlight'] [data-fx-link]:not([data-fx-link='highlight'])) *) {
 		margin-inline: -0.18em;
 		padding-inline: 0.18em;
-		border-radius: 0.2em 0.35em 0.25em 0.4em;
-		background-image: linear-gradient(100deg, var(--link-mark), color-mix(in srgb, var(--link-mark) 70%, transparent));
-		background-repeat: no-repeat;
-		background-size: var(--link-draw, 0%) 100%;
 		text-decoration-color: var(--link-deco, color-mix(in srgb, currentColor 45%, transparent));
 		text-underline-offset: 0.2em;
 		transition:
 			color var(--dur-fast) ease,
 			text-decoration-color var(--dur-fast) ease,
-			--link-mark var(--link-in, var(--dur-exit)) ease,
-			background-size var(--link-grow, var(--dur-instant)) var(--ease-out) var(--link-hold, var(--dur-exit));
+			--link-mark var(--link-in, var(--dur-exit)) ease;
+		.link-text,
+		.link-ink {
+			margin-inline: -0.18em;
+			padding-inline: 0.18em;
+		}
+		.link-ink {
+			border-radius: 0.2em 0.35em 0.25em 0.4em;
+			background-image: linear-gradient(100deg, var(--link-mark), color-mix(in srgb, var(--link-mark) 70%, transparent));
+			background-repeat: no-repeat;
+			background-size: var(--link-draw, 0%) 100%;
+			transition: background-size var(--link-grow, var(--dur-instant)) var(--ease-out) var(--link-hold, var(--dur-exit));
+		}
 	}
 	@property --link-mark {
 		syntax: '<color>';
-		inherits: false;
+		inherits: true;
 		initial-value: transparent;
 	}
 	@media (pointer: coarse) {

package/dist/components/layouts/NavBar.svelte

@@ -38,6 +38,7 @@
 		placement = 'inline',
 		orientation = 'stacked',
 		variant = 'flush',
+		labels = 'fit',
 		maxWidth,
 		class: klass = '',
 		style: styleProp = '',
@@ -57,6 +58,13 @@
 		orientation?: 'stacked' | 'inline';
 		/** 'floating' = rounded elevated card inset from the edges. */
 		variant?: 'flush' | 'floating';
+		/**
+		 * Stacked labels that run out of room. 'fit' shrinks the font down to
+		 * `--navbar-label-min` (10px) so the longest word fits, then wraps to two
+		 * lines, then ellipsis. 'truncate' = one line with ellipsis at full size.
+		 * 'full' never clips: labels spill past their item.
+		 */
+		labels?: 'fit' | 'truncate' | 'full';
 		/** Caps and centres the row of items. */
 		maxWidth?: string;
 		class?: string;
@@ -64,6 +72,23 @@
 		[key: string]: unknown;
 	} = $props();
 
+	// Widest word across the labels in em, rounded up from typical UI sans metrics.
+	const charEm = (c: string) =>
+		/[ijlI.,:;!|']/.test(c) ? 0.28
+		: /[frtJ]/.test(c) ? 0.4
+		: /[mwMW]/.test(c) ? 0.94
+		: /[A-Z]/.test(c) ? 0.72
+		: /[0-9]/.test(c) ? 0.58
+		: /[a-z]/.test(c) ? 0.6
+		: c >= '\u2e80' ? 1
+		: 0.62;
+	const labelEm = $derived(
+		Math.max(
+			1,
+			...items.flatMap((item) => item.label.split(/\s+/).map((w) => [...w].reduce((sum, c) => sum + charEm(c), 0)))
+		).toFixed(2)
+	);
+
 	const hasBadge = (badge: NavBarItem['badge']) =>
 		badge !== undefined && badge !== null && badge !== '' && badge !== 0;
 
@@ -151,11 +176,11 @@
 <nav
 	data-tsu="NavBar"
 	aria-label={label}
-	class="navbar {klass}"
+	class="navbar labels-{labels} {klass}"
 	class:bar={placement === 'bar'}
 	class:floating={variant === 'floating'}
 	class:stacked={orientation === 'stacked'}
-	style="{maxWidth ? `--navbar-max: ${maxWidth};` : ''}{styleProp}"
+	style="--navbar-label-em: {labelEm};{maxWidth ? ` --navbar-max: ${maxWidth};` : ''}{styleProp}"
 	{...rest}
 >
 	<div class="navbar-row">
@@ -314,6 +339,28 @@
 	.stacked .navbar-label {
 		max-width: 100%;
 	}
+	.stacked.labels-fit :is(.navbar-inner, .navbar-side) {
+		gap: 0;
+	}
+	.stacked.labels-fit .navbar-link {
+		container-type: inline-size;
+		contain-intrinsic-inline-size: 4rem;
+		padding-inline: 0;
+	}
+	.stacked.labels-fit .navbar-label {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		font-size: clamp(var(--navbar-label-min, calc(0.625rem * var(--fs-scale))), 100cqi / var(--navbar-label-em), 1em);
+		line-height: var(--lh-tight);
+		text-align: center;
+		white-space: normal;
+	}
+	.labels-full .navbar-label {
+		max-width: none;
+		overflow: visible;
+	}
 	.navbar-badge {
 		position: absolute;
 		top: -0.35rem;

package/dist/components/layouts/NavBar.svelte.d.ts

@@ -33,6 +33,13 @@ type $$ComponentProps = {
     orientation?: 'stacked' | 'inline';
     /** 'floating' = rounded elevated card inset from the edges. */
     variant?: 'flush' | 'floating';
+    /**
+     * Stacked labels that run out of room. 'fit' shrinks the font down to
+     * `--navbar-label-min` (10px) so the longest word fits, then wraps to two
+     * lines, then ellipsis. 'truncate' = one line with ellipsis at full size.
+     * 'full' never clips: labels spill past their item.
+     */
+    labels?: 'fit' | 'truncate' | 'full';
     /** Caps and centres the row of items. */
     maxWidth?: string;
     class?: string;

package/dist/components/molecules/FilterInput.svelte

@@ -239,13 +239,18 @@
 		const pos = el.selectionStart ?? value.length;
 		const id = ++reqId;
 		const next = key ? await suggestSingle(schema, key, value) : await suggest(schema, value, pos);
-		if (id !== reqId) return; // a newer keystroke won
+		if (id !== reqId || document.activeElement !== el) return;
 		menu = next;
 		active = 0;
 		keyboardNavigation = false;
 		open = !!next && next.items.length > 0;
 	}
 
+	function close() {
+		++reqId;
+		open = false;
+	}
+
 	function accept(i: number) {
 		if (!menu || !el) return;
 		const s = menu.items[i];
@@ -269,7 +274,7 @@
 			el.focus();
 			el.setSelectionRange(caret, caret);
 			if (s.advance) refresh();
-			else open = false;
+			else close();
 		});
 	}
 
@@ -282,7 +287,7 @@
 				const exit = closingQuoteExit(value, pos);
 				if (exit !== null) {
 					e.preventDefault();
-					open = false;
+					close();
 					setCaret(exit);
 					return;
 				}
@@ -299,6 +304,7 @@
 		}
 		if (!open || !menu) {
 			if (e.key === 'Enter') submit();
+			else if (e.key === 'Escape') close();
 			return;
 		}
 		switch (e.key) {
@@ -319,13 +325,13 @@
 				break;
 			case 'Escape':
 				e.preventDefault();
-				open = false;
+				close();
 				break;
 		}
 	}
 
 	function submit() {
-		open = false;
+		close();
 		onsubmit?.(value);
 	}
 
@@ -399,7 +405,9 @@
 				}}
 				onblur={() => {
 					focused = false;
-					setTimeout(() => (open = false), 120);
+					setTimeout(() => {
+						if (document.activeElement !== el) close();
+					}, 120);
 				}}
 				{onkeydown}
 			/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.80.1",
+  "version": "0.80.3",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",