@dorsk/tsumikit 0.29.0 → 0.31.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/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/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/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/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

@@ -11,6 +11,7 @@ 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';

package/dist/index.js

@@ -16,6 +16,7 @@ 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';

package/package.json

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