@dorsk/tsumikit 0.81.0 → 0.82.0

package/dist/components/molecules/EmptyState.svelte

@@ -9,9 +9,10 @@
 	//   • an optional action area (slot via `action`, or a built-in button when
 	//     `actionLabel`+`onAction` are passed)
 	// Everything is token-driven. `size` picks the layout: `default`, `compact`
-	// (tighter spacing), or `inline` (a single muted line). `loading` swaps the
-	// chip for a spinner and marks the root busy.
+	// (tighter spacing), or `inline` (a single muted line). `loading` marks the
+	// root busy at once and swaps the chip for a spinner once `pending()` lets it.
 	import type { Snippet } from 'svelte';
+	import { pending } from '../../pending.svelte';
 	import Button from '../atoms/Button.svelte';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import Spinner from '../atoms/Spinner.svelte';
@@ -29,6 +30,8 @@
 		compact = false,
 		size,
 		loading = false,
+		loadingDelay,
+		loadingMin,
 		class: klass = '',
 		// Raw SVG markup for a custom glyph — passed straight to `Icon`.
 		iconChildren,
@@ -46,6 +49,9 @@
 		compact?: boolean;
 		size?: 'inline' | 'compact' | 'default';
 		loading?: boolean;
+		/** Show delay / minimum visible time for the spinner (ms); 0 follows `loading` at once. */
+		loadingDelay?: number;
+		loadingMin?: number;
 		class?: string;
 		iconChildren?: Snippet;
 		action?: Snippet;
@@ -53,18 +59,19 @@
 	} = $props();
 
 	const sz = $derived(size ?? (compact ? 'compact' : 'default'));
+	const spin = pending(() => loading, () => ({ delay: loadingDelay, min: loadingMin }));
 </script>
 
 <div
 	class="empty empty-{canonicalTone(tone)} {klass}"
 	class:empty-compact={sz === 'compact'}
 	class:empty-inline={sz === 'inline'}
-	class:empty-loading={loading}
+	class:empty-loading={spin.visible}
 	aria-busy={loading ? 'true' : undefined}
 	data-tsu="EmptyState"
 	{...rest}
 >
