@dorsk/tsumikit 0.38.1 → 0.40.0

package/dist/components/molecules/Metric.svelte

@@ -1,4 +1,18 @@
+<script lang="ts" module>
+	import type { IconName } from '../atoms/Icon.svelte';
+	import type { Tone } from '../../tone';
+
+	export type MetricSegment = {
+		glyph?: string;
+		icon?: IconName;
+		value: string | number;
+		tone?: Tone;
+		hint?: string;
+	};
+</script>
+
 <script lang="ts">
+	import { canonicalTone } from '../../tone';
 	// KPI / stat tile — the dashboard's repeating "one number" card. Composes on
 	// top of `Card` and lays out four parts:
 	//   • an uppercase, letter-spaced micro-label (top-left)
@@ -9,9 +23,8 @@
 	// `neutral` keeps the chip on the plain accent. Everything is token-driven.
 	import type { Snippet } from 'svelte';
 	import Card from '../atoms/Card.svelte';
-	import Icon, { type IconName } from '../atoms/Icon.svelte';
-
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	import Icon from '../atoms/Icon.svelte';
+	import Tooltip from './Tooltip.svelte';
 
 	let {
 		label,
@@ -25,6 +38,12 @@
 		// Theme-aware surface shade, forwarded to the composed Card so tiles can
 		// opt into the same shade as sibling panels (no app-level :global override).
 		surface = 'base',
+		size = 'md',
+		layout = 'card',
+		href,
+		external = false,
+		onclick,
+		segments,
 		class: klass = '',
 		// Raw SVG markup for a custom icon — passed through to `Icon` so any glyph
 		// outside the registry can fill the chip.
@@ -39,25 +58,78 @@
 		tone?: Tone;
 		tintValue?: boolean;
 		surface?: 'base' | 'raised' | 'sunken';
+		/** `sm` is a dense tile (smaller value, tighter padding). */
+		size?: 'sm' | 'md';
+		/** Render the tile as a link / button with tap feedback. */
+		href?: string;
+		/** With `href`: new tab plus an arrow glyph after the label. */
+		external?: boolean;
+		onclick?: (e: MouseEvent | KeyboardEvent) => void;
+		/** `inline` drops the Card and renders a single stat row. */
+		layout?: 'card' | 'inline';
+		/** Extra stats after the value, each with an optional Tooltip hint. */
+		segments?: MetricSegment[];
 		class?: string;
 		iconChildren?: Snippet;
 		[key: string]: unknown;
 	} = $props();
 </script>
 
