@dorsk/tsumikit 0.2.8 → 0.2.10

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/Icon.svelte

@@ -87,6 +87,11 @@
 
 	export type IconName = keyof typeof ICONS;
 
+	/** True when `s` is a registered glyph name (vs. e.g. a raw emoji string). */
+	export function isIconName(s: string): s is IconName {
+		return s in ICONS;
+	}
+
 	// Glyphs that read better filled than stroked.
 	const FILLED = new Set<IconName>(['stop', 'star', 'live']);
 </script>

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

@@ -67,6 +67,8 @@ declare const ICONS: {
     readonly 'alert-circle': "<circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" /><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />";
 };
 export type IconName = keyof typeof ICONS;
+/** True when `s` is a registered glyph name (vs. e.g. a raw emoji string). */
+export declare function isIconName(s: string): s is IconName;
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Named glyph from the registry. Omit when supplying `children`. */

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

@@ -2,13 +2,14 @@
 	// File-picker button. A real <input type="file"> visually hidden inside a
 	// <label> styled as a button — so it's keyboard-focusable and works with zero
 	// JS to open the dialog. Emits the chosen files via `onfiles`. Dependency-free.
-	import Icon from '../atoms/Icon.svelte';
+	import Icon, { isIconName } from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	let {
 		onfiles,
 		label = 'Choose file',
-		icon = 'upload',
+		icon = '📎',
+		iconOnly = false,
 		accept,
 		multiple = false,
 		disabled = false,
@@ -17,7 +18,12 @@
 	}: {
 		onfiles: (files: File[]) => void;
 		label?: string;
-		icon?: IconName;
+		/** A registered glyph name (rendered as SVG) or any string such as an
+		 *  emoji (rendered as text). Defaults to the 📎 paperclip emoji. */
+		icon?: IconName | (string & {});
+		/** Hide the label visually, showing only the icon. The label is kept for
+		 *  assistive tech (and used as the accessible name). */
+		iconOnly?: boolean;
 		accept?: string;
 		multiple?: boolean;
 		disabled?: boolean;
@@ -37,7 +43,9 @@
 	class="file-btn {klass}"
 	class:primary={variant === 'primary'}
 	class:ghost={variant === 'ghost'}
+	class:icon-only={iconOnly}
 	class:disabled
+	aria-label={iconOnly ? label : undefined}
 >
 	<input
 		class="sr-only"
@@ -47,8 +55,12 @@
 		{disabled}
 		onchange={onchange}
 	/>
-	<Icon name={icon} />
-	<span>{label}</span>
+	{#if isIconName(icon)}
+		<Icon name={icon} />
+	{:else}
+		<span class="emoji" aria-hidden="true">{icon}</span>
+	{/if}
+	<span class:sr-only={iconOnly}>{label}</span>
 </label>
 
 <style>
@@ -80,6 +92,18 @@
 	.file-btn:hover:not(.disabled) {
 		border-color: var(--accent);
 	}
+	/* icon-only: square it up and drop the label gap. */
+	.file-btn.icon-only {
+		gap: 0;
+		padding: var(--sp-2);
+		aspect-ratio: 1;
+	}
+	/* Emoji glyph tracks the text size like the SVG Icon does (1em). */
+	.emoji {
+		display: inline-flex;
+		font-size: 1em;
+		line-height: 1;
+	}
 	.file-btn.primary {
 		background: var(--accent);
 		border-color: var(--accent);

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

@@ -2,7 +2,12 @@ import type { IconName } from '../atoms/Icon.svelte';
 type $$ComponentProps = {
     onfiles: (files: File[]) => void;
     label?: string;
-    icon?: IconName;
+    /** A registered glyph name (rendered as SVG) or any string such as an
+     *  emoji (rendered as text). Defaults to the 📎 paperclip emoji. */
+    icon?: IconName | (string & {});
+    /** Hide the label visually, showing only the icon. The label is kept for
+     *  assistive tech (and used as the accessible name). */
+    iconOnly?: boolean;
     accept?: string;
     multiple?: boolean;
     disabled?: boolean;

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.8",
+  "version": "0.2.10",
   "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",