@dorsk/tsumikit 0.27.0 → 0.29.0

package/dist/components/atoms/Card.svelte

@@ -5,7 +5,12 @@
 	// 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.
+	// semantic hue for inline banners; `neutral` is the plain card; `attention`
+	// adds a left bar for needs-input rows.
+	//
+	// `interactive` makes a non-button/anchor card keyboard-operable
+	// (role=button, tabindex, Enter/Space) and ignores clicks originating from
+	// nested interactive elements so inner buttons/links keep working.
 	//
 	// `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,10 +25,11 @@
 	import type { Snippet } from 'svelte';
 	import SectionHeader from '../molecules/SectionHeader.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'attention';
 
 	let {
 		tap = false,
+		interactive = false,
 		as = 'div',
 		padding = 'md',
 		surface = 'base',
@@ -35,6 +41,8 @@
 		title,
 		subtitle,
 		gap,
+		maxWidth,
+		onclick,
 		class: klass = '',
 		style = '',
 		header,
@@ -44,6 +52,7 @@
 		...rest
 	}: {
 		tap?: boolean;
+		interactive?: boolean;
 		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
 		padding?: 'none' | 'sm' | 'md' | 'lg';
 		surface?: 'base' | 'raised' | 'sunken';
@@ -55,6 +64,8 @@
 		title?: string;
 		subtitle?: string;
 		gap?: string;
+		maxWidth?: string;
+		onclick?: (e: MouseEvent | KeyboardEvent) => void;
 		class?: string;
 		style?: string;
 		header?: Snippet;
@@ -68,6 +79,26 @@
 		stacked ? `--stack-y:${stackY}px;--stack-x:${stackX}px;` : ''
 	);
 	const framed = $derived(!!(header || footer || title));
+	const native = $derived(as === 'button' || as === 'a');
+
+	const NESTED = 'button,a,input,select,textarea,[role=button],[contenteditable],[contenteditable=true]';
+	function fromNested(e: Event): boolean {
+		const target = e.target as Element | null;
+		const hit = target?.closest?.(NESTED);
+		return !!hit && hit !== e.currentTarget;
+	}
+	function handleClick(e: MouseEvent) {
+		if (!onclick) return;
+		if (interactive && fromNested(e)) return;
+		onclick(e);
+	}
+	function handleKeydown(e: KeyboardEvent) {
+		if (!interactive || native || !onclick) return;
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		if (fromNested(e)) return;
+		if (e.key === ' ') e.preventDefault();
+		onclick(e);
+	}
 </script>
 
 <svelte:element
@@ -79,11 +110,13 @@
 	class:pad-lg={padding === 'lg'}
 	class:surface-raised={surface === 'raised'}
 	class:surface-sunken={surface === 'sunken'}
-	class:card-tap={tap}
+	class:card-tap={tap || interactive}
+	class:card-max={maxWidth !== undefined}
 	class:card-ok={tone === 'ok'}
 	class:card-warn={tone === 'warn'}
 	class:card-danger={tone === 'danger'}
 	class:card-info={tone === 'info'}
+	class:card-attention={tone === 'attention'}
 	class:card-stacked={stacked}
 	class:stack-ok={stacked && stackTone === 'ok'}
 	class:stack-warn={stacked && stackTone === 'warn'}
@@ -92,7 +125,12 @@
 	class:card-framed={framed}
 	class:card-gap={!framed && gap !== undefined}
 	style:--card-gap={gap}
+	style:max-width={maxWidth}
 	style={`${stackStyle}${style}`}
