@nqmcreative/ui 0.2.3 → 0.4.0

package/dist/styles/paper/TimeInput.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { clampTime, formatTime, parseTime, stepTime } from '../../core/time.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<
+		HTMLInputAttributes,
+		'size' | 'prefix' | 'suffix' | 'min' | 'max' | 'step'
+	> {
+		/** Bindable `HH:MM`, or `''` for empty. */
+		value?: string;
+		/** Inclusive bounds, `HH:MM`. */
+		min?: string;
+		max?: string;
+		/** Minutes one press of a stepper moves, and what typing snaps to. */
+		step?: number;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Hide the steppers and let the field be typed into only. */
+		steppers?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		min,
+		max,
+		step = 15,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		steppers = true,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+
+	// Typed text and the bound value are separate until the field settles:
+	// `9` is a valid thing to be halfway through typing and an invalid time.
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	function settle() {
+		editing = false;
+		const minutes = parseTime(text);
+		value = minutes === null ? '' : formatTime(clampTime(minutes, min, max, step));
+		text = value;
+	}
+
+	function nudge(direction: 1 | -1) {
+		value = stepTime(value, direction, step, min, max);
+		text = value;
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			nudge(1);
+		} else if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			nudge(-1);
+		} else if (event.key === 'Enter') {
+			settle();
+		}
+	}
+
+	const stepper =
+		'grid size-6 place-items-center rounded text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current';
+</script>
+
+<Input
+	bind:value={text}
+	{size}
+	{tone}
+	{invalid}
+	{disabled}
+	inputmode="numeric"
+	placeholder="--:--"
+	onfocus={() => (editing = true)}
+	onblur={settle}
+	onkeydown={onKeydown}
+	class="[&_input]:tabular-nums {className}"
+	{...rest}
+>
+	{#snippet prefix()}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<circle
+				cx="10"
+				cy="10"
+				r="6.5"
+				stroke="currentColor"
+				stroke-width="1.6"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M10 6.5V10l2.5 1.5"
+				stroke="currentColor"
+				stroke-width="1.6"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if steppers}
+			<span class="-mr-2 flex flex-col">
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(1)}
+					aria-label={t.current.increase}
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="m3 7.5 3-3 3 3"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(-1)}
+					aria-label={t.current.decrease}
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="m3 4.5 3 3 3-3"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</span>
+		{/if}
+	{/snippet}
+</Input>

package/dist/styles/paper/TimeInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type InputSize } from './Input.svelte';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'min' | 'max' | 'step'> {
+    /** Bindable `HH:MM`, or `''` for empty. */
+    value?: string;
+    /** Inclusive bounds, `HH:MM`. */
+    min?: string;
+    max?: string;
+    /** Minutes one press of a stepper moves, and what typing snaps to. */
+    step?: number;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Hide the steppers and let the field be typed into only. */
+    steppers?: boolean;
+    class?: string;
+}
+declare const TimeInput: import("svelte").Component<Props, {}, "value">;
+type TimeInput = ReturnType<typeof TimeInput>;
+export default TimeInput;

package/dist/styles/paper/Toaster.svelte

@@ -4,6 +4,7 @@
 	import { portal } from '../../core/actions/dismissable.js';
 	import { toast } from '../../core/toast.svelte.js';
 	import { toneText } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 	import Spinner from './Spinner.svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
 
