@dorsk/tsumikit 0.28.0 → 0.29.0

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.28.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",