@dorsk/tsumikit 0.2.7 → 0.2.9

package/dist/components/atoms/Badge.svelte

@@ -15,6 +15,8 @@
 		as = 'span',
 		size = 'md',
 		mono = false,
+		uppercase = false,
+		active = false,
 		removable = false,
 		onremove,
 		class: klass = '',
@@ -25,6 +27,11 @@
 		as?: 'span' | 'button';
 		size?: 'sm' | 'md';
 		mono?: boolean;
+		// Uppercase, letter-spaced label — for status tags/eyebrows.
+		uppercase?: boolean;
+		// Interactive "on" state for a toggle/count badge (`as="button"`): fills the
+		// pill with its tone instead of just tinting the border.
+		active?: boolean;
 		removable?: boolean;
 		onremove?: (e: MouseEvent) => void;
 		class?: string;
@@ -42,6 +49,8 @@
 	class:badge-info={tone === 'info'}
 	class:badge-sm={size === 'sm'}
 	class:mono
+	class:uppercase
+	class:active
 	class:interactive={as === 'button'}
 	{...rest}
 >
@@ -103,6 +112,30 @@
 		font-family: var(--font-mono);
 		font-weight: var(--fw-normal);
 	}
+	.uppercase {
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		font-weight: var(--fw-semibold);
+	}
+	/* Interactive "on" state: fill the pill with its tone. Falls back to the
+	   neutral accent when no semantic tone is set. */
+	.active {
+		color: var(--text-on-accent);
+		background: var(--badge-fill, var(--accent));
+		border-color: var(--badge-fill, var(--accent));
+	}
+	.badge-ok.active {
+		--badge-fill: var(--ok);
+	}
+	.badge-warn.active {
+		--badge-fill: var(--warn);
+	}
+	.badge-danger.active {
+		--badge-fill: var(--danger);
+	}
+	.badge-info.active {
+		--badge-fill: var(--info);
+	}
 	.interactive {
 		cursor: pointer;
 		transition:
@@ -113,6 +146,11 @@
 		border-color: var(--border-strong);
 		color: var(--text);
 	}