@@ -61,6 +62,8 @@
 			<span class="mt-0.5 shrink-0 {toneText[item.tone]}">
 				{#if item.loading}
 					<Spinner size="sm" label="" />
+				{:else if item.icon}
+					<span class={iconMd}>{@render item.icon()}</span>
 				{:else if item.tone === 'success'}
 					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
 						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />

package/dist/styles/paper/icon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The box a consumer-supplied icon renders into.
+ *
+ * Every icon in the library is a `Snippet` the app writes — the package ships
+ * no icon set and no runtime dependency — so the component has to size the
+ * glyph rather than trust it. The `*:` variant hits the snippet's own element,
+ * which is what keeps a bare `<svg viewBox="0 0 16 16">` from laying out at its
+ * intrinsic 300×150.
+ *
+ * Kept per style rather than in `core/`: an app only `@source`s the style
+ * folder it installed, so a class string living outside it would never be
+ * generated by Tailwind.
+ */
+/** 14px — menu rows, chips, anything sitting on one line of small text. */
+export declare const iconSm = "grid size-3.5 shrink-0 place-items-center *:size-3.5";
+/** 16px — the default: nav items, tabs, buttons, list rows. */
+export declare const iconMd = "grid size-4 shrink-0 place-items-center *:size-4";
+/** 20px — headers, stats, anything sitting beside a heading. */
+export declare const iconLg = "grid size-5 shrink-0 place-items-center *:size-5";
+/** 24px — dialog and empty-state marks. */
+export declare const iconXl = "grid size-6 shrink-0 place-items-center *:size-6";

package/dist/styles/paper/icon.js

@@ -0,0 +1,21 @@
+/**
+ * The box a consumer-supplied icon renders into.
+ *
+ * Every icon in the library is a `Snippet` the app writes — the package ships
+ * no icon set and no runtime dependency — so the component has to size the
+ * glyph rather than trust it. The `*:` variant hits the snippet's own element,
+ * which is what keeps a bare `<svg viewBox="0 0 16 16">` from laying out at its
+ * intrinsic 300×150.
+ *
+ * Kept per style rather than in `core/`: an app only `@source`s the style
+ * folder it installed, so a class string living outside it would never be
+ * generated by Tailwind.
+ */
+/** 14px — menu rows, chips, anything sitting on one line of small text. */
+export const iconSm = 'grid size-3.5 shrink-0 place-items-center *:size-3.5';
+/** 16px — the default: nav items, tabs, buttons, list rows. */
+export const iconMd = 'grid size-4 shrink-0 place-items-center *:size-4';
+/** 20px — headers, stats, anything sitting beside a heading. */
+export const iconLg = 'grid size-5 shrink-0 place-items-center *:size-5';
+/** 24px — dialog and empty-state marks. */
+export const iconXl = 'grid size-6 shrink-0 place-items-center *:size-6';

package/dist/styles/paper/index.d.ts

@@ -22,8 +22,6 @@ export { default as Switch } from './Switch.svelte';
 export type { SwitchSize } from './Switch.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Label } from './Label.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export type { RadioOption } from './RadioGroup.svelte';
@@ -32,6 +30,14 @@ export type { CheckboxOption } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export type { ComboboxOption } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';

package/dist/styles/paper/index.js

@@ -21,13 +21,19 @@ export { default as Radio } from './Radio.svelte';
 export { default as Switch } from './Switch.svelte';
 export { default as Field } from './Field.svelte';
 export { default as Label } from './Label.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as CheckboxGroup } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as DatePicker } from './DatePicker.svelte';

package/dist/styles/sprout/AccordionItem.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneText, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLAttributes<HTMLDetailsElement> {
 		title: string;
@@ -9,6 +10,8 @@
 		tone?: Tone;
 		/** Short text on the right of the summary row. */
 		meta?: string;
+		/** Leading icon on the summary row. */
+		icon?: Snippet;
 		children: Snippet;
 	}
 
@@ -17,6 +20,7 @@
 		open = $bindable(false),
 		tone = 'brand',
 		meta,
+		icon,
 		class: className = '',
 		children,
 		...rest
@@ -27,6 +31,7 @@
 	<summary
 		class="flex cursor-pointer list-none items-center gap-4 px-4 py-3.5 font-sans text-sm font-medium text-text transition-colors duration-150 ease-brand-out select-none hover:bg-bg-alt focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-current [&::-webkit-details-marker]:hidden"
 	>
+		{#if icon}<span class={iconMd}>{@render icon()}</span>{/if}
 		<span class="flex-1">{title}</span>
 		{#if meta}<span class="text-[13px] font-normal text-text-muted">{meta}</span>{/if}
 		<svg

package/dist/styles/sprout/AccordionItem.svelte.d.ts

@@ -7,6 +7,8 @@ interface Props extends HTMLAttributes<HTMLDetailsElement> {
     tone?: Tone;
     /** Short text on the right of the summary row. */
     meta?: string;
+    /** Leading icon on the summary row. */
+    icon?: Snippet;
     children: Snippet;
 }
 declare const AccordionItem: import("svelte").Component<Props, {}, "open">;

package/dist/styles/sprout/Avatar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneSoft, type Tone } from '../../core/tones.js';
 
@@ -13,6 +14,8 @@
 		tone?: Tone;
 		/** Rounded square instead of the default circle. */
 		squared?: boolean;
+		/** Drawn instead of the initials when there is no `src` — a user mark. */
+		fallback?: Snippet;
 	}
 
 	let {
@@ -22,6 +25,7 @@
 		size = 'md',
 		tone = 'brand',
 		squared = false,
+		fallback,
 		class: className = '',
 		...rest
 	}: Props = $props();
@@ -34,6 +38,15 @@
 		xl: 'size-16 text-lg'
 	};
 