+{#snippet segment(seg: MetricSegment)}
+	{@const c = canonicalTone(seg.tone ?? 'neutral')}
+	<span class="metric-seg metric-seg-{c}">
+		{#if seg.icon}<Icon name={seg.icon} />{:else if seg.glyph}<span aria-hidden="true">{seg.glyph}</span>{/if}
+		<span class="metric-seg-val">{seg.value}</span>
+	</span>
+{/snippet}
+
+{#snippet segmentRow()}
+	{#if segments?.length}
+		<div class="metric-segments">
+			{#each segments as seg, i (i)}
+				{#if seg.hint}
+					<Tooltip text={seg.hint}>{#snippet trigger()}{@render segment(seg)}{/snippet}</Tooltip>
+				{:else}
+					{@render segment(seg)}
+				{/if}
+			{/each}
+		</div>
+	{/if}
+{/snippet}
+
+{#if layout === 'inline'}
+	<div
+		data-tsu="Metric"
+		class="metric metric-inline metric-{canonicalTone(tone)} {tintValue ? 'metric-tint' : ''} {klass}"
+		class:metric-sm={size === 'sm'}
+		{...rest}
+	>
+		<span class="metric-label">{label}</span>
+		<span class="metric-value">
+			<span class="metric-num">{value}</span>
+			{#if unit}<span class="metric-unit">{unit}</span>{/if}
+		</span>
+		{@render segmentRow()}
+		{#if sub}<span class="metric-sub">{sub}</span>{/if}
+	</div>
+{:else}
 <Card
 	data-tsu="Metric"
-	class="metric metric-{tone} {tintValue ? 'metric-tint' : ''} {klass}"
+	class="metric metric-{canonicalTone(tone)} {tintValue ? 'metric-tint' : ''} {size === 'sm' ? 'metric-sm' : ''} {klass}"
+	padding={size === 'sm' ? 'sm' : undefined}
 	{surface}
+	as={href ? 'a' : onclick ? 'button' : 'div'}
+	{href}
+	target={href && external ? '_blank' : undefined}
+	rel={href && external ? 'noopener noreferrer' : undefined}
+	{onclick}
+	tap={!!(href || onclick)}
 	{...rest}
 >
 	<div class="metric-head">
-		<span class="metric-label">{label}</span>
+		<span class="metric-label">{label}{#if href && external}<Icon name="external" />{/if}</span>
 		{#if icon || iconChildren}
 			<span class="metric-chip" aria-hidden="true">
-				<!-- Only forward a children snippet when a custom icon was actually
-				     provided; otherwise Icon's `children` branch always wins and the
-				     registry `name` glyph never renders (empty chip). -->
 				{#if iconChildren}
 					<Icon name={icon}>{@render iconChildren()}</Icon>
 				{:else}
@@ -70,8 +142,10 @@
 		<span class="metric-num">{value}</span>
 		{#if unit}<span class="metric-unit">{unit}</span>{/if}
 	</div>
+	{@render segmentRow()}
 	{#if sub}<div class="metric-sub">{sub}</div>{/if}
 </Card>
+{/if}
 
 <style>
 	:global(.metric) {
@@ -130,6 +204,8 @@
 		line-height: 1.1;
 	}
 	.metric-num {
+		min-width: 0;
+		overflow-wrap: anywhere;
 		font-size: var(--fs-2xl);
 		font-weight: var(--fw-semibold);
 		color: var(--text);
@@ -148,4 +224,54 @@
 		color: var(--text-faint);
 		line-height: 1.4;
 	}
+	:global(.metric-sm) .metric-num {
+		font-size: var(--fs-lg);
+	}
+	:global(.metric-sm) .metric-chip {
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: 0.875rem;
+	}
+	.metric-inline {
+		flex-direction: row;
+		align-items: baseline;
+		flex-wrap: wrap;
+		gap: var(--sp-2) var(--sp-3);
+		min-width: 0;
+	}
+	.metric-inline .metric-num {
+		font-size: var(--fs-md);
+	}
+	.metric-segments {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: var(--sp-1) var(--sp-3);
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
+	.metric-seg {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		--seg-tone: var(--text-muted);
+		color: var(--seg-tone);
+		font-variant-numeric: tabular-nums;
+	}
+	.metric-seg-ok {
+		--seg-tone: var(--ok);
+	}
+	.metric-seg-warn {
+		--seg-tone: var(--warn);
+	}
+	.metric-seg-danger {
+		--seg-tone: var(--danger);
+	}
+	.metric-seg-info {
+		--seg-tone: var(--info);
+	}
+	.metric-seg-accent {
+		--seg-tone: var(--accent);
+	}
 </style>

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

@@ -1,6 +1,13 @@
+import type { IconName } from '../atoms/Icon.svelte';
+import type { Tone } from '../../tone';
+export type MetricSegment = {
+    glyph?: string;
+    icon?: IconName;
+    value: string | number;
+    tone?: Tone;
+    hint?: string;
+};
 import type { Snippet } from 'svelte';
-import { type IconName } from '../atoms/Icon.svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type $$ComponentProps = {
     label: string;
     value: string | number;
@@ -10,6 +17,17 @@ type $$ComponentProps = {
     tone?: Tone;
     tintValue?: boolean;
     surface?: 'base' | 'raised' | 'sunken';
+    /** `sm` is a dense tile (smaller value, tighter padding). */
+    size?: 'sm' | 'md';
+    /** Render the tile as a link / button with tap feedback. */
+    href?: string;
+    /** With `href`: new tab plus an arrow glyph after the label. */
+    external?: boolean;
+    onclick?: (e: MouseEvent | KeyboardEvent) => void;
+    /** `inline` drops the Card and renders a single stat row. */
+    layout?: 'card' | 'inline';
+    /** Extra stats after the value, each with an optional Tooltip hint. */
+    segments?: MetricSegment[];
     class?: string;
     iconChildren?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/Modal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { canonicalTone, type Tone } from '../../tone';
 	// Accessible dialog / bottom-sheet built on the native <dialog> element, so
 	// the platform gives us the hard parts for free: top-layer rendering above
 	// everything (no z-index races), a real focus trap, inert background, initial
@@ -12,11 +13,12 @@
 	import Spinner from '../atoms/Spinner.svelte';
 	import IconButton from './IconButton.svelte';
 
-	type Tone = 'neutral' | 'danger' | 'warn' | 'info';
-	const TONE_ICON: Record<Exclude<Tone, 'neutral'>, IconName> = {
+	const TONE_ICON: Record<Exclude<Tone, 'neutral' | 'success'>, IconName> = {
 		danger: 'warning',
 		warn: 'warning',
-		info: 'info'
+		info: 'info',
+		ok: 'check',
+		accent: 'info'
 	};
 
 	let {
@@ -28,7 +30,11 @@
 		size = 'md',
 		tone = 'neutral',
 		busy = false,
-		resizeKey
+		resizeKey,
+		class: klass = '',
+		style: styleProp = '',
+		bodyClass = '',
+		maxHeight,
 	}: {
 		title: string;
 		/** Controlled visibility. When provided the `<dialog>` stays mounted and
@@ -49,7 +55,14 @@
 		/** When set, the sheet is horizontally resizable on desktop and the chosen
 		 *  width persists under this localStorage key. */
 		resizeKey?: string;
+		class?: string;
+		style?: string;
+		/** Class on the inner sheet (the visible panel). */
+		bodyClass?: string;
+		/** Cap the sheet height; the body scrolls inside it. */
+		maxHeight?: string;
 	} = $props();
+	const t = $derived(canonicalTone(tone));
 
 	const titleId = `modal-title-${Math.random().toString(36).slice(2, 8)}`;
 
@@ -135,12 +148,12 @@
 <dialog
 	bind:this={dialogEl}
 	data-tsu="Modal"
-	class="modal"
+	class="modal {klass}"
 	class:resizing
 	aria-labelledby={titleId}
 	aria-busy={busy || undefined}
-	data-tone={tone === 'neutral' ? undefined : tone}
-	style={width != null ? `--sheet-w: ${width}px` : undefined}
+	data-tone={t === 'neutral' ? undefined : t}
+	style="{width != null ? `--sheet-w: ${width}px;` : ''}{styleProp}"
 	oncancel={(e) => {
 		e.preventDefault(); /* keep parent the source of truth for open state */
 		requestClose();
@@ -151,16 +164,17 @@
 	onclick={onDialogClick}
 >
 	<div
-		class="sheet"
+		class="sheet {bodyClass}"
+		style:max-height={maxHeight}
 		class:sheet-sm={size === 'sm'}
 		class:sheet-lg={size === 'lg'}
 		class:sheet-xl={size === 'xl'}
-		class:sheet-toned={tone !== 'neutral'}
-		style:--modal-tone={tone === 'neutral' ? undefined : `var(--${tone})`}
+		class:sheet-toned={t !== 'neutral'}
+		style:--modal-tone={t === 'neutral' ? undefined : `var(--${t})`}
 	>
 		<div class="sheet-head">
-			{#if tone !== 'neutral'}
-				<span class="sheet-tone-icon"><Icon name={TONE_ICON[tone]} size={18} /></span>
+			{#if t !== 'neutral'}
+				<span class="sheet-tone-icon"><Icon name={TONE_ICON[t]} size={18} /></span>
 			{/if}
 			<span id={titleId} class="sheet-title truncate">{title}</span>
 			{#if busy}<Spinner label="Working" />{/if}

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

@@ -1,5 +1,5 @@
+import { type Tone } from '../../tone';
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'danger' | 'warn' | 'info';
 type $$ComponentProps = {
     title: string;
     /** Controlled visibility. When provided the `<dialog>` stays mounted and
@@ -20,6 +20,12 @@ type $$ComponentProps = {
     /** When set, the sheet is horizontally resizable on desktop and the chosen
      *  width persists under this localStorage key. */
     resizeKey?: string;
+    class?: string;
+    style?: string;
+    /** Class on the inner sheet (the visible panel). */
+    bodyClass?: string;
+    /** Cap the sheet height; the body scrolls inside it. */
+    maxHeight?: string;
 };
 declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/molecules/Pagination.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Page navigation in two flavours: page mode (`page` + `pageCount`) or
 	// offset mode (`offset` + `limit` + `total`, page/pageCount derived and
 	// `offset` written back). Numbered buttons collapse to prev / "3 / 12" /
@@ -17,6 +18,9 @@
 		showEdges = true,
 		showRange = false,
 		size = 'md',
+		grow = false,
+		shrink = true,
+		block = false,
 		label = 'Pagination',
 		class: klass = ''
 	}: {
@@ -34,7 +38,13 @@
 		showEdges?: boolean;
 		/** Show "1–20 / 412" (offset mode) or "3 / 12" next to the buttons. */
 		showRange?: boolean;
-		size?: 'sm' | 'md';
+		size?: ControlSize;
+		/** Fill the free space of a flex row (`flex: 1 1 0`). */
+		grow?: boolean;
+		/** `false` pins the box (`flex: none`) so a flex row cannot squeeze it. */
+		shrink?: boolean;
+		/** Full-width block. */
+		block?: boolean;
 		label?: string;
 		class?: string;
 	} = $props();
@@ -95,6 +105,9 @@
 <nav
 	data-tsu="Pagination"
 	class="pagination {klass}"
+	class:grow={grow}
+	class:no-shrink={!shrink}
+	class:block={block}
 	class:pagination-sm={size === 'sm'}
 	aria-label={label}
 >
@@ -139,6 +152,17 @@
 </nav>
 
 <style>
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.block {
+		display: flex;
+		width: 100%;
+	}
 	.pagination {
 		container-type: inline-size;
 		display: flex;

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

@@ -1,3 +1,4 @@
+import type { ControlSize } from '../../size';
 type $$ComponentProps = {
     /** 1-based current page. */
     page?: number;
@@ -13,10 +14,16 @@ type $$ComponentProps = {
     showEdges?: boolean;
     /** Show "1–20 / 412" (offset mode) or "3 / 12" next to the buttons. */
     showRange?: boolean;
-    size?: 'sm' | 'md';
+    size?: ControlSize;
+    /** Fill the free space of a flex row (`flex: 1 1 0`). */
+    grow?: boolean;
+    /** `false` pins the box (`flex: none`) so a flex row cannot squeeze it. */
+    shrink?: boolean;
+    /** Full-width block. */
+    block?: boolean;
     label?: string;
     class?: string;
 };
-declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "page" | "offset">;
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "offset" | "page">;
 type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

package/dist/components/molecules/Popover.svelte

@@ -38,7 +38,11 @@
 		role = 'dialog',
 		haspopup = 'dialog',
 		onopen,
-		onclose
+		onclose,
+		class: klass = '',
+		style: styleProp = '',
+		panelClass = '',
+		panelStyle = '',
 	}: {
 		placement?: Placement;
 		gap?: number;
@@ -74,6 +78,11 @@
 		haspopup?: HasPopup;
 		onopen?: () => void;
 		onclose?: () => void;
+		class?: string;
+		style?: string;
+		/** Class / inline style on the floating panel. */
+		panelClass?: string;
+		panelStyle?: string;
 	} = $props();
 
 	const canonicalChrome = $derived(
@@ -118,7 +127,8 @@
 	bind:this={triggerEl}
 	data-tsu="Popover"
 	type="button"
-	class="pop-trigger {triggerClass}"
+	class="pop-trigger {triggerClass} {klass}"
+	style={styleProp}
 	class:bare
 	class:canonical={canonicalChrome}
 	class:trigger-primary={variant === 'primary'}
@@ -149,7 +159,8 @@
 	bind:this={panelEl}
 	{id}
 	popover="auto"
-	class="pop-panel"
+	class="pop-panel {panelClass}"
+	style={panelStyle}
 	{role}
 	aria-label={label}
 	ontoggle={onToggle}
@@ -311,7 +322,7 @@
 		cursor: not-allowed;
 	}
 	/* `bare`: strip the chrome down to a plain button the consumer styles. */
-	.pop-trigger.bare {
+	:where(.pop-trigger.bare) {
 		height: auto;
 		min-height: 0;
 		min-width: 0;
@@ -320,7 +331,7 @@
 		border: 0;
 		background: none;
 	}
-	.pop-trigger.bare:hover:not(:disabled) {
+	:where(.pop-trigger.bare:hover:not(:disabled)) {
 		background: none;
 	}
 	.pop-panel {

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

@@ -40,6 +40,11 @@ type $$ComponentProps = {
     haspopup?: HasPopup;
     onopen?: () => void;
     onclose?: () => void;
+    class?: string;
+    style?: string;
+    /** Class / inline style on the floating panel. */
+    panelClass?: string;
+    panelStyle?: string;
 };
 declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
 type Popover = ReturnType<typeof Popover>;

package/dist/components/molecules/Prose.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	// Markdown style contract: headings, paragraphs, inline/block code, tables,
+	// quotes, lists and images, driven by the --md-* tokens. Feed it rendered
+	// `html` (already sanitised upstream) or children markup.
+	import type { Snippet } from 'svelte';
+
+	let {
+		html,
+		children,
+		compact = false,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		/** Pre-rendered, trusted HTML. */
+		html?: string;
+		children?: Snippet;
+		/** Tighter vertical rhythm for chat bubbles. */
+		compact?: boolean;
+		class?: string;
+		style?: string;
+	} = $props();
+</script>
+
+<div data-tsu="Prose" class="prose {klass}" class:compact style={styleProp}>
+	{#if html !== undefined}{@html html}{:else}{@render children?.()}{/if}
+</div>
+
+<style>
+	.prose {
+		color: var(--md-text, var(--text));
+		font-size: var(--fs-sm);
+		line-height: var(--lh-normal);
+		overflow-wrap: anywhere;
+		--prose-gap: var(--sp-3);
+	}
+	.prose.compact {
+		--prose-gap: var(--sp-2);
+	}
+	.prose :global(> * + *) {
+		margin-top: var(--prose-gap);
+	}
+	.prose :global(p) {
+		margin: 0;
+	}
+	.prose :global(h1),
+	.prose :global(h2),
+	.prose :global(h3),
+	.prose :global(h4) {
+		margin: 0;
+		color: var(--md-heading, var(--text));
+		font-weight: var(--fw-semibold);
+		line-height: var(--lh-tight);
+	}
+	.prose :global(h1) {
+		font-size: var(--fs-xl);
+	}
+	.prose :global(h2) {
+		font-size: var(--fs-lg);
+	}
+	.prose :global(h3) {
+		font-size: var(--fs-md);
+	}
+	.prose :global(h4) {
+		font-size: var(--fs-base);
+	}
+	.prose :global(strong) {
+		color: var(--md-strong, var(--text));
+		font-weight: var(--fw-semibold);
+	}
+	.prose :global(a) {
+		color: var(--accent);
+		text-decoration: underline;
+		text-underline-offset: 0.15em;
+	}
+	.prose :global(code) {
+		font-family: var(--font-mono);
+		font-size: 0.92em;
+		color: var(--md-code, var(--text));
+		background: var(--md-code-bg, var(--bg-elevated-2));
+		padding: 0.1em 0.35em;
+		border-radius: var(--r-sm);
+	}
+	.prose :global(pre) {
+		margin: 0;
+		padding: var(--sp-3);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--r-md);
+		overflow-x: auto;
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		line-height: 1.5;
+	}
+	.prose :global(pre code) {
+		padding: 0;
+		background: none;
+		color: inherit;
+		font-size: inherit;
+	}
+	.prose :global(blockquote) {
+		margin: 0;
+		padding-inline-start: var(--sp-3);
+		border-inline-start: 3px solid var(--border-strong);
+		color: var(--text-muted);
+	}
+	.prose :global(ul),
+	.prose :global(ol) {
+		margin: 0;
+		padding-inline-start: 1.4em;
+	}
+	.prose :global(li + li) {
+		margin-top: var(--sp-1);
+	}
+	.prose :global(table) {
+		border-collapse: collapse;
+		width: 100%;
+		font-size: var(--fs-xs);
+	}
+	.prose :global(th),
+	.prose :global(td) {
+		padding: var(--sp-1) var(--sp-2);
+		border: 1px solid var(--border);
+		text-align: left;
+		vertical-align: top;
+	}
+	.prose :global(th) {
+		background: var(--bg-elevated-2);
+		color: var(--text-muted);
+		font-weight: var(--fw-semibold);
+	}
+	.prose :global(img) {
+		max-width: 100%;
+		height: auto;
+		border-radius: var(--r-md);
+	}
+	.prose :global(hr) {
+		border: 0;
+		border-top: 1px solid var(--border);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Pre-rendered, trusted HTML. */
+    html?: string;
+    children?: Snippet;
+    /** Tighter vertical rhythm for chat bubbles. */
+    compact?: boolean;
+    class?: string;
+    style?: string;
+};
+declare const Prose: import("svelte").Component<$$ComponentProps, {}, "">;
+type Prose = ReturnType<typeof Prose>;
+export default Prose;