+	role={interactive && !native ? 'button' : undefined}
+	tabindex={interactive && !native ? 0 : undefined}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
 	{...rest}
 >
 	{#if framed}
@@ -177,6 +215,9 @@
 	.card-tap:hover {
 		border-color: var(--border-strong);
 	}
+	.card-max {
+		width: 100%;
+	}
 
 	.card-ok {
 		--card-tone: var(--ok);
@@ -190,13 +231,21 @@
 	.card-info {
 		--card-tone: var(--info);
 	}
+	.card-attention {
+		--card-tone: var(--attention-bar);
+	}
 	.card-ok,
 	.card-warn,
 	.card-danger,
-	.card-info {
+	.card-info,
+	.card-attention {
 		border-color: color-mix(in srgb, var(--card-tone) 55%, var(--border));
 		background: color-mix(in srgb, var(--card-tone) 8%, var(--bg-elevated));
 	}
+	.card-attention {
+		background: var(--attention-bg);
+		box-shadow: inset 3px 0 0 var(--attention-bar);
+	}
 
 	/* Stacked effect — two back layers peeking out bottom-right. The front
 	   surface keeps its own background so the layers only show at the edges. */

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'attention';
 type $$ComponentProps = {
     tap?: boolean;
+    interactive?: boolean;
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
     padding?: 'none' | 'sm' | 'md' | 'lg';
     surface?: 'base' | 'raised' | 'sunken';
@@ -13,6 +14,8 @@ type $$ComponentProps = {
     title?: string;
     subtitle?: string;
     gap?: string;
+    maxWidth?: string;
+    onclick?: (e: MouseEvent | KeyboardEvent) => void;
     class?: string;
     style?: string;
     header?: Snippet;

package/dist/components/atoms/Heading.svelte

@@ -11,6 +11,15 @@
 		level = 2,
 		size,
 		tone = 'default',
+		truncate = false,
+		italic = false,
+		nowrap = false,
+		wrap = 'normal',
+		uppercase = false,
+		leading,
+		measure,
+		grow = false,
+		scale = true,
 		class: klass = '',
 		children,
 		...rest
@@ -18,6 +27,17 @@
 		level?: 1 | 2 | 3 | 4 | 5 | 6;
 		size?: Size;
 		tone?: 'default' | 'muted' | 'faint';
+		truncate?: boolean;
+		italic?: boolean;
+		nowrap?: boolean;
+		wrap?: 'normal' | 'anywhere' | 'balance';
+		uppercase?: boolean;
+		leading?: 'tight' | 'normal' | 'none';
+		// CSS max-width for the line measure, e.g. "40ch".
+		measure?: string;
+		grow?: boolean;
+		// false pins the size to its unscaled px value, ignoring --fs-scale.
+		scale?: boolean;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
@@ -26,9 +46,22 @@
 	// Default display size per rank (h1 biggest). `size` overrides it.
 	const DEFAULT_SIZE: Record<number, Size> = { 1: '2xl', 2: 'xl', 3: 'lg', 4: 'md', 5: 'sm', 6: 'xs' };
 	const fs = $derived(size ?? DEFAULT_SIZE[level]);
+	const styleAttr = $derived(measure ? `max-width: ${measure}` : undefined);
 </script>
 
-<svelte:element this={`h${level}`} data-tsu="Heading" class="heading fs-{fs} tone-{tone} {klass}" {...rest}>
+<svelte:element
+	this={`h${level}`}
+	data-tsu="Heading"
+	class="heading fs-{fs} tone-{tone} {leading ? `lh-${leading}` : ''} {wrap !== 'normal' ? `wrap-${wrap}` : ''} {klass}"
+	class:truncate
+	class:italic
+	class:nowrap
+	class:uppercase
+	class:grow
+	class:noscale={!scale}
+	style={styleAttr}
+	{...rest}
+>
 	{@render children?.()}
 </svelte:element>
 
@@ -63,4 +96,59 @@
 	.fs-2xl {
 		font-size: var(--fs-2xl);
 	}
+	.noscale.fs-xs {
+		font-size: 12px;
+	}
+	.noscale.fs-sm {
+		font-size: 13px;
+	}
+	.noscale.fs-md {
+		font-size: 16px;
+	}
+	.noscale.fs-lg {
+		font-size: 18px;
+	}
+	.noscale.fs-xl {
+		font-size: 22px;
+	}
+	.noscale.fs-2xl {
+		font-size: 28px;
+	}
+	.truncate {
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+	.italic {
+		font-style: italic;
+	}
+	.nowrap {
+		white-space: nowrap;
+	}
+	.wrap-anywhere {
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.wrap-balance {
+		text-wrap: balance;
+	}
+	.uppercase {
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.lh-tight {
+		line-height: var(--lh-tight);
+	}
+	.lh-normal {
+		line-height: var(--lh-normal);
+	}
+	.lh-none {
+		line-height: 1;
+	}
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
 </style>

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

@@ -4,6 +4,15 @@ type $$ComponentProps = {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: Size;
     tone?: 'default' | 'muted' | 'faint';
+    truncate?: boolean;
+    italic?: boolean;
+    nowrap?: boolean;
+    wrap?: 'normal' | 'anywhere' | 'balance';
+    uppercase?: boolean;
+    leading?: 'tight' | 'normal' | 'none';
+    measure?: string;
+    grow?: boolean;
+    scale?: boolean;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/atoms/Progress.svelte

@@ -24,7 +24,8 @@
 		label?: string;
 		// Fill colour. `accent` is the default brand fill; the semantic tones
 		// retint the bar for severity (e.g. usage meters going warm/hot).
-		tone?: 'accent' | 'success' | 'warn' | 'danger';
+		// `ok` and `success` are aliases.
+		tone?: 'accent' | 'ok' | 'success' | 'warn' | 'danger';
 		// Track height. `sm` is a thin ~5px track for inline rows.
 		size?: 'sm' | 'md';
 		// Accent→teal gradient fill (overrides the flat tone colour).
@@ -38,11 +39,12 @@
 
 	const pct = $derived(value == null ? 0 : Math.max(0, Math.min(100, (value / max) * 100)));
 	const indeterminate = $derived(indeterminateProp || value == null);
+	const toneClass = $derived(tone === 'ok' ? 'success' : tone);
 </script>
 
 <div
 	data-tsu="Progress"
-	class="progress tone-{tone} size-{size} {klass}"
+	class="progress tone-{toneClass} size-{size} {klass}"
 	class:indeterminate
 	class:gradient
 	class:striped

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

@@ -2,7 +2,7 @@ type $$ComponentProps = {
     value?: number;
     max?: number;
     label?: string;
-    tone?: 'accent' | 'success' | 'warn' | 'danger';
+    tone?: 'accent' | 'ok' | 'success' | 'warn' | 'danger';
     size?: 'sm' | 'md';
     gradient?: boolean;
     striped?: boolean;

package/dist/components/atoms/Text.svelte

@@ -6,6 +6,7 @@
 	// inline glue text without changing rendering. All values come from tokens.
 	import type { Snippet } from 'svelte';
 
+
 	type Size = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
 
 	let {
@@ -16,33 +17,68 @@
 		size,
 		numeric = false,
 		truncate = false,
+		italic = false,
+		nowrap = false,
+		wrap = 'normal',
+		uppercase = false,
+		leading,
+		measure,
+		grow = false,
+		scale = true,
+		block = false,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'span' | 'p' | 'div' | 'label';
 		// body: default reading text · label: form-label · caption: small meta ·
-		// code: monospace. Omit for inline glue that should inherit its parent.
-		variant?: 'body' | 'label' | 'caption' | 'code';
-		tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'success' | 'warn' | 'danger' | 'accent';
+		// code: monospace · eyebrow: small uppercase muted kicker. Omit for inline
+		// glue that should inherit its parent.
+		variant?: 'body' | 'label' | 'caption' | 'code' | 'eyebrow';
+		// `ok` and `success` are aliases.
+		tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'ok' | 'success' | 'warn' | 'danger' | 'accent';
 		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
 		size?: Size;
 		// Tabular figures: digits share a fixed advance width so counts/percentages
 		// don't jitter as they change. Use for counters, timers, metrics.
 		numeric?: boolean;
 		truncate?: boolean;
+		italic?: boolean;
+		nowrap?: boolean;
+		wrap?: 'normal' | 'anywhere' | 'balance';
+		uppercase?: boolean;
+		leading?: 'tight' | 'normal' | 'none';
+		// CSS max-width for the line measure, e.g. "60ch".
+		measure?: string;
+		grow?: boolean;
+		// false pins the size to its unscaled px value, ignoring --fs-scale.
+		scale?: boolean;
+		block?: boolean;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const toneClass = $derived(tone === 'ok' ? 'success' : tone);
+	const styleAttr = $derived(measure ? `max-width: ${measure}` : undefined);
 </script>
 
 <svelte:element
 	this={as}
 	data-tsu="Text"
-	class="text {variant ? `v-${variant}` : ''} tone-{tone} {weight ? `fw-${weight}` : ''} {size
+	class="text {variant ? `v-${variant}` : ''} tone-{toneClass} {weight ? `fw-${weight}` : ''} {size
 		? `fs-${size}`
-		: ''} {numeric ? 'numeric' : ''} {truncate ? 'truncate' : ''} {klass}"
+		: ''} {numeric ? 'numeric' : ''} {truncate ? 'truncate' : ''} {leading ? `lh-${leading}` : ''} {wrap !==
+	'normal'
+		? `wrap-${wrap}`
+		: ''} {klass}"
+	class:italic
+	class:nowrap
+	class:uppercase
+	class:grow
+	class:block
+	class:noscale={!scale}
+	style={styleAttr}
 	{...rest}
 >
 	{@render children?.()}
@@ -72,6 +108,13 @@
 		font-family: var(--font-mono);
 		font-size: 0.92em;
 	}
+	.v-eyebrow {
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+		font-weight: var(--fw-medium);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
 	/* Tone (colour) — overrides variant colour. */
 	.tone-default {
 		color: var(--text);
@@ -129,6 +172,60 @@
 	.fs-2xl {
 		font-size: var(--fs-2xl);
 	}
+	.noscale.fs-xs {
+		font-size: 12px;
+	}
+	.noscale.fs-sm {
+		font-size: 13px;
+	}
+	.noscale.fs-base {
+		font-size: 15px;
+	}
+	.noscale.fs-md {
+		font-size: 16px;
+	}
+	.noscale.fs-lg {
+		font-size: 18px;
+	}
+	.noscale.fs-xl {
+		font-size: 22px;
+	}
+	.noscale.fs-2xl {
+		font-size: 28px;
+	}
+	.italic {
+		font-style: italic;
+	}
+	.nowrap {
+		white-space: nowrap;
+	}
+	.wrap-anywhere {
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.wrap-balance {
+		text-wrap: balance;
+	}
+	.uppercase {
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.lh-tight {
+		line-height: var(--lh-tight);
+	}
+	.lh-normal {
+		line-height: var(--lh-normal);
+	}
+	.lh-none {
+		line-height: 1;
+	}
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.block {
+		display: block;
+	}
 	.numeric {
 		font-variant-numeric: tabular-nums;
 		font-feature-settings: 'tnum';

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

@@ -2,12 +2,21 @@ import type { Snippet } from 'svelte';
 type Size = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
 type $$ComponentProps = {
     as?: 'span' | 'p' | 'div' | 'label';
-    variant?: 'body' | 'label' | 'caption' | 'code';
-    tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'success' | 'warn' | 'danger' | 'accent';
+    variant?: 'body' | 'label' | 'caption' | 'code' | 'eyebrow';
+    tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'ok' | 'success' | 'warn' | 'danger' | 'accent';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     size?: Size;
     numeric?: boolean;
     truncate?: boolean;
+    italic?: boolean;
+    nowrap?: boolean;
+    wrap?: 'normal' | 'anywhere' | 'balance';
+    uppercase?: boolean;
+    leading?: 'tight' | 'normal' | 'none';
+    measure?: string;
+    grow?: boolean;
+    scale?: boolean;
+    block?: boolean;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/index.d.ts

@@ -69,4 +69,5 @@ export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.sve
 export { type Mode, THEMES, theme } from './stores/theme.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 { canonicalTone, type Tone } from './tone';
 export { type TruncateMode, type TruncateOptions, truncate } from './truncate';

package/dist/index.js

@@ -82,4 +82,5 @@ export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 export { THEMES, theme } from './stores/theme.svelte';
 export { toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
+export { canonicalTone } from './tone';
 export { truncate } from './truncate';

package/dist/tone.d.ts

@@ -0,0 +1,2 @@
+export type Tone = 'neutral' | 'ok' | 'success' | 'warn' | 'danger' | 'info' | 'accent';
+export declare function canonicalTone(t: string): string;

package/dist/tone.js

@@ -0,0 +1,3 @@
+export function canonicalTone(t) {
+    return t === 'success' ? 'ok' : t;
+}

package/package.json

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