@dorsk/tsumikit 0.28.0 → 0.30.0

package/dist/components/atoms/Button.svelte

@@ -3,17 +3,24 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	type ButtonProps = HTMLButtonAttributes & {
-		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		// `link`: no box at all — an inline text action coloured like a link
+		// (or like `tone` when set), underlined on hover/focus.
+		variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'link';
 		// Semantic state tint layered on top of the variant: tints text/border and
 		// adds a subtle fill on hover. For stateful controls — an "on"/active toggle
 		// (`accent`), positive actions (`success`), or cost/severity states.
 		tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 		size?: 'sm' | 'md' | 'lg';
 		control?: boolean;
+		// Fully rounded ends (`--r-pill`) on any size/variant.
+		pill?: boolean;
 		block?: boolean;
 		// Fill the available width of a flex/Cluster row (flex: 1). `block` stretches
 		// to 100% (grid/stack); `grow` shares a flex row with siblings.
 		grow?: boolean;
+		// `shrink={false}` pins the button to its intrinsic width in a flex row
+		// (flex: none, top-aligned) so a growing sibling can't squash it.
+		shrink?: boolean;
 		// Render as a link (`<a href>`) while keeping button chrome — for navigations
 		// and open-in-new-tab actions that shouldn't be a bare <a>. Setting `href`
 		// implies `as="a"`.
@@ -56,8 +63,10 @@
 		tone = 'none',
 		size = 'md',
 		control = false,
+		pill = false,
 		block = false,
 		grow = false,
+		shrink = true,
 		as = 'button',
 		href,
 		icon = false,
@@ -113,6 +122,9 @@
 	class:btn-primary={variant === 'primary'}
 	class:btn-ghost={variant === 'ghost'}
 	class:btn-danger={variant === 'danger' || (tone === 'danger' && variant === 'default')}
+	class:btn-link={variant === 'link'}
+	class:btn-pill={pill}
+	class:no-shrink={!shrink}
 	class:btn-sm={size === 'sm'}
 	class:btn-lg={size === 'lg'}
 	class:btn-control={control}
@@ -354,6 +366,33 @@
 		filter: brightness(1.08);
 	}
 
