@dorsk/tsumikit 0.19.1 → 0.20.0

package/README.md

@@ -69,12 +69,12 @@ 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
+Slider, Progress, Card (`tone` tints the surface for inline banners), Badge, Dot, Link, 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 +84,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` /

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/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/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';

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

package/package.json

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