+	.interactive.active:hover {
+		color: var(--text-on-accent);
+		border-color: var(--badge-fill, var(--accent));
+		filter: brightness(1.08);
+	}
 	.remove {
 		display: inline-flex;
 		align-items: center;

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

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     as?: 'span' | 'button';
     size?: 'sm' | 'md';
     mono?: boolean;
+    uppercase?: boolean;
+    active?: boolean;
     removable?: boolean;
     onremove?: (e: MouseEvent) => void;
     class?: string;

package/dist/components/atoms/Button.svelte

@@ -4,6 +4,10 @@
 
 	type ButtonProps = HTMLButtonAttributes & {
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		// 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`), or cost/severity states (`info`, `warn`).
+		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
 		size?: 'sm' | 'md';
 		control?: boolean;
 		block?: boolean;
@@ -11,6 +15,9 @@
 		// borderless, compact variant (chip-remove ✕, inline edit ✎); pair with
 		// `hoverDanger` to tint it red on hover (delete affordances).
 		icon?: boolean;
+		// Larger 2.5rem outlined square icon-chip (header/toolbar action). Pairs
+		// with `tone` for tinted severity chips (back/archive/interrupt/more).
+		chip?: boolean;
 		iconInline?: boolean;
 		hoverDanger?: boolean;
 		// Async/busy state: shows a spinner, blocks clicks, sets aria-busy. Stays
@@ -22,10 +29,12 @@
 
 	let {
 		variant = 'default',
+		tone = 'none',
 		size = 'md',
 		control = false,
 		block = false,
 		icon = false,
+		chip = false,
 		iconInline = false,
 		hoverDanger = false,
 		loading = false,
@@ -53,6 +62,11 @@
 	class:btn-control={control}
 	class:btn-block={block}
 	class:btn-icon={icon}
+	class:btn-chip={chip}
+	class:btn-tone-accent={tone === 'accent'}
+	class:btn-tone-info={tone === 'info'}
+	class:btn-tone-warn={tone === 'warn'}
+	class:btn-tone-danger={tone === 'danger'}
 	class:btn-icon-inline={iconInline}
 	class:hover-danger={hoverDanger}
 	class:loading
@@ -129,6 +143,46 @@
 		width: 100%;
 	}
 
+	/* Semantic state tones — tint text + border, subtle fill on hover. Layered on
+	   the neutral/ghost variant; each defines --btn-tone so one ruleset paints. */
+	.btn-tone-accent {
+		--btn-tone: var(--accent);
+	}
+	.btn-tone-info {
+		--btn-tone: var(--info);
+	}
+	.btn-tone-warn {
+		--btn-tone: var(--warn);
+	}
+	.btn-tone-danger {
+		--btn-tone: var(--danger);
+	}
+	.btn-tone-accent,
+	.btn-tone-info,
+	.btn-tone-warn,
+	.btn-tone-danger {
+		color: var(--btn-tone);
+		border-color: color-mix(in srgb, var(--btn-tone) 50%, var(--border));
+	}
+	.btn-tone-accent:hover:not(:disabled),
+	.btn-tone-info:hover:not(:disabled),
+	.btn-tone-warn:hover:not(:disabled),
+	.btn-tone-danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--btn-tone) 14%, transparent);
+		border-color: var(--btn-tone);
+	}
+
+	/* Icon-chip: larger square outlined tap target for header/toolbar actions.
+	   Combines with a tone for tinted severity chips. */
+	.btn-chip {
+		min-height: 2.5rem;
+		min-width: 2.5rem;
+		height: 2.5rem;
+		width: 2.5rem;
+		padding: 0;
+		border-radius: var(--r-md);
+	}
+
 	/* Uniform-height control: icon buttons, inputs and action buttons that share a
 	   toolbar/composer row line up exactly. */
 	.btn-control {

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

@@ -2,10 +2,12 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type ButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
     size?: 'sm' | 'md';
     control?: boolean;
     block?: boolean;
     icon?: boolean;
+    chip?: boolean;
     iconInline?: boolean;
     hoverDanger?: boolean;
     loading?: boolean;

package/dist/components/atoms/Card.svelte

@@ -3,24 +3,64 @@
 	// background/border/radius/padding from theme tokens. `tap` adds the
 	// 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.
+	//
+	// `stacked` fakes a pile of cards by drawing two layers peeking out below
+	// (and optionally to the right) via pseudo-elements. `stackTone` tints those
+	// back layers with a semantic hue (e.g. `info` for a blue stack); `neutral`
+	// keeps them on the plain border colour. `stackY`/`stackX` set the per-layer
+	// vertical / horizontal offset in px (vertical spacing stays even across the
+	// 3 borders); horizontal defaults to a tiny 2px peek.
 	import type { Snippet } from 'svelte';
 
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
 	let {
 		tap = false,
 		as = 'div',
+		padding = 'md',
+		stacked = false,
+		stackTone = 'neutral',
+		stackY = 8,
+		stackX = 2,
 		class: klass = '',
+		style = '',
 		children,
 		...rest
 	}: {
 		tap?: boolean;
 		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
+		padding?: 'none' | 'sm' | 'md' | 'lg';
+		stacked?: boolean;
+		stackTone?: Tone;
+		stackY?: number;
+		stackX?: number;
 		class?: string;
+		style?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	let stackStyle = $derived(
+		stacked ? `--stack-y:${stackY}px;--stack-x:${stackX}px;` : ''
+	);
 </script>
 
-<svelte:element this={as} class="card {klass}" class:card-tap={tap} {...rest}>
+<svelte:element
+	this={as}
+	class="card {klass}"
+	class:pad-none={padding === 'none'}
+	class:pad-sm={padding === 'sm'}
+	class:pad-lg={padding === 'lg'}
+	class:card-tap={tap}
+	class:card-stacked={stacked}
+	class:stack-ok={stacked && stackTone === 'ok'}
+	class:stack-warn={stacked && stackTone === 'warn'}
+	class:stack-danger={stacked && stackTone === 'danger'}
+	class:stack-info={stacked && stackTone === 'info'}
+	style={`${stackStyle}${style}`}
+	{...rest}
+>
 	{@render children?.()}
 </svelte:element>
 
@@ -31,6 +71,15 @@
 		border-radius: var(--r-lg);
 		padding: var(--sp-4);
 	}
+	.pad-none {
+		padding: 0;
+	}
+	.pad-sm {
+		padding: var(--sp-2);
+	}
+	.pad-lg {
+		padding: var(--sp-6);
+	}
 	.card-tap {
 		cursor: pointer;
 		transition:
@@ -43,4 +92,59 @@
 	.card-tap:hover {
 		border-color: var(--border-strong);
 	}
+
+	/* 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 {
+		position: relative;
+		/* Defaults; overridden inline by the stackY/stackX props. */
+		--stack-y: 8px;
+		--stack-x: 2px;
+		--stack-bg: var(--bg-elevated-2);
+		--stack-border: var(--border);
+		/* Reserve room for the two peeking layers so they aren't clipped. */
+		margin-right: calc(var(--stack-x) * 2);
+		margin-bottom: calc(var(--stack-y) * 2);
+	}
+	.card-stacked::before,
+	.card-stacked::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		/* Opaque fill so each layer fully hides the one behind it — only the
+		   bottom-right peek (and its single border line) stays visible. */
+		background: var(--stack-bg);
+		border: 1px solid var(--stack-border);
+	}
+	/* Nearest back layer — sits just under the front surface. */
+	.card-stacked::before {
+		z-index: -1;
+		transform: translate(var(--stack-x), var(--stack-y));
+	}
+	/* Furthest back layer — behind the nearest one. */
+	.card-stacked::after {
+		z-index: -2;
+		transform: translate(
+			calc(var(--stack-x) * 2),
+			calc(var(--stack-y) * 2)
+		);
+	}
+
+	.stack-ok {
+		--stack-border: color-mix(in srgb, var(--ok) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--ok) 12%, var(--bg-elevated));
+	}
+	.stack-warn {
+		--stack-border: color-mix(in srgb, var(--warn) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--warn) 12%, var(--bg-elevated));
+	}
+	.stack-danger {
+		--stack-border: color-mix(in srgb, var(--danger) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
+	}
+	.stack-info {
+		--stack-border: color-mix(in srgb, var(--info) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--info) 12%, var(--bg-elevated));
+	}
 </style>

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