+	// The mark tracks the initials: about half the circle, whatever the size.
+	const glyphs: Record<AvatarSize, string> = {
+		xs: 'grid place-items-center *:size-3',
+		sm: 'grid place-items-center *:size-4',
+		md: 'grid place-items-center *:size-5',
+		lg: 'grid place-items-center *:size-6',
+		xl: 'grid place-items-center *:size-8'
+	};
+
 	const initials = $derived(
 		name
 			.trim()
@@ -54,6 +67,8 @@
 >
 	{#if src}
 		<img {src} alt={alt ?? name} class="size-full object-cover" />
+	{:else if fallback}
+		<span class={glyphs[size]}>{@render fallback()}</span>
 	{:else}
 		{initials}
 	{/if}

package/dist/styles/sprout/Avatar.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -10,6 +11,8 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     tone?: Tone;
     /** Rounded square instead of the default circle. */
     squared?: boolean;
+    /** Drawn instead of the initials when there is no `src` — a user mark. */
+    fallback?: Snippet;
 }
 declare const Avatar: import("svelte").Component<Props, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;

package/dist/styles/sprout/Badge.svelte

@@ -9,6 +9,7 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
+	import { iconSm } from './icon.js';
 
 	export type BadgeVariant = 'soft' | 'solid' | 'outline';
 	export type BadgeSize = 'sm' | 'md';
@@ -19,6 +20,8 @@
 		size?: BadgeSize;
 		/** Small filled circle before the label. */
 		dot?: boolean;
+		/** Leading icon, 14px — sits where the dot would. */
+		icon?: Snippet;
 		children: Snippet;
 	}
 
@@ -27,6 +30,7 @@
 		variant = 'soft',
 		size = 'md',
 		dot = false,
+		icon,
 		class: className = '',
 		children,
 		...rest
@@ -54,5 +58,6 @@
 			class="size-1.5 shrink-0 rounded-full {variant === 'solid' ? 'bg-current' : toneFill[tone]}"
 		></span>
 	{/if}
+	{#if icon}<span class={iconSm}>{@render icon()}</span>{/if}
 	{@render children()}
 </span>

package/dist/styles/sprout/Badge.svelte.d.ts

@@ -9,6 +9,8 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: BadgeSize;
     /** Small filled circle before the label. */
     dot?: boolean;
+    /** Leading icon, 14px — sits where the dot would. */
+    icon?: Snippet;
     children: Snippet;
 }
 declare const Badge: import("svelte").Component<Props, {}, "">;

