@dorsk/tsumikit 0.19.1 → 0.21.0

package/README.md

@@ -69,12 +69,16 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 ## Components
 
 **Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
-Slider, Progress, Card, Badge, Dot, Link, Icon (open registry — pass a
-`children` snippet for any custom SVG).
+Slider, Progress, Card (`tone` tints the surface for inline banners), Badge
+(`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
+`icon`, `numeric`, `truncate`, `variant="text"`; all tints derive from
+`--badge-tone`), Dot (`ring` dark halo over artwork), Link (`tone`, `underline`
+always/hover/none, `align`), Icon (open registry — pass a `children` snippet for
+any custom SVG).
 
 **Molecules:** Field, IconButton, SelectButton, Toggle, OptionButton, Modal,
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
-Dropzone, CodeBlock, Toaster, ThemePicker, FontScalePicker.
+Dropzone, CodeBlock, Callout, EmptyState, Toaster, ThemePicker, FontScalePicker.
 
 **Organisms:** DataTable (generic `<T>`, typed columns + cell snippets).
 
@@ -84,6 +88,46 @@ sidebar on desktop, overlay drawer on mobile, optionally resizable), NavItem
 (vertical), Cluster (wrapping row), AutoGrid (intrinsically responsive columns —
 no media/container query needed).
 
+### Stacked distribution + legend
+
+`SegmentedProgress mode="stacked"` turns the bar into one shared track whose slice
+widths follow `value` (not `max`), fully filled, no gaps; a zero value collapses to
+nothing. Pass a top-level `max` to show the remainder as empty track. `legend`
+renders a dot + label + count per segment (`true`/`'below'` or `'inline'`), or takes
+a snippet for custom rendering. In this mode the bar is `role="img"`, labelled from
+the segments. `gap` (px or CSS length, default `2`) applies in segments mode, and
+`tone: 'ok'` is an alias of `'success'`.
+
+```svelte
+<SegmentedProgress
+  mode="stacked"
+  label="Analysis"
+  max={analyzedCount}
+  legend
+  segments={[
+    { value: 412, max: 0, tone: 'ok', label: 'conforming' },
+    { value: 12, max: 0, tone: 'warn', label: 'nonconforming' },
+    { value: 0, max: 0, tone: 'danger', label: 'blocked' }
+  ]}
+/>
+```
+
+### Tinted surfaces & Callout
+
+`Card` takes `tone="neutral" | "ok" | "warn" | "danger" | "info"` (default
+`neutral`, unchanged look) to tint its border and wash its background with the
+semantic hue. `Callout` builds on it for inline messages: leading glyph (auto
+per tone, or `icon`), optional `title`, body, right-aligned `actions` snippet,
+`dismissible` + `ondismiss`, and `busy` to show a Spinner while work runs. It
+is a live region — `role="status"`, or `role="alert"` when `tone="danger"`.
+
+```svelte
+<Callout tone="danger" title="Search failed" dismissible ondismiss={clear}>
+  The provider returned 503.
+  {#snippet actions()}<Button size="sm" onclick={retry}>Retry</Button>{/snippet}
+</Callout>
+```
+
 ## Container queries
 
 AppShell's `main` and `sidebar` are query containers (`container-name: main` /
@@ -95,6 +139,13 @@ Use the `.cq-*` utilities (`.cq-hide`, `.cq-stack`, `.cq-truncate`,
 you drag the sidebar down to that icon rail (width persisted).
 
 **Stores:** `theme`, `toasts`, `fontScale` (opt-in). **Actions:** `autoresize`.
+
+`toasts.show(message, { tone, duration, action })` plus the `ok`/`error`/`info`
+shorthands (tones `neutral|ok|error|info`; `danger` aliases `error`). An `action`
+(`{ label, run }`) renders a button; the toast shows a loading state while `run`
+settles, then dismisses, and action toasts stay 7s instead of 4s (`duration: 0` is
+sticky). `Toaster` renders in the browser top layer (`popover="manual"`), so toasts
+paint above an open `Modal`; `--toast-max-width` (28rem) caps the stack.
 **Helpers:** `copyToClipboard(text)` — async Clipboard API with an
 insecure-context fallback; returns whether it succeeded.
 

package/dist/components/atoms/Badge.svelte

@@ -1,23 +1,43 @@
 <script lang="ts">
 	// Inline label primitive — the project's single pill. Covers three jobs via
 	// props rather than separate components:
-	//   • state  → `tone` (neutral/ok/warn/danger/info) semantic palette
+	//   • state  → `tone` semantic palette, or `color` for any CSS colour
 	//   • info   → `mono` for paths/ids/code-ish metadata
 	//   • tag    → `removable` renders a dismiss button + fires `onremove`
 	// Polymorphic via `as` so it can be a static <span> or an interactive
-	// <button>. `size="sm"` is the compact form for counts/dense rows.
+	// <button>. Every tinted style derives from the `--badge-tone` custom
+	// property, which is the public hook for consumers who theme by CSS.
 	import type { Snippet } from 'svelte';
+	import Dot from './Dot.svelte';
+	import Icon, { type IconName } from './Icon.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
+
+	const TONE_COLOR: Record<Exclude<Tone, 'neutral'>, string> = {
+		ok: 'var(--ok)',
+		warn: 'var(--warn)',
+		danger: 'var(--danger)',
+		info: 'var(--info)',
+		accent: 'var(--accent)',
+		muted: 'var(--text-muted)',
+		violet: 'var(--c-violet)',
+	};
 
 	let {
 		tone = 'neutral',
+		color,
 		as = 'span',
 		size = 'md',
+		variant = 'chip',
 		mono = false,
 		uppercase = false,
+		numeric = false,
+		truncate = false,
+		maxWidth,
 		border = true,
 		active = false,
+		dot = false,
+		icon,
 		removable = false,
 		onremove,
 		class: klass = '',
@@ -25,23 +45,39 @@
 		...rest
 	}: {
 		tone?: Tone;
+		// Any CSS colour (or var()) for a one-off tint; overrides `tone`.
+		color?: string;
 		as?: 'span' | 'button';
-		size?: 'sm' | 'md';
+		// `xs` is the densest form for counters in tight rows.
+		size?: 'xs' | 'sm' | 'md';
+		// `text` drops the chip (no fill, ring or padding) but keeps badge
+		// typography and tint — for mono metadata that must not read as a pill.
+		variant?: 'chip' | 'text';
 		mono?: boolean;
 		// Uppercase, letter-spaced label — for status tags/eyebrows.
 		uppercase?: boolean;
+		// Tabular digits with a minimum width so counters don't jitter.
+		numeric?: boolean;
+		// Clip long content with an ellipsis instead of overflowing.
+		truncate?: boolean;
+		maxWidth?: string;
 		// Borderless "soft" variant: tone-tinted fill pill with no ring. The
 		// default (`true`) keeps the outlined look for backwards compatibility.
 		border?: boolean;
 		// Interactive "on" state for a toggle/count badge (`as="button"`): fills the
 		// pill with its tone instead of just tinting the border.
 		active?: boolean;
+		// Leading status dot in the badge colour.
+		dot?: boolean;
+		icon?: IconName;
 		removable?: boolean;
 		onremove?: (e: MouseEvent) => void;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const toneColor = $derived(color ?? (tone === 'neutral' ? undefined : TONE_COLOR[tone]));
 </script>
 
 <svelte:element
@@ -52,15 +88,32 @@
 	class:badge-warn={tone === 'warn'}
 	class:badge-danger={tone === 'danger'}
 	class:badge-info={tone === 'info'}
+	class:toned={toneColor !== undefined}
 	class:badge-sm={size === 'sm'}
+	class:badge-xs={size === 'xs'}
+	class:text={variant === 'text'}
 	class:mono
 	class:uppercase
+	class:numeric
+	class:truncate
 	class:borderless={!border}
 	class:active
 	class:interactive={as === 'button'}
+	style:--badge-tone={toneColor}
+	style:--badge-max-width={maxWidth}
 	{...rest}
 >
-	{@render children?.()}
+	{#if dot}
+		<Dot color="var(--badge-tone, currentColor)" />
+	{/if}
+	{#if icon}
+		<Icon name={icon} />
+	{/if}
+	{#if truncate}
+		<span class="clip">{@render children?.()}</span>
+	{:else}
+		{@render children?.()}
+	{/if}
 	{#if removable}
 		<button
 			type="button"
@@ -87,32 +140,29 @@
 		color: var(--text-muted);
 		border: 1px solid var(--border);
 		white-space: nowrap;
-		max-width: 100%;
+		max-width: var(--badge-max-width, 100%);
 	}
-	.badge-sm {
-		padding: 0 0.4rem;
-		font-size: 0.6875rem;
+	.badge-sm,
+	.badge-xs {
+		font-size: calc(var(--fs-xs) * 0.92);
 		gap: 0.15rem;
 	}
-	.badge-ok {
-		color: var(--ok);
-		border-color: color-mix(in srgb, var(--ok) 40%, transparent);
-		background: color-mix(in srgb, var(--ok) 12%, transparent);
+	.badge-sm {
+		padding: 0 0.4rem;
 	}
-	.badge-warn {
-		color: var(--warn);
-		border-color: color-mix(in srgb, var(--warn) 40%, transparent);
-		background: color-mix(in srgb, var(--warn) 12%, transparent);
+	.badge-xs {
+		padding: 0.05rem var(--sp-2);
 	}
-	.badge-danger {
-		color: var(--danger);
-		border-color: color-mix(in srgb, var(--danger) 40%, transparent);
-		background: color-mix(in srgb, var(--danger) 12%, transparent);
+	.toned {
+		color: var(--badge-tone);
+		border-color: color-mix(in srgb, var(--badge-tone) 40%, transparent);
+		background: color-mix(in srgb, var(--badge-tone) 12%, transparent);
 	}
-	.badge-info {
-		color: var(--info);
-		border-color: color-mix(in srgb, var(--info) 40%, transparent);
-		background: color-mix(in srgb, var(--info) 12%, transparent);
+	.text {
+		padding: 0;
+		border-color: transparent;
+		background: none;
+		border-radius: 0;
 	}
 	/* Soft variant: drop the ring, keep the tinted fill. Transparent (not
 	   `border: 0`) so layout/baseline matches the outlined default exactly. */
@@ -128,24 +178,26 @@
 		letter-spacing: 0.04em;
 		font-weight: var(--fw-semibold);
 	}
-	/* Interactive "on" state: fill the pill with its tone. Falls back to the
-	   neutral accent when no semantic tone is set. */
-	.active {
-		color: var(--text-on-accent);
-		background: var(--badge-fill, var(--accent));
-		border-color: var(--badge-fill, var(--accent));
-	}
-	.badge-ok.active {
-		--badge-fill: var(--ok);
+	.numeric {
+		font-variant-numeric: tabular-nums;
+		min-width: 1.5em;
+		justify-content: center;
 	}
-	.badge-warn.active {
-		--badge-fill: var(--warn);
+	.truncate {
+		min-width: 0;
 	}
-	.badge-danger.active {
-		--badge-fill: var(--danger);
+	.clip {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
-	.badge-info.active {
-		--badge-fill: var(--info);
+	/* Interactive "on" state: fill the pill with its tone. Falls back to the
+	   neutral accent when no tone or colour is set. */
+	.active {
+		color: var(--text-on-accent);
+		background: var(--badge-tone, var(--accent));
+		border-color: var(--badge-tone, var(--accent));
 	}
 	.interactive {
 		cursor: pointer;
@@ -159,9 +211,13 @@
 	}
 	.interactive.active:hover {
 		color: var(--text-on-accent);
-		border-color: var(--badge-fill, var(--accent));
+		border-color: var(--badge-tone, var(--accent));
 		filter: brightness(1.08);
 	}
+	.interactive:focus-visible {
+		outline: 2px solid var(--badge-tone, var(--accent));
+		outline-offset: 2px;
+	}
 	.remove {
 		display: inline-flex;
 		align-items: center;

package/dist/components/atoms/Badge.svelte.d.ts

@@ -1,13 +1,21 @@
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+import { type IconName } from './Icon.svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
 type $$ComponentProps = {
     tone?: Tone;
+    color?: string;
     as?: 'span' | 'button';
-    size?: 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md';
+    variant?: 'chip' | 'text';
     mono?: boolean;
     uppercase?: boolean;
+    numeric?: boolean;
+    truncate?: boolean;
+    maxWidth?: string;
     border?: boolean;
     active?: boolean;
+    dot?: boolean;
+    icon?: IconName;
     removable?: boolean;
     onremove?: (e: MouseEvent) => void;
     class?: string;

package/dist/components/atoms/Card.svelte

@@ -4,6 +4,8 @@
 	// interactive hover/active affordance for tappable list items (e.g. session
 	// rows); `as` lets it be a button/anchor when the whole surface is clickable.
 	// `padding` dials the inner spacing (none/sm/md/lg) for denser cards.
+	// `tone` tints the surface itself (border + faint background wash) with a
+	// semantic hue for inline banners; `neutral` is the plain card.
 	//
 	// `stacked` fakes a pile of cards by drawing two layers peeking out below
 	// (and optionally to the right) via pseudo-elements. `stackTone` tints those
@@ -20,6 +22,7 @@
 		as = 'div',
 		padding = 'md',
 		surface = 'base',
+		tone = 'neutral',
 		stacked = false,
 		stackTone = 'neutral',
 		stackY = 8,
@@ -33,6 +36,7 @@
 		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
 		padding?: 'none' | 'sm' | 'md' | 'lg';
 		surface?: 'base' | 'raised' | 'sunken';
+		tone?: Tone;
 		stacked?: boolean;
 		stackTone?: Tone;
 		stackY?: number;
@@ -58,6 +62,10 @@
 	class:surface-raised={surface === 'raised'}
 	class:surface-sunken={surface === 'sunken'}
 	class:card-tap={tap}
+	class:card-ok={tone === 'ok'}
+	class:card-warn={tone === 'warn'}
+	class:card-danger={tone === 'danger'}
+	class:card-info={tone === 'info'}
 	class:card-stacked={stacked}
 	class:stack-ok={stacked && stackTone === 'ok'}
 	class:stack-warn={stacked && stackTone === 'warn'}
@@ -107,6 +115,26 @@
 		border-color: var(--border-strong);
 	}
 
+	.card-ok {
+		--card-tone: var(--ok);
+	}
+	.card-warn {
+		--card-tone: var(--warn);
+	}
+	.card-danger {
+		--card-tone: var(--danger);
+	}
+	.card-info {
+		--card-tone: var(--info);
+	}
+	.card-ok,
+	.card-warn,
+	.card-danger,
+	.card-info {
+		border-color: color-mix(in srgb, var(--card-tone) 55%, var(--border));
+		background: color-mix(in srgb, var(--card-tone) 8%, var(--bg-elevated));
+	}
+
 	/* Stacked effect — two back layers peeking out bottom-right. The front
 	   surface keeps its own background so the layers only show at the edges. */
 	.card-stacked {

package/dist/components/atoms/Card.svelte.d.ts

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
     padding?: 'none' | 'sm' | 'md' | 'lg';
     surface?: 'base' | 'raised' | 'sunken';
+    tone?: Tone;
     stacked?: boolean;
     stackTone?: Tone;
     stackY?: number;

package/dist/components/atoms/Dot.svelte

@@ -5,7 +5,8 @@
 	//   • status → one of the semantic presets (active/stale/dead/hibernated),
 	//     each mapped to a token.
 	//   • color  → any CSS colour (or var()) for a one-off; overrides `status`.
-	// `glow` adds a soft halo in the dot's own colour. With a `label` the whole
+	// `glow` adds a soft halo in the dot's own colour; `ring` adds a dark halo so
+	// the dot stays legible over artwork. With a `label` the whole
 	// thing renders as an inline-flex row (dot + caption); without one it's a bare
 	// inline dot, so it can sit inline next to other text.
 	import Text from './Text.svelte';
@@ -24,6 +25,7 @@
 		color,
 		label,
 		glow = false,
+		ring = false,
 		class: klass = '',
 		...rest
 	}: {
@@ -31,6 +33,7 @@
 		color?: string;
 		label?: string;
 		glow?: boolean;
+		ring?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -40,11 +43,11 @@
 
 {#if label}
 	<span class="dot-row {klass}" data-tsu="Dot" {...rest}>
-		<span class="dot" class:glow style="--dot-color:{resolved}"></span>
+		<span class="dot" class:glow class:ring style="--dot-color:{resolved}"></span>
 		<Text variant="caption">{label}</Text>
 	</span>
 {:else}
-	<span class="dot {klass}" class:glow style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
+	<span class="dot {klass}" class:glow class:ring style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
 {/if}
 
 <style>
@@ -64,4 +67,12 @@
 	.glow {
 		box-shadow: 0 0 6px var(--dot-color);
 	}
+	.ring {
+		box-shadow: 0 0 0 3px rgb(0 0 0 / 0.35);
+	}
+	.ring.glow {
+		box-shadow:
+			0 0 0 3px rgb(0 0 0 / 0.35),
+			0 0 6px var(--dot-color);
+	}
 </style>

package/dist/components/atoms/Dot.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     color?: string;
     label?: string;
     glow?: boolean;
+    ring?: boolean;
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/atoms/Link.svelte

@@ -6,16 +6,38 @@
 
 	let {
 		href,
+		tone = 'accent',
+		underline = 'always',
+		align = 'start',
 		class: klass = '',
 		children,
 		...rest
-	}: { href?: string; class?: string; children?: Snippet; [key: string]: unknown } = $props();
+	}: {
+		href?: string;
+		tone?: 'accent' | 'info' | 'muted' | 'inherit';
+		underline?: 'always' | 'hover' | 'none';
+		// Text alignment of the <button> form; multi-line titles want `start`.
+		align?: 'start' | 'center';
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
 </script>
 
 {#if href}
-	<a {href} class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</a>
+	<a
+		{href}
+		class="link tone-{tone} underline-{underline} align-{align} {klass}"
+		data-tsu="Link"
+		{...rest}>{@render children?.()}</a
+	>
 {:else}
-	<button type="button" class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</button>
+	<button
+		type="button"
+		class="link tone-{tone} underline-{underline} align-{align} {klass}"
+		data-tsu="Link"
+		{...rest}>{@render children?.()}</button
+	>
 {/if}
 
 <style>
@@ -27,5 +49,25 @@
 		cursor: pointer;
 		text-decoration: underline;
 		font: inherit;
+		text-align: start;
+	}
+	.tone-info {
+		color: var(--info);
+	}
+	.tone-muted {
+		color: var(--text-muted);
+	}
+	.tone-inherit {
+		color: inherit;
+	}
+	.underline-hover,
+	.underline-none {
+		text-decoration: none;
+	}
+	.underline-hover:hover {
+		text-decoration: underline;
+	}
+	.align-center {
+		text-align: center;
 	}
 </style>

package/dist/components/atoms/Link.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     href?: string;
+    tone?: 'accent' | 'info' | 'muted' | 'inherit';
+    underline?: 'always' | 'hover' | 'none';
+    align?: 'start' | 'center';
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/atoms/SegmentedProgress.svelte

@@ -1,67 +1,156 @@
 <script lang="ts" module>
-	// One bar split into proportional segments (e.g. one per season of a series),
-	// each filled value/max with its own tone. Token-styled, thin separators.
+	// One bar split into segments, each with its own tone. Two modes:
+	//   • segments (default): widths ∝ `max`, each filled value/max, thin gaps.
+	//   • stacked: one shared track, widths ∝ `value` (Σvalue = full width, or
+	//     `max` when given), every slice 100 % filled, no gaps; a zero value
+	//     collapses to 0 width.
 	export type ProgressSegment = {
 		value: number;
+		// Ignored in `stacked` mode.
 		max: number;
-		// Fill colour per segment. `muted` renders a faint fill for empty parts.
-		tone?: 'accent' | 'success' | 'warn' | 'danger' | 'muted';
-		// Native tooltip / accessible name for the segment.
+		// Fill colour per segment. `ok` is an alias of `success`; `muted` renders a
+		// faint fill for empty parts.
+		tone?: 'accent' | 'success' | 'ok' | 'warn' | 'danger' | 'muted';
+		// Native tooltip / accessible name / legend caption for the segment.
 		label?: string;
 	};
+
+	export const TONE_FILL: Record<NonNullable<ProgressSegment['tone']>, string> = {
+		accent: 'var(--accent)',
+		success: 'var(--ok)',
+		ok: 'var(--ok)',
+		warn: 'var(--warn)',
+		danger: 'var(--danger)',
+		muted: 'var(--text-faint)',
+	};
 </script>
 
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Dot from './Dot.svelte';
+	import Text from './Text.svelte';
+
 	let {
 		segments,
 		label,
 		size = 'md',
-		class: klass = ''
+		mode = 'segments',
+		gap = 2,
+		max,
+		legend = false,
+		class: klass = '',
 	}: {
 		segments: ProgressSegment[];
 		label?: string;
 		// Track height. `sm` is a thin ~5px track for inline rows.
 		size?: 'sm' | 'md';
+		mode?: 'segments' | 'stacked';
+		// Space between segments in `segments` mode; a bare number is px.
+		gap?: number | string;
+		// `stacked` only: total the slices are measured against. When Σvalue < max
+		// the remainder shows the empty track.
+		max?: number;
+		// `true` = 'below'. A snippet receives the segments for custom rendering.
+		legend?: boolean | 'inline' | 'below' | Snippet<[ProgressSegment[]]>;
 		class?: string;
 	} = $props();
 
+	const stacked = $derived(mode === 'stacked');
 	const totalMax = $derived(segments.reduce((s, seg) => s + Math.max(0, seg.max), 0));
 	const totalValue = $derived(
-		segments.reduce((s, seg) => s + Math.max(0, Math.min(seg.value, seg.max)), 0)
+		segments.reduce((s, seg) => s + Math.max(0, Math.min(seg.value, seg.max)), 0),
+	);
+	const stackedTotal = $derived(segments.reduce((s, seg) => s + Math.max(0, seg.value), 0));
+	const remainder = $derived(max === undefined ? 0 : Math.max(0, max - stackedTotal));
+	const gapCss = $derived(stacked ? '0' : typeof gap === 'number' ? `${gap}px` : gap);
+	const legendPlacement = $derived(
+		legend === true ? 'below' : legend === 'inline' || legend === 'below' ? legend : null,
+	);
+	const legendSnippet = $derived(typeof legend === 'function' ? legend : null);
+	const hasLegend = $derived(legendPlacement !== null || legendSnippet !== null);
+	const stackedLabel = $derived(
+		[label, segments.map((seg) => `${seg.label ?? seg.tone ?? 'accent'} ${seg.value}`).join(', ')]
+			.filter(Boolean)
+			.join(': '),
 	);
 
 	function pct(seg: ProgressSegment): number {
+		if (stacked) return 100;
 		if (seg.max <= 0) return 0;
 		return Math.max(0, Math.min(100, (seg.value / seg.max) * 100));
 	}
+
+	function grow(seg: ProgressSegment): number {
+		return stacked ? Math.max(0, seg.value) : Math.max(seg.max, 1);
+	}
 </script>
 
-<div
-	data-tsu="SegmentedProgress"
-	class="segmented-progress size-{size} {klass}"
-	role="progressbar"
-	aria-label={label}
-	aria-valuemin={0}
-	aria-valuemax={totalMax}
-	aria-valuenow={totalValue}
->
-	{#each segments as seg, i (i)}
+{#snippet bar(rootClass: string)}
+	{#if stacked}
 		<div
-			class="segment tone-{seg.tone ?? 'accent'}"
-			style="flex-grow: {Math.max(seg.max, 1)}"
-			title={seg.label}
+			data-tsu="SegmentedProgress"
+			class="segmented-progress stacked size-{size} {rootClass}"
+			style="gap: {gapCss}"
+			role="img"
+			aria-label={stackedLabel}
 		>
-			<div class="bar" style="width: {pct(seg)}%"></div>
+			{#each segments as seg, i (i)}
+				<div class="segment tone-{seg.tone ?? 'accent'}" style="flex-grow: {grow(seg)}" title={seg.label}>
+					<div class="bar" style="width: {pct(seg)}%"></div>
+				</div>
+			{/each}
+			{#if remainder > 0}
+				<div class="segment remainder" style="flex-grow: {remainder}"></div>
+			{/if}
 		</div>
-	{/each}
-</div>
+	{:else}
+		<div
+			data-tsu="SegmentedProgress"
+			class="segmented-progress size-{size} {rootClass}"
+			style="gap: {gapCss}"
+			role="progressbar"
+			aria-label={label}
+			aria-valuemin={0}
+			aria-valuemax={totalMax}
+			aria-valuenow={totalValue}
+		>
+			{#each segments as seg, i (i)}
+				<div class="segment tone-{seg.tone ?? 'accent'}" style="flex-grow: {grow(seg)}" title={seg.label}>
+					<div class="bar" style="width: {pct(seg)}%"></div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+{/snippet}
+
+{#if hasLegend}
+	<div data-tsu="SegmentedProgress" class="segmented-progress-wrap legend-{legendPlacement ?? 'below'} {klass}">
+		{@render bar('')}
+		{#if legendSnippet}
+			{@render legendSnippet(segments)}
+		{:else}
+			<ul class="legend">
+				{#each segments as seg, i (i)}
+					<li class="legend-item">
+						<Dot color={TONE_FILL[seg.tone ?? 'accent']} />
+						{#if seg.label}
+							<Text variant="caption">{seg.label}</Text>
+						{/if}
+						<Text variant="caption" weight="medium" numeric>{seg.value}</Text>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{:else}
+	{@render bar(klass)}
+{/if}
 
 <style>
 	.segmented-progress {
 		display: flex;
 		width: 100%;
 		height: 0.5rem;
-		gap: 2px;
 		border-radius: var(--r-pill);
 	}
 	.segmented-progress.size-sm {
@@ -87,7 +176,8 @@
 		background: var(--fill, var(--accent));
 		transition: width 0.2s var(--ease);
 	}
-	.tone-success {
+	.tone-success,
+	.tone-ok {
 		--fill: var(--ok);
 	}
 	.tone-warn {
@@ -99,4 +189,44 @@
 	.tone-muted {
 		--fill: var(--text-faint);
 	}
+
+	.stacked {
+		overflow: hidden;
+		background: var(--bg-elevated-2);
+	}
+	.stacked .segment {
+		min-width: 0;
+		border-radius: 0;
+		background: transparent;
+		transition: flex-grow 0.2s var(--ease);
+	}
+
+	.segmented-progress-wrap {
+		display: flex;
+		width: 100%;
+		gap: var(--sp-2);
+	}
+	.legend-below {
+		flex-direction: column;
+	}
+	.legend-inline {
+		align-items: center;
+	}
+	.legend-inline .segmented-progress {
+		flex: 1 1 0%;
+		width: auto;
+	}
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sp-1) var(--sp-3);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.legend-item {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+	}
 </style>

package/dist/components/atoms/SegmentedProgress.svelte.d.ts

@@ -1,13 +1,19 @@
 export type ProgressSegment = {
     value: number;
     max: number;
-    tone?: 'accent' | 'success' | 'warn' | 'danger' | 'muted';
+    tone?: 'accent' | 'success' | 'ok' | 'warn' | 'danger' | 'muted';
     label?: string;
 };
+export declare const TONE_FILL: Record<NonNullable<ProgressSegment['tone']>, string>;
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     segments: ProgressSegment[];
     label?: string;
     size?: 'sm' | 'md';
+    mode?: 'segments' | 'stacked';
+    gap?: number | string;
+    max?: number;
+    legend?: boolean | 'inline' | 'below' | Snippet<[ProgressSegment[]]>;
     class?: string;
 };
 declare const SegmentedProgress: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/Callout.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	// Inline message banner — the one way to say "heads up" inside a page:
+	// tone-tinted Card with a leading glyph, optional title, body, right-aligned
+	// actions and an optional dismiss button. `busy` swaps the glyph for a
+	// Spinner (auto-search / long-running states). Announced as a live region:
+	// `status` normally, `alert` for danger so errors interrupt.
+	import type { Snippet } from 'svelte';
+	import Card from '../atoms/Card.svelte';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
+	import IconButton from './IconButton.svelte';
+
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
+	const DEFAULT_ICON: Record<Tone, IconName> = {
+		neutral: 'info',
+		info: 'info',
+		ok: 'check',
+		warn: 'warning',
+		danger: 'warning'
+	};
+
+	let {
+		tone = 'info',
+		icon,
+		title,
+		dismissible = false,
+		dismissLabel = 'Dismiss',
+		ondismiss,
+		busy = false,
+		class: klass = '',
+		children,
+		actions,
+		...rest
+	}: {
+		tone?: Tone;
+		icon?: IconName;
+		title?: string;
+		dismissible?: boolean;
+		dismissLabel?: string;
+		ondismiss?: () => void;
+		busy?: boolean;
+		class?: string;
+		children?: Snippet;
+		actions?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	let glyph = $derived(icon ?? DEFAULT_ICON[tone]);
+</script>
+
+<Card
+	{tone}
+	padding="none"
+	role={tone === 'danger' ? 'alert' : 'status'}
+	class="callout callout-{tone} {klass}"
+	data-tsu="Callout"
+	{...rest}
+>
+	<span class="callout-icon" aria-hidden={busy ? undefined : true}>
+		{#if busy}
+			<Spinner />
+		{:else}
+			<Icon name={glyph} />
+		{/if}
+	</span>
+	<div class="callout-body">
+		{#if title}<p class="callout-title">{title}</p>{/if}
+		{#if children}<div class="callout-text">{@render children()}</div>{/if}
+	</div>
+	{#if actions}
+		<div class="callout-actions">{@render actions()}</div>
+	{/if}
+	{#if dismissible}
+		<span class="callout-dismiss">
+			<IconButton icon="x" inline label={dismissLabel} onclick={() => ondismiss?.()} />
+		</span>
+	{/if}
+</Card>
+
+<style>
+	:global(.card.callout) {
+		--callout-tone: var(--text-muted);
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: var(--sp-3);
+		padding: var(--sp-3);
+	}
+	:global(.callout-ok) {
+		--callout-tone: var(--ok);
+	}
+	:global(.callout-warn) {
+		--callout-tone: var(--warn);
+	}
+	:global(.callout-danger) {
+		--callout-tone: var(--danger);
+	}
+	:global(.callout-info) {
+		--callout-tone: var(--info);
+	}
+
+	.callout-icon {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		color: var(--callout-tone);
+		font-size: 1.125rem;
+		line-height: 1;
+		min-height: 1.4em;
+	}
+	.callout-body {
+		flex: 1 1 12rem;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-1);
+		font-size: var(--fs-sm);
+		line-height: 1.5;
+		color: var(--text);
+	}
+	.callout-title {
+		margin: 0;
+		font-weight: var(--fw-semibold);
+	}
+	.callout-text {
+		overflow-wrap: anywhere;
+	}
+	.callout-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--sp-2);
+		margin-left: auto;
+	}
+	.callout-dismiss {
+		display: inline-flex;
+		flex: none;
+		margin-left: auto;
+	}
+	.callout-actions + .callout-dismiss {
+		margin-left: 0;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from '../atoms/Icon.svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+type $$ComponentProps = {
+    tone?: Tone;
+    icon?: IconName;
+    title?: string;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    ondismiss?: () => void;
+    busy?: boolean;
+    class?: string;
+    children?: Snippet;
+    actions?: Snippet;
+    [key: string]: unknown;
+};
+declare const Callout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/molecules/Toaster.svelte

@@ -1,31 +1,70 @@
 <script lang="ts">
 	// Renders the toast queue in a bottom-centered, polite live region. Mount once
-	// near the app root. Each toast is tap/click-dismissible; screen readers
-	// announce additions via aria-live. Sits in its own stacking context above
-	// page content but below modals' top layer.
+	// near the app root. The stack lives in a manual popover so it paints in the
+	// top layer above an open Modal <dialog>; without the Popover API the
+	// attribute is ignored and the fixed/z-index positioning applies instead.
 	import { toasts } from '../../stores/toast.svelte';
+	import Button from '../atoms/Button.svelte';
+	import Card from '../atoms/Card.svelte';
 	import Icon from '../atoms/Icon.svelte';
+
+	let el: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (!el || typeof el.showPopover !== 'function') return;
+		try {
+			if (toasts.items.length) el.showPopover();
+			else el.hidePopover();
+		} catch {}
+	});
 </script>
 
-<div class="toaster" role="status" aria-live="polite" aria-relevant="additions" data-tsu="Toaster">
+<div
+	class="toaster"
+	bind:this={el}
+	popover="manual"
+	role="status"
+	aria-live="polite"
+	aria-relevant="additions"
+	data-tsu="Toaster"
+>
 	{#each toasts.items as t (t.id)}
-		<button
-			type="button"
-			class="toast"
-			class:ok={t.tone === 'ok'}
-			class:err={t.tone === 'error'}
-			onclick={() => toasts.dismiss(t.id)}
-		>
-			{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{/if}
-			<span class="msg">{t.message}</span>
-			<Icon name="x" />
-		</button>
+		{#if t.action}
+			<Card
+				as="div"
+				surface="raised"
+				class="toast"
+				tone={t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
+			>
+				<button type="button" class="toast-text" onclick={() => toasts.dismiss(t.id)}>
+					{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
+					<span class="msg">{t.message}</span>
+				</button>
+				<Button size="sm" variant="ghost" loading={t.pending} onclick={() => toasts.act(t.id)}>
+					{t.action.label}
+				</Button>
+			</Card>
+		{:else}
+			<Card
+				as="button"
+				surface="raised"
+				class="toast"
+				tone={t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
+				type="button"
+				onclick={() => toasts.dismiss(t.id)}
+			>
+				{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
+				<span class="msg">{t.message}</span>
+				<Icon name="x" />
+			</Card>
+		{/if}
 	{/each}
 </div>
 
 <style>
 	.toaster {
 		position: fixed;
+		inset: auto;
 		left: 50%;
 		transform: translateX(-50%);
 		bottom: calc(var(--safe-bottom) + var(--sp-4));
@@ -34,36 +73,53 @@
 		flex-direction: column;
 		gap: var(--sp-2);
 		width: calc(100% - var(--sp-8));
-		max-width: 30rem;
+		max-width: var(--toast-max-width, 28rem);
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		overflow: visible;
 		pointer-events: none;
 	}
-	.toast {
+	.toaster:not(:popover-open) {
+		display: none;
+	}
+	.toaster :global(.toast) {
 		pointer-events: auto;
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
 		width: 100%;
 		text-align: left;
-		color: var(--text);
-		background: var(--bg-elevated-2);
-		border: 1px solid var(--border-strong);
-		border-radius: var(--r-md);
-		padding: var(--sp-3) var(--sp-4);
-		box-shadow: var(--shadow-md);
 		font-size: var(--fs-sm);
 		animation: toast-in 0.18s var(--ease);
 	}
-	.toast .msg {
-		flex: 1;
-	}
-	.toast.ok {
-		border-color: var(--ok);
+	.toaster :global(.toast.card-ok) {
 		color: var(--ok);
 	}
-	.toast.err {
-		border-color: var(--danger);
+	.toaster :global(.toast.card-danger) {
 		color: var(--danger);
 	}
+	.toaster :global(.toast.card-info) {
+		color: var(--info);
+	}
+	.toast-text {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+	}
+	.msg {
+		flex: 1;
+	}
 	@keyframes toast-in {
 		from {
 			transform: translateY(8px);

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

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toaster = InstanceType<typeof Toaster>;
+declare const Toaster: import("svelte").Component<Record<string, never>, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
 export default Toaster;

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { default as ResizablePanel } from './components/layouts/ResizablePanel.s
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
+export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
@@ -57,6 +58,6 @@ export { default as FilterSearchBar } from './components/organisms/FilterSearchB
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
-export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';
+export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { type TruncateMode, type TruncateOptions, truncate } from './truncate';

package/dist/index.js

@@ -35,6 +35,7 @@ export { default as ResizablePanel } from './components/layouts/ResizablePanel.s
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
+export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
@@ -70,6 +71,6 @@ export { activeToken, compilePredicate, defaultOperator, filters, findField, fre
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';
-export { toasts } from './stores/toast.svelte';
+export { toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { truncate } from './truncate';

package/dist/stores/toast.svelte.d.ts

@@ -1,19 +1,37 @@
-export type ToastTone = 'neutral' | 'ok' | 'error';
+export type ToastTone = 'neutral' | 'ok' | 'error' | 'info';
+/** Accepted by show(); 'danger' is normalised to 'error'. */
+export type ToastToneInput = ToastTone | 'danger';
+export interface ToastAction {
+    label: string;
+    run: () => void | Promise<void>;
+}
 export interface Toast {
     id: number;
     message: string;
     tone: ToastTone;
     duration: number;
+    action?: ToastAction;
+    /** True while `action.run` is in flight; the Toaster shows the button loading. */
+    pending: boolean;
+}
+export interface ToastOptions {
+    tone?: ToastToneInput;
+    duration?: number;
+    action?: ToastAction;
 }
+export declare const TOAST_MS = 4000;
+/** Toasts with an action linger longer: the action is only reachable while visible. */
+export declare const ACTION_TOAST_MS = 7000;
 declare class Toasts {
+    #private;
     items: Toast[];
-    show(message: string, opts?: {
-        tone?: ToastTone;
-        duration?: number;
-    }): number;
-    ok(message: string, duration?: number): number;
-    error(message: string, duration?: number): number;
+    show(message: string, opts?: ToastOptions): number;
+    ok(message: string, duration?: number, action?: ToastAction): number;
+    error(message: string, duration?: number, action?: ToastAction): number;
+    info(message: string, duration?: number, action?: ToastAction): number;
     dismiss(id: number): void;
+    /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
+    act(id: number): Promise<void>;
 }
 export declare const toasts: Toasts;
 export {};

package/dist/stores/toast.svelte.js

@@ -1,26 +1,60 @@
 // Toast manager. A tiny reactive queue; mount one <Toaster /> at the app root
-// and call toasts.show()/ok()/error() from anywhere. Auto-dismisses after
+// and call toasts.show()/ok()/error()/info() from anywhere. Auto-dismisses after
 // `duration` ms (0 = sticky). The Toaster renders an aria-live region so screen
 // readers announce messages.
+export const TOAST_MS = 4000;
+/** Toasts with an action linger longer: the action is only reachable while visible. */
+export const ACTION_TOAST_MS = 7000;
 let seq = 0;
 class Toasts {
     items = $state([]);
+    #timers = new Map();
     show(message, opts = {}) {
         const id = ++seq;
-        const duration = opts.duration ?? 4000;
-        this.items = [...this.items, { id, message, tone: opts.tone ?? 'neutral', duration }];
+        const duration = opts.duration ?? (opts.action ? ACTION_TOAST_MS : TOAST_MS);
+        const tone = opts.tone === 'danger' ? 'error' : (opts.tone ?? 'neutral');
+        this.items = [
+            ...this.items,
+            { id, message, tone, duration, action: opts.action, pending: false },
+        ];
         if (duration > 0)
-            setTimeout(() => this.dismiss(id), duration);
+            this.#timers.set(id, setTimeout(() => this.dismiss(id), duration));
         return id;
     }
-    ok(message, duration) {
-        return this.show(message, { tone: 'ok', duration });
+    ok(message, duration, action) {
+        return this.show(message, { tone: 'ok', duration, action });
     }
-    error(message, duration) {
-        return this.show(message, { tone: 'error', duration });
+    error(message, duration, action) {
+        return this.show(message, { tone: 'error', duration, action });
+    }
+    info(message, duration, action) {
+        return this.show(message, { tone: 'info', duration, action });
     }
     dismiss(id) {
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.#timers.delete(id);
         this.items = this.items.filter((t) => t.id !== id);
     }
+    /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
+    async act(id) {
+        const t = this.items.find((x) => x.id === id);
+        if (!t?.action || t.pending)
+            return;
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.items = this.items.map((x) => (x.id === id ? { ...x, pending: true } : x));
+        try {
+            await t.action.run();
+        }
+        catch (e) {
+            this.error(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            this.dismiss(id);
+        }
+    }
 }
 export const toasts = new Toasts();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "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",