@dorsk/tsumikit 0.81.0 → 0.82.1

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

@@ -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

@@ -231,12 +231,15 @@
 
 <style>
 	/* Reset the UA dialog box: we own the surface via the inner .sheet. The
-	   dialog itself is just the centering/backdrop layer. */
+	   dialog itself is just the centering/backdrop layer. It must never scroll:
+	   the UA `overflow: auto` lets the initial focus scroll the sheet into view
+	   while it still sits at `translate: 0 100%`, which eats the slide-in. */
 	.modal {
 		margin: 0;
 		padding: 0;
 		border: 0;
 		background: none;
+		overflow: clip;
 		max-width: 100vw;
 		max-height: 100dvh;
 		width: 100%;
@@ -271,7 +274,7 @@
 			opacity: 0;
 		}
 	}
-	@media (min-width: 640px) {
+	@media (min-width: 40rem) {
 		.modal {
 			align-items: center;
 			padding: var(--sp-6);
@@ -309,7 +312,7 @@
 			translate: 0 100%;
 		}
 	}
-	@media (min-width: 640px) {
+	@media (min-width: 40rem) {
 		.sheet {
 			border-radius: var(--r-lg);
 			padding-bottom: 0;
@@ -394,7 +397,7 @@
 	.sheet-resize {
 		display: none;
 	}
-	@media (min-width: 640px) {
+	@media (min-width: 40rem) {
 		.sheet-resize {
 			display: block;
 			position: absolute;
@@ -439,7 +442,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

@@ -83,6 +83,7 @@
 
 	const uid = Math.random().toString(36).slice(2, 8);
 	const listId = `rs-list-${uid}`;
+	const nameId = `rs-name-${uid}`;
 	const optionId = (i: number) => `rs-opt-${uid}-${i}`;
 
 	let root = $state<HTMLDivElement | null>(null);
@@ -96,6 +97,7 @@
 
 	const selectedIndex = $derived(options.findIndex((o) => getKey(o) === value));
 	const selectedOption = $derived(selectedIndex >= 0 ? options[selectedIndex] : undefined);
+	const triggerName = $derived(selectedOption === undefined ? label : `${label}, ${getLabel(selectedOption)}`);
 	const typeahead = createTypeahead();
 
 	const triggerEl = () => root?.querySelector<HTMLElement>('.rs-trigger') ?? null;
@@ -150,6 +152,7 @@
 		if (key !== value) {
 			value = key;
 			onchange?.(key, next);
+			if (!closeAfter) announcement = getLabel(next);
 			playSound(closeAfter ? 'click' : 'tick', sound);
 		}
 		if (closeAfter) {
@@ -354,6 +357,7 @@
 		onopen={onOpen}
 		onclose={onClose}
 		aria-controls={listId}
+		aria-labelledby={nameId}
 		aria-activedescendant={open && active >= 0 ? optionId(active) : undefined}
 	>
 		{#snippet trigger()}
@@ -407,6 +411,7 @@
 			<div class="rs-footer">{@render footer({ close })}</div>
 		{/if}
 	</Popover>
+	<span class="sr-only" id={nameId}>{triggerName}</span>
 	<span class="sr-only" aria-live="polite">{announcement}</span>
 </div>
 
@@ -487,8 +492,10 @@
 	.rich-select.is-open .rs-chevron {
 		rotate: 180deg;
 	}
-	.rich-select :global(.pop-panel.rs-panel) {
+	.rich-select :global(.pop-panel.rs-panel:popover-open) {
 		display: flex;
+	}
+	.rich-select :global(.pop-panel.rs-panel) {
 		flex-direction: column;
 		gap: var(--sp-1);
 		box-sizing: border-box;

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;
 	}