@dorsk/tsumikit 0.30.0 → 0.32.0

package/dist/components/atoms/Input.svelte

@@ -29,6 +29,8 @@
 		width?: string;
 		/** Fires with the current value on Enter. */
 		onenter?: (value: string) => void;
+		/** Alias of `onenter`; both fire when given. */
+		onsubmit?: (value: string) => void;
 		class?: string;
 		value?: HTMLInputAttributes['value'];
 		el?: HTMLInputElement | null;
@@ -46,6 +48,7 @@
 		shape = 'square',
 		width,
 		onenter,
+		onsubmit,
 		onkeydown,
 		class: klass = '',
 		value = $bindable(),
@@ -58,6 +61,7 @@
 	function handleKeydown(e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
 		onkeydown?.(e);
 		if (onenter && e.key === 'Enter' && !e.defaultPrevented) onenter(String(value ?? ''));
+		if (onsubmit && e.key === 'Enter' && !e.defaultPrevented) onsubmit(String(value ?? ''));
 	}
 
 	function clear() {
@@ -82,7 +86,7 @@
 		style:width={wrapped ? undefined : width}
 		bind:value
 		{...rest}
-		onkeydown={onenter || onkeydown ? handleKeydown : undefined}
+		onkeydown={onenter || onsubmit || onkeydown ? handleKeydown : undefined}
 		aria-invalid={invalid || undefined}
 	/>
 {/snippet}

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

@@ -20,6 +20,8 @@ type Props = Omit<HTMLInputAttributes, 'size'> & {
     width?: string;
     /** Fires with the current value on Enter. */
     onenter?: (value: string) => void;
+    /** Alias of `onenter`; both fire when given. */
+    onsubmit?: (value: string) => void;
     class?: string;
     value?: HTMLInputAttributes['value'];
     el?: HTMLInputElement | null;

package/dist/components/atoms/Kbd.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	// Keyboard shortcut chip: `keys="mod+enter"` (or an array of tokens) renders
+	// one <kbd> per key with platform-aware glyphs — `mod` is ⌘ on Mac, Ctrl
+	// elsewhere (Ctrl during SSR).
+	type Props = {
+		keys: string | string[];
+		size?: 'sm' | 'md';
+		class?: string;
+	};
+
+	let { keys, size = 'sm', class: klass = '' }: Props = $props();
+
+	const isMac =
+		typeof navigator !== 'undefined' &&
+		/mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent || '');
+
+	function label(token: string): string {
+		const t = token.trim().toLowerCase();
+		switch (t) {
+			case 'mod':
+				return isMac ? '⌘' : 'Ctrl';
+			case 'ctrl':
+			case 'control':
+				return 'Ctrl';
+			case 'meta':
+			case 'cmd':
+			case 'command':
+				return '⌘';
+			case 'alt':
+			case 'option':
+				return isMac ? '⌥' : 'Alt';
+			case 'shift':
+				return '⇧';
+			case 'enter':
+			case 'return':
+				return '↵';
+			case 'esc':
+			case 'escape':
+				return 'Esc';
+			case 'tab':
+				return 'Tab';
+			case 'space':
+				return 'Space';
+			case 'up':
+				return '↑';
+			case 'down':
+				return '↓';
+			case 'left':
+				return '←';
+			case 'right':
+				return '→';
+			default:
+				return t.charAt(0).toUpperCase() + t.slice(1);
+		}
+	}
+
+	const tokens = $derived(
+		(Array.isArray(keys) ? keys : keys.split('+')).filter((k) => k.trim() !== '').map(label)
+	);
+</script>
+
+<span data-tsu="Kbd" class="kbd-group {klass}" class:kbd-md={size === 'md'}>
+	{#each tokens as token, i (i)}
+		{#if i > 0}<span class="kbd-sep" aria-hidden="true">+</span>{/if}
+		<kbd class="kbd">{token}</kbd>
+	{/each}
+</span>
+
+<style>
+	.kbd-group {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+		vertical-align: baseline;
+	}
+	.kbd-md {
+		font-size: var(--fs-sm);
+	}
+	.kbd {
+		font-family: var(--font-mono);
+		font-size: inherit;
+		line-height: 1.4;
+		padding: 0 var(--sp-1);
+		border: 1px solid var(--border-strong);
+		border-bottom-width: 2px;
+		border-radius: var(--r-sm);
+		background: var(--bg-elevated-2);
+		color: inherit;
+	}
+	.kbd-sep {
+		font-size: 0.85em;
+		color: var(--text-faint);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+type Props = {
+    keys: string | string[];
+    size?: 'sm' | 'md';
+    class?: string;
+};
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/atoms/Select.svelte

@@ -11,6 +11,9 @@
 	// transparently — for the "native select overlaid on a custom trigger" pattern
 	// (SelectButton): the platform popup with no custom outside-click logic, while
 	// a styled trigger shows through underneath.
+	//
+	// `variant="embedded"` is a borderless, elevated-surface select for inline
+	// use inside cards/toolbars; it hides the chevron unless asked for explicitly.
 	import type { Snippet } from 'svelte';
 	import type { HTMLSelectAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
@@ -18,7 +21,7 @@
 	// `size` shadows the native option-count attribute (unused in token layouts) to
 	// expose the sm|md height scale instead.
 	type Props = Omit<HTMLSelectAttributes, 'size'> & {
-		variant?: 'default' | 'ghost';
+		variant?: 'default' | 'ghost' | 'embedded';
 		/** Error state: danger border + aria-invalid. */
 		invalid?: boolean;
 		/** Compact inline form: smaller padding + font for dense toolbars/headers.
@@ -29,6 +32,10 @@
 		size?: 'sm' | 'md';
 		/** Draw the custom chevron (default). Set false for a bare inline select. */
 		chevron?: boolean;
+		/** `auto` sizes to the selected option instead of filling the row. */
+		width?: 'full' | 'auto';
+		/** Fill the available width of a flex/Cluster row (flex: 1). */
+		grow?: boolean;
 		class?: string;
 		value?: HTMLSelectAttributes['value'];
 		children?: Snippet;
@@ -39,7 +46,9 @@
 		invalid = false,
 		compact = false,
 		size = 'md',
-		chevron = true,
+		chevron,
+		width = 'full',
+		grow = false,
 		class: klass = '',
 		value = $bindable(),
 		children,
@@ -47,6 +56,7 @@
 	}: Props = $props();
 
 	const small = $derived(compact || size === 'sm');
+	const showChevron = $derived(chevron ?? variant !== 'embedded');
 </script>
 
 {#if variant === 'ghost'}
@@ -54,18 +64,26 @@
 		{@render children?.()}
 	</select>
 {:else}
-	<div class="select-wrap {klass}" class:no-chevron={!chevron} data-tsu="Select">
+	<div
+		class="select-wrap {klass}"
+		class:no-chevron={!showChevron}
+		class:w-auto={width === 'auto'}
+		class:select-grow={grow}
+		data-tsu="Select"
+	>
 		<select
 			class="select"
 			class:compact={small}
 			class:select-sm={size === 'sm'}
+			class:w-auto={width === 'auto'}
+			class:embedded={variant === 'embedded'}
 			bind:value
 			{...rest}
 			aria-invalid={invalid || undefined}
 		>
 			{@render children?.()}
 		</select>
-		{#if chevron}
+		{#if showChevron}
 			<span class="select-chevron" aria-hidden="true">
 				<Icon name="chevron-down" size={16} />
 			</span>
@@ -79,6 +97,14 @@
 		display: block;
 		width: 100%;
 	}
+	.select-wrap.w-auto {
+		display: inline-block;
+		width: auto;
+	}
+	.select-wrap.select-grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
 	.select {
 		width: 100%;
 		padding: var(--sp-3);
@@ -111,6 +137,14 @@
 	.select.select-sm {
 		height: var(--control-height-compact);
 	}
+	.select.w-auto {
+		width: auto;
+	}
+	.select.embedded {
+		background: var(--bg-elevated-2);
+		border: none;
+		border-radius: var(--r-sm);
+	}
 	.select:focus {
 		outline: none;
 		border-color: var(--accent);

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
 type Props = Omit<HTMLSelectAttributes, 'size'> & {
-    variant?: 'default' | 'ghost';
+    variant?: 'default' | 'ghost' | 'embedded';
     /** Error state: danger border + aria-invalid. */
     invalid?: boolean;
     /** Compact inline form: smaller padding + font for dense toolbars/headers.
@@ -12,6 +12,10 @@ type Props = Omit<HTMLSelectAttributes, 'size'> & {
     size?: 'sm' | 'md';
     /** Draw the custom chevron (default). Set false for a bare inline select. */
     chevron?: boolean;
+    /** `auto` sizes to the selected option instead of filling the row. */
+    width?: 'full' | 'auto';
+    /** Fill the available width of a flex/Cluster row (flex: 1). */
+    grow?: boolean;
     class?: string;
     value?: HTMLSelectAttributes['value'];
     children?: Snippet;

package/dist/components/atoms/Skeleton.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	// Shimmering placeholder bar(s) standing in for content that is still
+	// loading. Decorative only — the surrounding region should carry aria-busy.
+	let {
+		width = '100%',
+		height = '1em',
+		lines = 1,
+		circle = false,
+		radius = 'var(--r-sm)',
+		class: klass = '',
+		...rest
+	}: {
+		width?: string;
+		height?: string;
+		/** Stacked bars; the last one is shortened to read as a paragraph. */
+		lines?: number;
+		/** Round avatar placeholder — width follows height. */
+		circle?: boolean;
+		radius?: string;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const w = $derived(circle ? height : width);
+	const r = $derived(circle ? '50%' : radius);
+	const count = $derived(Math.max(1, Math.floor(lines)));
+</script>
+
+<span class="skeleton {klass}" data-tsu="Skeleton" aria-hidden="true" style:width={w} {...rest}>
+	{#each { length: count } as _, i (i)}
+		<span
+			class="skeleton-bar"
+			style:height
+			style:border-radius={r}
+			style:width={count > 1 && i === count - 1 ? '60%' : undefined}
+		></span>
+	{/each}
+</span>
+
+<style>
+	.skeleton {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		max-width: 100%;
+	}
+	.skeleton-bar {
+		display: block;
+		width: 100%;
+		background: linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-elevated) 50%, var(--bg-elevated-2) 75%);
+		background-size: 200% 100%;
+		animation: tsu-shimmer 1.4s ease-in-out infinite;
+	}
+	@keyframes tsu-shimmer {
+		from {
+			background-position: 200% 0;
+		}
+		to {
+			background-position: -200% 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton-bar {
+			animation: none;
+			background: var(--bg-elevated-2);
+		}
+	}
+</style>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    width?: string;
+    height?: string;
+    /** Stacked bars; the last one is shortened to read as a paragraph. */
+    lines?: number;
+    /** Round avatar placeholder — width follows height. */
+    circle?: boolean;
+    radius?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/atoms/Textarea.svelte

@@ -14,6 +14,10 @@
 	// *floor* (min-height) rather than a fixed height: the textarea still grows
 	// with content, but dragging up reserves extra space. (A bottom handle makes
 	// no sense alongside content-driven sizing, so it's suppressed.)
+	//
+	// `onsubmit` fires with the value on Enter (`submitOn="enter"`, Shift+Enter
+	// still inserts a newline) or Ctrl/Meta+Enter (`submitOn="mod-enter"`, the
+	// default whenever `onsubmit` is given).
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { autoresize as autoresizeAction } from '../../autoresize';
 
@@ -28,6 +32,11 @@
 		/** Error state: danger border + aria-invalid (also styles if a consumer
 		 *  sets aria-invalid directly). */
 		invalid?: boolean;
+		/** Cap the height (with autoresize: stop growing and scroll past this). */
+		maxHeight?: string;
+		/** Fires with the current value on the `submitOn` key combo. */
+		onsubmit?: (value: string) => void;
+		submitOn?: 'enter' | 'mod-enter' | 'none';
 		class?: string;
 		value?: HTMLTextareaAttributes['value'];
 		el?: HTMLTextAreaElement | null;
@@ -39,6 +48,10 @@
 		size = 'md',
 		resize = 'bottom',
 		invalid = false,
+		maxHeight,
+		onsubmit,
+		submitOn = 'none',
+		onkeydown,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
@@ -48,6 +61,18 @@
 	// With autoresize, only the top handle (a min-height floor) is meaningful.
 	const handleEdge = $derived(autoresize ? (resize === 'top' ? 'top' : 'none') : resize);
 	const showHandle = $derived(handleEdge !== 'none');
+	const submitMode = $derived(submitOn === 'none' && onsubmit ? 'mod-enter' : submitOn);
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: EventTarget & HTMLTextAreaElement }) {
+		onkeydown?.(e);
+		if (!onsubmit || e.key !== 'Enter' || e.defaultPrevented || submitMode === 'none') return;
+		const mod = e.ctrlKey || e.metaKey;
+		const submits =
+			submitMode === 'enter' ? !e.shiftKey && !mod && !e.altKey : mod && !e.shiftKey && !e.altKey;
+		if (!submits) return;
+		e.preventDefault();
+		onsubmit(String(value ?? ''));
+	}
 
 	// --- manual resize drag (mirrors AppShell/Modal: rAF-throttled pointer drag) ---
 	let dragging = $state(false);
@@ -106,9 +131,12 @@
 			class="textarea {klass}"
 			class:mono
 			class:textarea-sm={size === 'sm'}
+			class:capped={!!maxHeight}
+			style:max-height={maxHeight}
 			bind:value
 			use:autoresizeAction={typeof value === 'string' ? value : ''}
 			{...rest}
+			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
 			aria-invalid={invalid || undefined}
 		></textarea>
 	{:else}
@@ -117,8 +145,11 @@
 			class="textarea {klass}"
 			class:mono
 			class:textarea-sm={size === 'sm'}
+			class:capped={!!maxHeight}
+			style:max-height={maxHeight}
 			bind:value
 			{...rest}
+			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
 			aria-invalid={invalid || undefined}
 		></textarea>
 	{/if}
@@ -165,6 +196,9 @@
 		outline: none;
 		border-color: var(--accent);
 	}
+	.textarea.capped {
+		overflow-y: auto;
+	}
 	.textarea-sm {
 		padding: var(--sp-1) var(--sp-2);
 		font-size: var(--fs-sm);

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

@@ -10,6 +10,11 @@ type Props = HTMLTextareaAttributes & {
     /** Error state: danger border + aria-invalid (also styles if a consumer
      *  sets aria-invalid directly). */
     invalid?: boolean;
+    /** Cap the height (with autoresize: stop growing and scroll past this). */
+    maxHeight?: string;
+    /** Fires with the current value on the `submitOn` key combo. */
+    onsubmit?: (value: string) => void;
+    submitOn?: 'enter' | 'mod-enter' | 'none';
     class?: string;
     value?: HTMLTextareaAttributes['value'];
     el?: HTMLTextAreaElement | null;

package/dist/components/molecules/EmptyState.svelte

@@ -7,10 +7,13 @@
 	//   • a muted, max-width-limited description
 	//   • an optional action area (slot via `action`, or a built-in button when
 	//     `actionLabel`+`onAction` are passed)
-	// Everything is token-driven. `compact` tightens spacing for inline/table use.
+	// Everything is token-driven. `size` picks the layout: `default`, `compact`
+	// (tighter spacing), or `inline` (a single muted line). `loading` swaps the
+	// chip for a spinner and marks the root busy.
 	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import Spinner from '../atoms/Spinner.svelte';
 
 	let {
 		title,
@@ -22,8 +25,10 @@
 		// richer (multiple buttons, links) use the `action` snippet instead.
 		actionLabel,
 		onAction,
-		// Tighter padding/sizing for inline use (empty table body, narrow panels).
+		// Legacy alias for size="compact".
 		compact = false,
+		size = 'default',
+		loading = false,
 		class: klass = '',
 		// Raw SVG markup for a custom glyph — passed straight to `Icon`.
 		iconChildren,
@@ -31,22 +36,38 @@
 		action,
 		...rest
 	}: {
-		title: string;
-		description?: string;
+		title?: string;
+		description?: string | Snippet;
 		icon?: IconName;
 		tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 		actionLabel?: string;
 		onAction?: () => void;
 		compact?: boolean;
+		size?: 'inline' | 'compact' | 'default';
+		loading?: boolean;
 		class?: string;
 		iconChildren?: Snippet;
 		action?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const sz = $derived(compact ? 'compact' : size);
 </script>
 
-<div class="empty empty-{tone} {compact ? 'empty-compact' : ''} {klass}" data-tsu="EmptyState" {...rest}>
-	{#if icon || iconChildren}
+<div
+	class="empty empty-{tone} {klass}"
+	class:empty-compact={sz === 'compact'}
+	class:empty-inline={sz === 'inline'}
+	class:empty-loading={loading}
+	aria-busy={loading ? 'true' : undefined}
+	data-tsu="EmptyState"
+	{...rest}
+>
+	{#if loading}
+		<span class="empty-chip">
+			<Spinner />
+		</span>
+	{:else if (icon || iconChildren) && sz !== 'inline'}
 		<span class="empty-chip" aria-hidden="true">
 			{#if iconChildren}
 				<Icon>{@render iconChildren()}</Icon>
@@ -55,8 +76,12 @@
 			{/if}
 		</span>
 	{/if}
-	<p class="empty-title">{title}</p>
-	{#if description}<p class="empty-desc">{description}</p>{/if}
+	{#if title}<p class="empty-title">{title}</p>{/if}
+	{#if description}
+		<p class="empty-desc">
+			{#if typeof description === 'function'}{@render description()}{:else}{description}{/if}
+		</p>
+	{/if}
 	{#if action}
 		<div class="empty-action">{@render action()}</div>
 	{:else if actionLabel && onAction}
@@ -113,6 +138,30 @@
 		height: 2.25rem;
 		font-size: 1.125rem;
 	}
+	.empty-inline {
+		flex-direction: row;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-6) var(--sp-4);
+	}
+	.empty-inline .empty-chip {
+		width: auto;
+		height: auto;
+		font-size: 1em;
+		background: none;
+		border: none;
+	}
+	.empty-inline .empty-title {
+		color: var(--text-muted);
+		font-weight: var(--fw-normal);
+		font-size: var(--fs-sm);
+	}
+	.empty-inline .empty-desc {
+		max-width: none;
+	}
+	.empty-inline .empty-action {
+		margin-top: 0;
+	}
 	.empty-title {
 		margin: 0;
 		font-size: var(--fs-md);

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

@@ -1,13 +1,15 @@
 import type { Snippet } from 'svelte';
 import { type IconName } from '../atoms/Icon.svelte';
 type $$ComponentProps = {
-    title: string;
-    description?: string;
+    title?: string;
+    description?: string | Snippet;
     icon?: IconName;
     tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
     actionLabel?: string;
     onAction?: () => void;
     compact?: boolean;
+    size?: 'inline' | 'compact' | 'default';
+    loading?: boolean;
     class?: string;
     iconChildren?: Snippet;
     action?: Snippet;

package/dist/components/molecules/Field.svelte

@@ -3,6 +3,8 @@
 	// error text. Replaces the ad-hoc `<div class="field"><label class="label">`
 	// markup. Renders a real <label for> when `for` is given (associates with the
 	// control), else a plain <span> for control groups (radio/segment rows).
+	// `layout="inline"` puts the label beside the control (fixed `labelWidth`
+	// aligns a column of them); hint/error then follow the control on the row.
 	import type { Snippet } from 'svelte';
 
 	let {
@@ -10,14 +12,19 @@
 		for: forId,
 		hint,
 		error,
+		layout = 'stack',
+		labelWidth,
 		grow = false,
 		class: klass = '',
 		children
 	}: {
 		label?: string;
 		for?: string;
-		hint?: string;
+		hint?: string | Snippet;
 		error?: string;
+		layout?: 'stack' | 'inline';
+		/** Inline layout: fixed label column width. */
+		labelWidth?: string;
 		/** Fill the available width of a flex/Cluster row (flex: 1). */
 		grow?: boolean;
 		class?: string;
@@ -25,16 +32,18 @@
 	} = $props();
 </script>
 
-<div class="field {klass}" class:field-grow={grow} data-tsu="Field">
+<div class="field {klass}" class:field-grow={grow} class:field-inline={layout === 'inline'} data-tsu="Field">
 	{#if label}
 		{#if forId}
-			<label class="label" for={forId}>{label}</label>
+			<label class="label" for={forId} style:width={labelWidth}>{label}</label>
 		{:else}
-			<span class="label">{label}</span>
+			<span class="label" style:width={labelWidth}>{label}</span>
 		{/if}
 	{/if}
 	{@render children?.()}
-	{#if hint}<span class="hint">{hint}</span>{/if}
+	{#if hint}
+		<span class="hint">{#if typeof hint === 'function'}{@render hint()}{:else}{hint}{/if}</span>
+	{/if}
 	{#if error}<span class="error">{error}</span>{/if}
 </div>
 
@@ -48,6 +57,14 @@
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.field-inline {
+		flex-direction: row;
+		align-items: center;
+		gap: var(--sp-2);
+	}
+	.field-inline .label {
+		flex: none;
+	}
 	.label {
 		font-size: var(--fs-sm);
 		font-weight: var(--fw-medium);

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

@@ -2,8 +2,11 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label?: string;
     for?: string;
-    hint?: string;
+    hint?: string | Snippet;
     error?: string;
+    layout?: 'stack' | 'inline';
+    /** Inline layout: fixed label column width. */
+    labelWidth?: string;
     /** Fill the available width of a flex/Cluster row (flex: 1). */
     grow?: boolean;
     class?: string;

package/dist/index.d.ts

@@ -11,11 +11,13 @@ export { default as Heading } from './components/atoms/Heading.svelte';
 export type { IconName } from './components/atoms/Icon.svelte';
 export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';
+export { default as Kbd } from './components/atoms/Kbd.svelte';
 export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, type ProgressSegment, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
+export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';

package/dist/index.js

@@ -16,11 +16,13 @@ export { default as Dot } from './components/atoms/Dot.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
 export { default as Icon } from './components/atoms/Icon.svelte';
 export { default as Input } from './components/atoms/Input.svelte';
+export { default as Kbd } from './components/atoms/Kbd.svelte';
 export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, } from './components/atoms/SegmentedProgress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
+export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';

package/package.json

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