package/dist/styles/sprout/Breadcrumb.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneHoverText, type Tone } from '../../core/tones.js';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd } from './icon.js';
 
 	export interface BreadcrumbItem {
 		label: string;
 		href?: string;
+		/** Leading icon — a home mark on the first crumb, say. */
+		icon?: Snippet;
 	}
 
 	interface Props extends HTMLAttributes<HTMLElement> {
@@ -29,18 +33,18 @@
 				{#if item.href && i < items.length - 1}
 					<a
 						href={item.href}
-						class="rounded px-1 py-0.5 text-text-muted transition-colors duration-150 ease-brand-out hover:bg-bg-inset {toneHoverText[
+						class="inline-flex items-center gap-1.5 rounded px-1 py-0.5 text-text-muted transition-colors duration-150 ease-brand-out hover:bg-bg-inset {toneHoverText[
 							tone
 						]}"
 					>
-						{item.label}
+						{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}{item.label}
 					</a>
 				{:else}
 					<span
-						class="px-1 py-0.5 font-medium text-text"
+						class="inline-flex items-center gap-1.5 px-1 py-0.5 font-medium text-text"
 						aria-current={i === items.length - 1 ? 'page' : undefined}
 					>
-						{item.label}
+						{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}{item.label}
 					</span>
 				{/if}
 			</li>

package/dist/styles/sprout/Breadcrumb.svelte.d.ts

