@dorsk/tsumikit 0.80.3 → 0.82.0

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

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { IconName } from '../atoms/Icon.svelte';
+type Own = {
+    as?: 'div' | 'header' | 'section';
+    src?: string | null;
+    srcset?: string;
+    sizes?: string;
+    alt: string;
+    /** Drives the placeholder gradient hue and initials. Defaults to `alt`. */
+    seed?: string;
+    /** Any CSS length. Defaults to a viewport-relative height capped by --backdrop-h. */
+    height?: string;
+    /** Gradient from the image into --bg along the bottom edge. */
+    fade?: 'bottom' | 'none';
+    /** Soften the picture behind the content. */
+    blur?: boolean;
+    /** Darken (tint toward --bg) the whole picture, not just the scrim. */
+    dim?: boolean;
+    fit?: 'cover' | 'contain';
+    fallback?: 'initials' | 'icon' | 'none';
+    icon?: IconName;
+    onerror?: () => void;
+    class?: string;
+    children?: Snippet;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
+declare const Backdrop: import("svelte").Component<$$ComponentProps, {}, "">;
+type Backdrop = ReturnType<typeof Backdrop>;
+export default Backdrop;

package/dist/components/layouts/NavSection.svelte

@@ -52,8 +52,8 @@
 	.nav-section-label {
 		padding: 0 var(--sp-3);
 		margin-bottom: var(--sp-1);
-		color: var(--text-faint);
-		font-family: var(--font-mono);
+		color: var(--text-muted);
+		font-family: var(--font-label);
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);
 		text-transform: uppercase;

package/dist/components/molecules/AttachmentList.svelte

@@ -202,7 +202,7 @@
 	}
 	.size {
 		margin-inline-start: var(--sp-1);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	li {
 		display: flex;

package/dist/components/molecules/CapBar.svelte

@@ -406,7 +406,7 @@
 	.caption {
 		grid-column: 2 / 3;
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.cap-bar:not(:has(.label)) .caption {
 		grid-column: 1 / 3;

package/dist/components/molecules/Composer.svelte

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

package/dist/components/molecules/Dropzone.svelte

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

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

@@ -496,7 +496,7 @@
 		font-size: var(--control-fs-sm);
 	}
 	.fi--pill .fi__bar {
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		padding-inline: var(--sp-4);
 	}
 	.surface-raised .fi__bar {
@@ -548,7 +548,8 @@
 		border: 0;
 		background: transparent;
 		color: var(--text);
-		font-family: var(--font-mono);
+		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-mono);
+		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

@@ -187,7 +187,7 @@
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		color: var(--text-muted);
-		font-family: var(--font-mono);
+		font-family: var(--font-label);
 		line-height: var(--lh-snug);
 	}
 	.metric-chip {
@@ -207,7 +207,8 @@
 		display: flex;
 		align-items: baseline;
 		gap: var(--sp-1);
-		font-family: var(--font-mono);
+		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 {
@@ -274,7 +275,8 @@
 		flex-wrap: wrap;
 		align-items: baseline;
 		gap: var(--sp-1) var(--sp-3);
-		font-family: var(--font-mono);
+		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>
 
@@ -249,7 +281,7 @@
 		padding: var(--sp-0-5);
 		background: var(--track-fill);
 		border: var(--edge-width) solid var(--track-edge);
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		max-width: 100%;
 		min-width: 0;
 	}
@@ -325,7 +357,7 @@
 		left: 0;
 		width: 0;
 		height: 0;
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		background: var(--thumb-fill);
 		box-shadow: var(--thumb-shadow);
 		transform-origin: top left;
@@ -346,7 +378,7 @@
 		height: 100%;
 		padding: 0 var(--control-px-md);
 		border: 0;
-		border-radius: var(--r-pill);
+		border-radius: var(--r-control);
 		background: transparent;
 		color: var(--text-muted);
 		font-size: var(--control-fs-md);
@@ -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),
@@ -370,7 +403,7 @@
 	}
 	/* Capped at half a row: one row stays a pill, extra rows square the corners. */
 	.seg-wrap:not(.seg-icon) {
-		border-radius: calc(var(--seg-h) / 2);
+		border-radius: min(var(--r-control), calc(var(--seg-h) / 2));
 	}
 	/* Icon-only segments are squares; corners stay concentric with the track. */
 	.seg-icon .seg-item,
@@ -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;