@@ -1,8 +1,15 @@
 import type { Snippet } from 'svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type $$ComponentProps = {
     tap?: boolean;
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    stacked?: boolean;
+    stackTone?: Tone;
+    stackY?: number;
+    stackX?: number;
     class?: string;
+    style?: string;
     children?: Snippet;
     [key: string]: unknown;
 };

package/dist/components/atoms/Progress.svelte

@@ -6,11 +6,15 @@
 		value,
 		max = 100,
 		label,
+		tone = 'accent',
 		class: klass = ''
 	}: {
 		value?: number;
 		max?: number;
 		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';
 		class?: string;
 	} = $props();
 
@@ -19,7 +23,7 @@
 </script>
 
 <div
-	class="progress {klass}"
+	class="progress tone-{tone} {klass}"
 	class:indeterminate
 	role="progressbar"
 	aria-label={label}
@@ -40,10 +44,19 @@
 	}
 	.bar {
 		height: 100%;
-		background: var(--accent);
+		background: var(--fill, var(--accent));
 		border-radius: inherit;
 		transition: width 0.2s var(--ease);
 	}
+	.tone-success {
+		--fill: var(--ok);
+	}
+	.tone-warn {
+		--fill: var(--warn);
+	}
+	.tone-danger {
+		--fill: var(--danger);
+	}
 	.progress.indeterminate .bar {
 		width: 40%;
 		animation: progress-slide 1.1s ease-in-out infinite;

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

@@ -2,6 +2,7 @@ type $$ComponentProps = {
     value?: number;
     max?: number;
     label?: string;
+    tone?: 'accent' | 'success' | 'warn' | 'danger';
     class?: string;
 };
 declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/atoms/Select.svelte

@@ -19,6 +19,10 @@
 		variant?: 'default' | 'ghost';
 		/** Error state: danger border + aria-invalid. */
 		invalid?: boolean;
+		/** Compact inline form: smaller padding + font for dense toolbars/headers. */
+		compact?: boolean;
+		/** Draw the custom chevron (default). Set false for a bare inline select. */
+		chevron?: boolean;
 		class?: string;
 		value?: HTMLSelectAttributes['value'];
 		children?: Snippet;
@@ -27,6 +31,8 @@
 	let {
 		variant = 'default',
 		invalid = false,
+		compact = false,
+		chevron = true,
 		class: klass = '',
 		value = $bindable(),
 		children,
@@ -39,13 +45,21 @@
 		{@render children?.()}
 	</select>
 {:else}
-	<div class="select-wrap {klass}">
-		<select class="select" bind:value {...rest} aria-invalid={invalid || undefined}>
+	<div class="select-wrap {klass}" class:no-chevron={!chevron}>
+		<select
+			class="select"
+			class:compact
+			bind:value
+			{...rest}
+			aria-invalid={invalid || undefined}
+		>
 			{@render children?.()}
 		</select>
-		<span class="select-chevron" aria-hidden="true">
-			<Icon name="chevron-down" size={16} />
-		</span>
+		{#if chevron}
+			<span class="select-chevron" aria-hidden="true">
+				<Icon name="chevron-down" size={16} />
+			</span>
+		{/if}
 	</div>
 {/if}
 
@@ -70,6 +84,18 @@
 		-webkit-appearance: none;
 		padding-right: calc(var(--sp-3) + 1.25rem);
 	}
+	/* No custom chevron: reclaim the reserved right padding. */
+	.select-wrap.no-chevron .select {
+		padding-right: var(--sp-3);
+	}
+	/* Compact inline form for dense headers/toolbars. */
+	.select.compact {
+		padding: var(--sp-1) var(--sp-2);
+		font-size: var(--fs-xs);
+	}
+	.select-wrap:not(.no-chevron) .select.compact {
+		padding-right: calc(var(--sp-2) + 1rem);
+	}
 	.select:focus {
 		outline: none;
 		border-color: var(--accent);

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

@@ -4,6 +4,10 @@ type Props = HTMLSelectAttributes & {
     variant?: 'default' | 'ghost';
     /** Error state: danger border + aria-invalid. */
     invalid?: boolean;
+    /** Compact inline form: smaller padding + font for dense toolbars/headers. */
+    compact?: boolean;
+    /** Draw the custom chevron (default). Set false for a bare inline select. */
+    chevron?: boolean;
     class?: string;
     value?: HTMLSelectAttributes['value'];
     children?: Snippet;

package/dist/components/atoms/Text.svelte

@@ -14,6 +14,7 @@
 		tone = 'inherit',
 		weight,
 		size,
+		numeric = false,
 		truncate = false,
 		class: klass = '',
 		children,
@@ -23,9 +24,12 @@
 		// 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' | 'danger' | 'accent';
+		tone?: 'inherit' | 'default' | 'muted' | 'faint' | '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;
 		class?: string;
 		children?: Snippet;
@@ -37,7 +41,7 @@
 	this={as}
 	class="text {variant ? `v-${variant}` : ''} tone-{tone} {weight ? `fw-${weight}` : ''} {size
 		? `fs-${size}`
-		: ''} {truncate ? 'truncate' : ''} {klass}"
+		: ''} {numeric ? 'numeric' : ''} {truncate ? 'truncate' : ''} {klass}"
 	{...rest}
 >
 	{@render children?.()}
@@ -77,6 +81,12 @@
 	.tone-faint {
 		color: var(--text-faint);
 	}
+	.tone-success {
+		color: var(--ok);
+	}
+	.tone-warn {
+		color: var(--warn);
+	}
 	.tone-danger {
 		color: var(--danger);
 	}
@@ -118,6 +128,10 @@
 	.fs-2xl {
 		font-size: var(--fs-2xl);
 	}
+	.numeric {
+		font-variant-numeric: tabular-nums;
+		font-feature-settings: 'tnum';
+	}
 	/* `text-overflow: ellipsis` is a no-op on an inline box, so a truncated bare
 	   <Text> (default as="span") would overrun its container instead of clipping.
 	   inline-block gives it a block formatting context so the ellipsis applies,

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

@@ -3,9 +3,10 @@ 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' | 'danger' | 'accent';
+    tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'success' | 'warn' | 'danger' | 'accent';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     size?: Size;
+    numeric?: boolean;
     truncate?: boolean;
     class?: string;
     children?: Snippet;

package/dist/components/layouts/AppShell.svelte

@@ -293,14 +293,18 @@
 			touch-action: none;
 			z-index: 1;
 		}
+		/* Persistent grip hint (mirrors the Modal): a small pill centered on the
+		   handle, brightening to the accent on hover / while dragging. */
 		.shell-sidebar-resize::after {
 			content: '';
 			position: absolute;
-			top: 0;
-			bottom: 0;
-			right: 0;
-			width: 1px;
-			background: transparent;
+			top: 50%;
+			right: 1px;
+			transform: translateY(-50%);
+			width: 3px;
+			height: 28px;
+			border-radius: 999px;
+			background: var(--border-strong);
 			transition: background 0.12s var(--ease);
 		}
 		.shell-sidebar-resize:hover::after,

package/dist/components/molecules/IconButton.svelte

@@ -13,6 +13,10 @@
 		children?: Snippet;
 		label: string;
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
+		// Semantic state tint (forwarded to Button). Pairs well with `chip`.
+		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+		// Larger 2.5rem outlined square icon-chip (header/toolbar actions).
+		chip?: boolean;
 		size?: number;
 		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
 		// no square box; just a muted glyph that brightens on hover. Pair with
@@ -32,6 +36,8 @@
 		label,
 		title = label,
 		variant = 'ghost',
+		tone = 'none',
+		chip = false,
 		size = 18,
 		inline = false,
 		hoverDanger = false,
@@ -48,10 +54,12 @@
 <Button
 	{...rest}
 	{variant}
+	{tone}
+	{chip}
 	{disabled}
 	{title}
 	{onclick}
-	icon={!inline}
+	icon={!inline && !chip}
 	iconInline={inline}
 	{hoverDanger}
 	aria-pressed={pressed}

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

@@ -9,6 +9,8 @@ type IconButtonProps = HTMLButtonAttributes & {
     children?: Snippet;
     label: string;
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
+    tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+    chip?: boolean;
     size?: number;
     inline?: boolean;
     hoverDanger?: boolean;

package/package.json

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