+	.no-shrink {
+		flex: none;
+		align-self: flex-start;
+	}
+	.btn-pill {
+		border-radius: var(--r-pill);
+	}
+	/* Link variant: no box, inherits the surrounding text size. Placed after the
+	   size rules so their min-height doesn't reapply; a tone wins over --link. */
+	.btn-link {
+		min-height: auto;
+		height: auto;
+		padding: 0 var(--sp-1);
+		border: none;
+		background: none;
+		box-shadow: none;
+		border-radius: 0;
+		font-size: inherit;
+		line-height: 1;
+		color: var(--btn-tone, var(--link));
+	}
+	.btn-link:hover:not(:disabled),
+	.btn-link:focus-visible {
+		background: none;
+		border: none;
+		text-decoration: underline;
+	}
 	/* Icon-only buttons (IconButton). Square box = consistent --box-md tap target. */
 	.btn-icon {
 		min-height: var(--box-md);

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

@@ -1,12 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type ButtonProps = HTMLButtonAttributes & {
-    variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'link';
     tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     control?: boolean;
+    pill?: boolean;
     block?: boolean;
     grow?: boolean;
+    shrink?: boolean;
     as?: 'button' | 'a';
     href?: string;
     target?: string;

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/components/molecules/FileButton.svelte

@@ -16,6 +16,7 @@
 		disabled = false,
 		variant = 'default',
 		size = 'md',
+		control = false,
 		box,
 		hitArea = 'auto',
 		class: klass = ''
@@ -38,6 +39,9 @@
 		/** Match the Button atom's sizes so a FileButton lines up with buttons in
 		 *  the same row. */
 		size?: 'sm' | 'md' | 'lg';
+		/** Uniform `--control-height`, like Button's `control`, so it lines up in a
+		 *  composer/toolbar row. */
+		control?: boolean;
 		/** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		/** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
@@ -62,6 +66,7 @@
 	class:ghost={variant === 'ghost'}
 	class:sm={size === 'sm'}
 	class:lg={size === 'lg'}
+	class:control
 	class:icon-only={onlyIcon}
 	class:box={box !== undefined}
 	class:hit-compact={hitArea === 'compact'}
@@ -125,6 +130,11 @@
 		padding: var(--sp-3) var(--sp-5);
 		font-size: var(--fs-base);
 	}
+	.file-btn.control {
+		height: var(--control-height);
+		min-height: var(--control-height);
+		padding: 0 var(--sp-3);
+	}
 	/* icon-only: square it up and drop the label gap. */
 	.file-btn.icon-only {
 		gap: 0;

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

@@ -18,6 +18,9 @@ type $$ComponentProps = {
     /** Match the Button atom's sizes so a FileButton lines up with buttons in
      *  the same row. */
     size?: 'sm' | 'md' | 'lg';
+    /** Uniform `--control-height`, like Button's `control`, so it lines up in a
+     *  composer/toolbar row. */
+    control?: boolean;
     /** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
     /** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */

package/dist/components/molecules/IconButton.svelte

@@ -16,6 +16,11 @@
 		children?: Snippet;
 		label: string;
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		// Fully rounded (`--r-pill`) box. Forwarded to Button.
+		pill?: boolean;
+		// `shrink={false}` pins the box to its intrinsic size in a flex row.
+		// Forwarded to Button.
+		shrink?: boolean;
 		// Semantic state tint (forwarded to Button). Pairs well with `chip`.
 		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
 		// Outlined `--box-lg` square icon-chip (header/toolbar actions).
@@ -55,6 +60,8 @@
 		variant = 'ghost',
 		tone = 'none',
 		chip = false,
+		pill = false,
+		shrink = true,
 		box,
 		size = 18,
 		glyphSize,
@@ -82,6 +89,8 @@
 	{variant}
 	{tone}
 	{chip}
+	{pill}
+	{shrink}
 	{box}
 	{hitArea}
 	{disabled}

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

@@ -12,6 +12,8 @@ type IconButtonProps = HTMLButtonAttributes & {
     children?: Snippet;
     label: string;
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    pill?: boolean;
+    shrink?: boolean;
     tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
     chip?: boolean;
     box?: 'xs' | 'sm' | 'md' | 'lg';

package/dist/components/molecules/Toggle.svelte

@@ -14,6 +14,9 @@
 		pressed = false,
 		pill = false,
 		struck = false,
+		size = 'sm',
+		grow = false,
+		shrink = true,
 		type = 'button',
 		disabled = false,
 		class: klass = '',
@@ -23,6 +26,11 @@
 		pressed?: boolean;
 		pill?: boolean;
 		struck?: boolean;
+		size?: 'sm' | 'md';
+		// Share a flex row with siblings (flex: 1 1 0).
+		grow?: boolean;
+		// `shrink={false}` keeps the chip at its intrinsic width (flex: none).
+		shrink?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -35,6 +43,9 @@
 	class="toggle {klass}"
 	class:pill
 	class:struck
+	class:md={size === 'md'}
+	class:grow
+	class:no-shrink={!shrink}
 	class:on={pressed}
 	aria-pressed={pressed}
 >
@@ -69,6 +80,17 @@
 	.toggle.pill {
 		border-radius: var(--r-pill);
 	}
+	.toggle.md {
+		padding: 0.3rem var(--sp-2);
+		font-size: var(--fs-sm);
+	}
+	.toggle.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.toggle.no-shrink {
+		flex: none;
+	}
 	.toggle:hover:not(:disabled) {
 		border-color: var(--border-strong);
 	}

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

@@ -4,6 +4,9 @@ type $$ComponentProps = HTMLButtonAttributes & {
     pressed?: boolean;
     pill?: boolean;
     struck?: boolean;
+    size?: 'sm' | 'md';
+    grow?: boolean;
+    shrink?: boolean;
     children?: Snippet;
 };
 declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "">;

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