@@ -1,8 +1,11 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export interface BreadcrumbItem {
     label: string;
     href?: string;
+    /** Leading icon — a home mark on the first crumb, say. */
+    icon?: Snippet;
 }
 interface Props extends HTMLAttributes<HTMLElement> {
     items: BreadcrumbItem[];

package/dist/styles/sprout/Button.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import Spinner from './Spinner.svelte';
+	import { iconMd, iconSm } from './icon.js';
 	import {
 		focusRing,
 		toneBorderSoft,
@@ -18,7 +19,7 @@
 	export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 	export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
-	interface Props extends HTMLButtonAttributes {
+	interface Props extends Omit<HTMLButtonAttributes, 'onclick'> {
 		variant?: ButtonVariant;
 		tone?: Tone;
 		size?: ButtonSize;
@@ -29,7 +30,19 @@
 		loading?: boolean;
 		/** Stretch to the container's full width. */
 		block?: boolean;
-		children: Snippet;
+		/** Leading icon. The spinner takes its place while the button is busy. */
+		icon?: Snippet;
+		/** Trailing icon. */
+		iconEnd?: Snippet;
+		/** Square button with no label — pass an `aria-label`. */
+		iconOnly?: boolean;
+		/**
+		 * Return a promise — a save, a submit, a fetch — and the button spins and
+		 * locks itself until it settles, without any state in the parent. It
+		 * unlocks on a rejection too, so catch failures inside the handler.
+		 */
+		onclick?: (event: MouseEvent) => unknown;
+		children?: Snippet;
 	}
 
 	let {
@@ -39,6 +52,10 @@
 		href,
 		loading = false,
 		block = false,
+		icon,
+		iconEnd,
+		iconOnly = false,
+		onclick,
 		disabled = false,
 		type = 'button',
 		class: className = '',
@@ -62,6 +79,13 @@
 		xl: 'h-14 px-8 text-base'
 	};
 
+	const squares: Record<ButtonSize, string> = {
+		sm: 'size-9',
+		md: 'size-11',
+		lg: 'size-12',
+		xl: 'size-14'
+	};
+
 	const variantClass = $derived.by(() => {
 		switch (variant) {
 			case 'primary':
@@ -83,7 +107,24 @@
 	});
 
 	const isLink = $derived(variant === 'link');
-	const inert = $derived(disabled || loading);
+
+	/** Set by an `onclick` that returned a promise, on top of the `loading` prop. */
+	let pending = $state(false);
+	const busy = $derived(loading || pending);
+	const inert = $derived(disabled || busy);
+
+	const iconClass = $derived(size === 'sm' ? iconSm : iconMd);
+
+	async function handleClick(event: MouseEvent) {
+		const result = onclick?.(event);
+		// Anything else is a plain handler: nothing to wait for, nothing to lock.
+		if (!(result instanceof Promise)) return;
+		pending = true;
+		// The handler owns its own errors — catch them there to show a message.
+		// All the button needs to know is that the work has settled.
+		await result.catch(() => {});
+		pending = false;
+	}
 </script>
 
 <svelte:element
@@ -92,14 +133,24 @@
 	type={href ? undefined : type}
 	disabled={href ? undefined : inert}
 	aria-disabled={href && inert ? 'true' : undefined}
-	aria-busy={loading ? 'true' : undefined}
+	aria-busy={busy ? 'true' : undefined}
 	role={href ? 'button' : undefined}
-	class="{base} {focusRing} {toneRing[tone]} {variantClass} {isLink ? '' : sizes[size]}
+	class="{base} {focusRing} {toneRing[tone]} {variantClass} {isLink
+		? ''
+		: iconOnly
+			? squares[size]
+			: sizes[size]}
 		{block ? 'w-full' : ''} {className}"
 	{...rest}
+	onclick={handleClick}
 >
-	{#if loading}
+	{#if busy}
 		<Spinner size={size === 'sm' ? 'xs' : 'sm'} label="" />
+	{:else if icon}
+		<span class={iconClass} aria-hidden="true">{@render icon()}</span>
+	{/if}
+	{@render children?.()}
+	{#if iconEnd && !iconOnly}
+		<span class={iconClass} aria-hidden="true">{@render iconEnd()}</span>
 	{/if}
-	{@render children()}
 </svelte:element>

package/dist/styles/sprout/Button.svelte.d.ts

@@ -3,7 +3,7 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
-interface Props extends HTMLButtonAttributes {
+interface Props extends Omit<HTMLButtonAttributes, 'onclick'> {
     variant?: ButtonVariant;
     tone?: Tone;
     size?: ButtonSize;
@@ -14,7 +14,19 @@ interface Props extends HTMLButtonAttributes {
     loading?: boolean;
     /** Stretch to the container's full width. */
     block?: boolean;
-    children: Snippet;
+    /** Leading icon. The spinner takes its place while the button is busy. */
+    icon?: Snippet;
+    /** Trailing icon. */
+    iconEnd?: Snippet;
+    /** Square button with no label — pass an `aria-label`. */
+    iconOnly?: boolean;
+    /**
+     * Return a promise — a save, a submit, a fetch — and the button spins and
+     * locks itself until it settles, without any state in the parent. It
+     * unlocks on a rejection too, so catch failures inside the handler.
+     */
+    onclick?: (event: MouseEvent) => unknown;
+    children?: Snippet;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/styles/sprout/Card.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneBorderLeft, toneHoverBorder, toneSurface, type Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 	import { soft, softOnHover } from './lift.js';
 
 	export type CardVariant = 'outline' | 'filled' | 'tinted';
@@ -16,6 +17,8 @@
 		padded?: boolean;
 		title?: string;
 		eyebrow?: string;
+		/** Leading icon above the title. Ignored when you pass `header`. */
+		icon?: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
 		children: Snippet;
@@ -29,6 +32,7 @@
 		padded = true,
 		title,
 		eyebrow,
+		icon,
 		header,
 		footer,
 		class: className = '',
@@ -55,11 +59,12 @@
 		{className}"
 	{...rest}
 >
-	{#if header || title || eyebrow}
+	{#if header || title || eyebrow || icon}
 		<div class="flex flex-col gap-1 {padded ? 'px-6 pt-6' : ''}">
 			{#if header}
 				{@render header()}
 			{:else}
+				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				{#if eyebrow}
 					<span class="font-sans text-xs font-semibold text-text-muted">{eyebrow}</span>
 				{/if}