-	{#if loading}
+	{#if spin.visible}
 		<span class="empty-chip">
 			<Spinner />
 		</span>
@@ -161,7 +168,7 @@
 		font-size: var(--fs-sm);
 	}
 	.empty-inline .empty-desc {
-		max-width: none;
+		max-inline-size: none;
 	}
 	.empty-inline .empty-action {
 		margin-top: 0;
@@ -175,7 +182,7 @@
 	}
 	.empty-desc {
 		margin: 0;
-		max-width: 32ch;
+		max-inline-size: var(--measure, 68ch);
 		font-size: var(--fs-sm);
 		color: var(--text-muted);
 		line-height: var(--lh-normal);

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

@@ -12,6 +12,9 @@ type $$ComponentProps = {
     compact?: boolean;
     size?: 'inline' | 'compact' | 'default';
     loading?: boolean;
+    /** Show delay / minimum visible time for the spinner (ms); 0 follows `loading` at once. */
+    loadingDelay?: number;
+    loadingMin?: number;
     class?: string;
     iconChildren?: Snippet;
     action?: Snippet;

package/dist/components/molecules/Field.svelte

@@ -97,7 +97,7 @@
 	}
 	.hint {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.error {
 		font-size: var(--fs-xs);

package/dist/components/molecules/FilterInput.svelte

@@ -549,6 +549,7 @@
 		background: transparent;
 		color: var(--text);
 		font-family: var(--font-numeric);
+		font-variant-numeric: tabular-nums;
 		font-size: var(--control-fs-md);
 		outline: none;
 		min-width: 0;
@@ -576,7 +577,7 @@
 		border: 0;
 		background: transparent;
 		font-size: var(--fi-icon);
-		color: var(--text-faint);
+		color: var(--text-muted);
 		cursor: pointer;
 		padding: var(--sp-1);
 		border-radius: var(--r-sm);
@@ -632,7 +633,7 @@
 		font-size: var(--fs-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		color: var(--text-faint);
+		color: var(--text-muted);
 		padding: var(--sp-2) var(--sp-2) var(--sp-1);
 	}
 	.fi__opt {
@@ -659,12 +660,13 @@
 		font-weight: var(--fw-medium);
 	}
 	.fi__opt-hint {
-		color: var(--text-faint);
+		color: var(--text-muted);
 		font-size: var(--fs-xs);
 	}
 	.fi__opt-code {
 		margin-left: auto;
 		font-family: var(--font-numeric);
+		font-variant-numeric: tabular-nums;
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 		background: var(--bg-elevated-2);

package/dist/components/molecules/Meter.svelte

@@ -86,6 +86,6 @@
 	}
 	.caption {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 </style>

package/dist/components/molecules/Metric.svelte

@@ -208,6 +208,7 @@
 		align-items: baseline;
 		gap: var(--sp-1);
 		font-family: var(--font-numeric);
+		font-variant-numeric: tabular-nums;
 		line-height: var(--lh-none);
 	}
 	.metric-num {
@@ -228,7 +229,7 @@
 	}
 	.metric-sub {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 		line-height: var(--lh-snug);
 	}
 	:global(.metric-sm) .metric-num {
@@ -275,6 +276,7 @@
 		align-items: baseline;
 		gap: var(--sp-1) var(--sp-3);
 		font-family: var(--font-numeric);
+		font-variant-numeric: tabular-nums;
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 	}

package/dist/components/molecules/Modal.svelte

@@ -271,7 +271,7 @@
 			opacity: 0;
 		}
 	}
-	@media (min-width: 640px) {
+	@media (min-width: 40rem) {
 		.modal {
 			align-items: center;
 			padding: var(--sp-6);
@@ -309,7 +309,7 @@
 			translate: 0 100%;
 		}
 	}
-	@media (min-width: 640px) {
+	@media (min-width: 40rem) {
 		.sheet {
 			border-radius: var(--r-lg);
 			padding-bottom: 0;
@@ -394,7 +394,7 @@
 	.sheet-resize {
 		display: none;
 	}
-	@media (min-width: 640px) {
+	@media (min-width: 40rem) {
 		.sheet-resize {
 			display: block;
 			position: absolute;
@@ -439,7 +439,7 @@
 			background: var(--accent);
 		}
 	}
-	@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
+	@media (min-width: 40rem) and (hover: hover) and (pointer: fine) {
 		.sheet-resize:hover::before {
 			background: color-mix(in srgb, var(--accent) 45%, transparent);
 		}

package/dist/components/molecules/Pagination.svelte

@@ -6,6 +6,7 @@
 	// next when the container is narrower than 24rem.
 	import Text from '../atoms/Text.svelte';
 	import { playSound } from '../../sound';
+	import { isModifiedClick } from '../../url-state.svelte';
 	import IconButton from './IconButton.svelte';
 
 	let {
@@ -15,6 +16,7 @@
 		limit,
 		total,
 		onchange,
+		href,
 		siblings = 1,
 		showEdges = true,
 		showRange = false,
@@ -34,6 +36,8 @@
 		limit?: number;
 		total?: number;
 		onchange?: (page: number) => void;
+		/** Pages become real links (`<a aria-current="page">`): middle-click opens a page in a new tab. */
+		href?: (page: number) => string;
 		/** Numbered pages shown on each side of the current one. */
 		siblings?: number;
 		/** Always show the first and last page. */
@@ -105,6 +109,9 @@
 		if (offsetMode) offset = (next - 1) * (limit as number);
 		onchange?.(next);
 	}
+	function onlinkclick(e: MouseEvent, p: number) {
+		if (!isModifiedClick(e)) go(p);
+	}
 </script>
 
 <nav
@@ -121,14 +128,26 @@
 		label="Previous page"
 		box={size === 'sm' ? 'sm' : 'md'}
 		disabled={current <= 1}
+		href={href?.(current - 1)}
 		sound={false}
-		onclick={() => go(current - 1)}
+		onclick={(e) => onlinkclick(e, current - 1)}
 	/>
 	<ol class="pages">
 		{#each items as item, i (item === ELLIPSIS ? `e${i}` : item)}
 			<li>
 				{#if item === ELLIPSIS}
 					<span class="ellipsis" aria-hidden="true">…</span>
+				{:else if href}
+					<a
+						href={href(item)}
+						class="page"
+						class:on={item === current}
+						aria-current={item === current ? 'page' : undefined}
+						aria-label="Page {item}"
+						onclick={(e) => onlinkclick(e, item)}
+					>
+						{item}
+					</a>
 				{:else}
 					<button
 						type="button"
@@ -150,8 +169,9 @@
 		label="Next page"
 		box={size === 'sm' ? 'sm' : 'md'}
 		disabled={current >= count}
+		href={href?.(current + 1)}
 		sound={false}
-		onclick={() => go(current + 1)}
+		onclick={(e) => onlinkclick(e, current + 1)}
 	/>
 	{#if showRange}
 		<Text class="range" size="sm" numeric tone="muted">{rangeText}</Text>
@@ -186,6 +206,9 @@
 		padding: 0;
 	}
 	.page {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		min-width: var(--box-md);
 		height: var(--box-md);
 		padding: 0 var(--control-px-md);
@@ -195,6 +218,7 @@
 		color: var(--text-muted);
 		font-size: var(--control-fs-md);
 		font-variant-numeric: tabular-nums;
+		text-decoration: none;
 		cursor: pointer;
 		--page-scale-dur: var(--dur-fast);
 		transition:

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

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     limit?: number;
     total?: number;
     onchange?: (page: number) => void;
+    /** Pages become real links (`<a aria-current="page">`): middle-click opens a page in a new tab. */
+    href?: (page: number) => string;
     /** Numbered pages shown on each side of the current one. */
     siblings?: number;
     /** Always show the first and last page. */
@@ -26,6 +28,6 @@ type $$ComponentProps = {
     sound?: boolean;
     class?: string;
 };
-declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "offset" | "page">;
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "page" | "offset">;
 type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

package/dist/components/molecules/Prose.svelte

@@ -30,6 +30,7 @@
 		color: var(--md-text, var(--text));
 		font-size: var(--fs-sm);
 		line-height: var(--lh-normal);
+		max-inline-size: var(--measure);
 		overflow-wrap: anywhere;
 		--prose-gap: var(--sp-3);
 	}

package/dist/components/molecules/RadioGroup.svelte

@@ -277,7 +277,7 @@
 	}
 	.hint {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 
 	.rows {
@@ -324,7 +324,7 @@
 	}
 	.note {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.description {
 		font-size: var(--fs-xs);

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

@@ -45,7 +45,7 @@ declare function $$render<T>(): {
         style?: string;
     };
     exports: {};
-    bindings: "open" | "value";
+    bindings: "value" | "open";
     slots: {};
     events: {};
 };
@@ -53,7 +53,7 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "open" | "value";
+    bindings(): "value" | "open";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/molecules/SectionHeader.svelte

@@ -140,7 +140,7 @@
 		<Heading {level} {size} class="sh-title">{text}</Heading>
 	{/if}
 	{#if count !== undefined}
-		<Text tone="faint" weight="normal" numeric class="sh-count">{count}</Text>
+		<Text tone="muted" weight="normal" numeric class="sh-count">{count}</Text>
 	{/if}
 {/snippet}
 

package/dist/components/molecules/SegmentedControl.svelte

@@ -11,6 +11,8 @@
 		icon?: import('../atoms/Icon.svelte').IconName;
 		/** Greyed out, not selectable, skipped by keyboard navigation. */
 		disabled?: boolean;
+		/** Render this segment as a real link; overrides the control's `href`. */
+		href?: string;
 	}
 </script>
 
@@ -28,6 +30,7 @@
 	import type { Attachment } from 'svelte/attachments';
 	import Icon from '../atoms/Icon.svelte';
 	import { playSound } from '../../sound';
+	import { isModifiedClick } from '../../url-state.svelte';
 	import { formatSegmentCount } from './segmented-control-count.js';
 	import { nextEnabledSegment } from './segmented-control-keyboard.js';
 
@@ -35,6 +38,7 @@
 		options,
 		value = $bindable(),
 		onchange,
+		href,
 		justify,
 		wrap = false,
 		// `icon` packs the segments into compact square buttons (label hidden as an
@@ -60,6 +64,8 @@
 		value?: string;
 		/** Fires after a selection (click or keyboard). */
 		onchange?: (value: string) => void;
+		/** Segments become real links (`<a aria-current>`): middle-click opens the segment's URL in a new tab. */
+		href?: (value: string) => string;
 		/** Pin the control to the start/end of a flex row. */
 		justify?: 'start' | 'end';
 		/** Allow segments to wrap onto multiple lines. */
@@ -100,6 +106,7 @@
 		options.find((o) => o.value === value && !o.disabled) ?? options.find((o) => !o.disabled)
 	);
 	const segId = (val: string) => `${baseId}-${val}`;
+	const linkTo = (o: SegmentOption) => (o.disabled ? undefined : (o.href ?? href?.(o.value)));
 
 	// A pill wider than its container falls back to the `scroll` layout; the
 	// class is dropped again once the row fits so the touch slab stays unclipped.
@@ -185,6 +192,16 @@
 	}
 </script>
 
+{#snippet content(o: SegmentOption, selected: boolean)}
+	{#if optionSnippet}
+		{@render optionSnippet(o, selected)}
+	{:else}
+		{#if o.icon}<Icon name={o.icon} />{/if}
+		{#if o.label}<span class="seg-label">{o.label}</span>{/if}
+		{#if o.count !== undefined}<span class="seg-count">{formatSegmentCount(o.count)}</span>{/if}
+	{/if}
+{/snippet}
+
 <div
 	bind:this={listEl}
 	role="radiogroup"
@@ -209,27 +226,42 @@
 	<span bind:this={thumb} class="seg-thumb" aria-hidden="true"></span>
 	{#each options as o (o.value)}
 		{@const selected = value === o.value}
-		<button
-			type="button"
-			id={segId(o.value)}
-			role="radio"
-			aria-checked={selected}
-			aria-label={variant === 'icon' && !o.label ? o.value : o.label}
-			tabindex={stop?.value === o.value ? 0 : -1}
-			class="seg-item"
-			class:has-label={!!o.label}
-			class:selected
-			disabled={o.disabled}
-			onclick={() => select(o.value)}
-		>
-			{#if optionSnippet}
-				{@render optionSnippet(o, selected)}
-			{:else}
-				{#if o.icon}<Icon name={o.icon} />{/if}
-				{#if o.label}<span class="seg-label">{o.label}</span>{/if}
-				{#if o.count !== undefined}<span class="seg-count">{formatSegmentCount(o.count)}</span>{/if}
-			{/if}
-		</button>
+		{@const link = linkTo(o)}
+		{#if link !== undefined}
+			<a
+				href={link}
+				id={segId(o.value)}
+				role="radio"
+				aria-checked={selected}
+				aria-current={selected ? 'page' : undefined}
+				aria-label={variant === 'icon' && !o.label ? o.value : o.label}
+				tabindex={stop?.value === o.value ? 0 : -1}
+				class="seg-item"
+				class:has-label={!!o.label}
+				class:selected
+				onclick={(e) => {
+					if (!isModifiedClick(e)) select(o.value);
+				}}
+			>
+				{@render content(o, selected)}
+			</a>
+		{:else}
+			<button
+				type="button"
+				id={segId(o.value)}
+				role="radio"
+				aria-checked={selected}
+				aria-label={variant === 'icon' && !o.label ? o.value : o.label}
+				tabindex={stop?.value === o.value ? 0 : -1}
+				class="seg-item"
+				class:has-label={!!o.label}
+				class:selected
+				disabled={o.disabled}
+				onclick={() => select(o.value)}
+			>
+				{@render content(o, selected)}
+			</button>
+		{/if}
 	{/each}
 </div>
 
@@ -354,6 +386,7 @@
 		line-height: var(--lh-none);
 		--icon-size: var(--control-icon-md);
 		white-space: nowrap;
+		text-decoration: none;
 		cursor: pointer;
 		transition:
 			background var(--dur-fast) var(--ease),
@@ -455,7 +488,7 @@
 		padding: 0 var(--sp-1-5);
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
-		color: var(--text-faint);
+		color: var(--text-muted);
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
 		font-variant-numeric: tabular-nums;

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

@@ -10,6 +10,8 @@ export interface SegmentOption {
     icon?: import('../atoms/Icon.svelte').IconName;
     /** Greyed out, not selectable, skipped by keyboard navigation. */
     disabled?: boolean;
+    /** Render this segment as a real link; overrides the control's `href`. */
+    href?: string;
 }
 import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';
@@ -18,6 +20,8 @@ type $$ComponentProps = {
     value?: string;
     /** Fires after a selection (click or keyboard). */
     onchange?: (value: string) => void;
+    /** Segments become real links (`<a aria-current>`): middle-click opens the segment's URL in a new tab. */
+    href?: (value: string) => string;
     /** Pin the control to the start/end of a flex row. */
     justify?: 'start' | 'end';
     /** Allow segments to wrap onto multiple lines. */

package/dist/components/molecules/SortableList.svelte

@@ -656,7 +656,7 @@
 	.sl-ordinal {
 		flex: none;
 		min-width: 1.5em;
-		color: var(--text-faint);
+		color: var(--text-muted);
 		font-size: var(--fs-sm);
 		font-variant-numeric: tabular-nums;
 		text-align: end;

package/dist/components/molecules/StatusBar.svelte

@@ -65,7 +65,7 @@
 		color: var(--text-muted);
 	}
 	.status-bar.idle {
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.status-bar :global(.status-glyph) {
 		flex: none;
@@ -85,7 +85,7 @@
 		display: inline-flex;
 		align-items: center;
 		gap: var(--sp-2);
-		color: var(--text-faint);
+		color: var(--text-muted);
 		font-variant-numeric: tabular-nums;
 		white-space: nowrap;
 	}

package/dist/components/molecules/Tabs.svelte

@@ -11,6 +11,8 @@
 		title?: string;
 		/** Per-tab override of the strip's `closable` (pin one tab open). */
 		closable?: boolean;
+		/** Render this tab as a real link; overrides the strip's `href`. */
+		href?: string;
 		/**
 		 * Extra attributes for this tab's button — `data-*`, `title`…
 		 * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
@@ -37,11 +39,13 @@
 	import Icon from '../atoms/Icon.svelte';
 	import IconButton from './IconButton.svelte';
 	import { playSound } from '../../sound';
+	import { isModifiedClick } from '../../url-state.svelte';
 
 	let {
 		tabs,
 		value = $bindable(),
 		label = 'Tabs',
+		href,
 		panel,
 		closable = false,
 		onclose,
@@ -60,6 +64,8 @@
 		tabs: TabItem[];
 		value?: string;
 		label?: string;
+		/** Tabs become real links (`<a aria-current>`): middle-click opens the tab's URL in a new tab. */
+		href?: (id: string) => string;
 		/** Content for the active tab. Omit it for a strip-only tablist. */
 		panel?: Snippet<[string]>;
 		/** Every tab gets a close control; Delete and middle-click close too. */
@@ -101,6 +107,10 @@
 	function canClose(t: TabItem): boolean {
 		return t.closable ?? closable;
 	}
+	function linkTo(t: TabItem): string | undefined {
+		if (t.disabled || canClose(t)) return undefined;
+		return t.href ?? href?.(t.id);
+	}
 
 	// One indicator slides under the selected tab on translate/scale (never
 	// width/left). It snaps on mount and on reflow, and only animates on a
@@ -288,6 +298,27 @@
 							}}
 						/>
 					</div>
+				{:else if linkTo(t) !== undefined}
+					<a
+						{...t.attrs as HTMLAttributes<HTMLAnchorElement>}
+						href={linkTo(t)}
+						role="tab"
+						id="{baseId}-tab-{t.id}"
+						title={t.title ?? t.attrs?.title}
+						aria-selected={value === t.id}
+						aria-current={value === t.id ? 'page' : undefined}
+						aria-controls={panelId}
+						tabindex={stop?.id === t.id ? 0 : -1}
+						class="tab"
+						class:selected={value === t.id}
+						onclick={(e) => {
+							if (isModifiedClick(e)) return;
+							inkFrom(e);
+							select(t.id);
+						}}
+					>
+						{@render body(t)}
+					</a>
 				{:else}
 					<button
 						type="button"
@@ -362,6 +393,7 @@
 		border: none;
 		background: none;
 		color: var(--text-muted);
+		text-decoration: none;
 		font-size: var(--control-fs-md);
 		font-weight: var(--fw-medium);
 		--icon-size: var(--control-icon-md);

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

@@ -10,6 +10,8 @@ export interface TabItem {
     title?: string;
     /** Per-tab override of the strip's `closable` (pin one tab open). */
     closable?: boolean;
+    /** Render this tab as a real link; overrides the strip's `href`. */
+    href?: string;
     /**
      * Extra attributes for this tab's button — `data-*`, `title`…
      * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
@@ -23,6 +25,8 @@ type Own = {
     tabs: TabItem[];
     value?: string;
     label?: string;
+    /** Tabs become real links (`<a aria-current>`): middle-click opens the tab's URL in a new tab. */
+    href?: (id: string) => string;
     /** Content for the active tab. Omit it for a strip-only tablist. */
     panel?: Snippet<[string]>;
     /** Every tab gets a close control; Delete and middle-click close too. */

package/dist/components/molecules/ThemePicker.svelte

@@ -181,7 +181,7 @@
 		--c-bg: #0f1115;
 		--c-surface: #21262f;
 		--c-text: #e6e9ef;
-		--c-accent: #5ad6a0;
+		--c-accent: #4cc3f0;
 	}
 	.q {
 		display: block;
@@ -212,7 +212,7 @@
 		font-size: var(--fs-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.grid {
 		display: grid;
@@ -297,7 +297,7 @@
 	}
 	.auto-help {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 		white-space: normal;
 	}
 	.auto-pair {