@nqmcreative/ui 0.2.2 → 0.3.0

package/dist/styles/matte/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/matte/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';
 
 	export type CardVariant = 'outline' | 'filled' | 'tinted';
 
@@ -15,6 +16,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;
@@ -28,6 +31,7 @@
 		padded = true,
 		title,
 		eyebrow,
+		icon,
 		header,
 		footer,
 		class: className = '',
@@ -49,11 +53,12 @@
 		{className}"
 	{...rest}
 >
-	{#if header || title || eyebrow}
-		<div class="flex flex-col gap-1 {padded ? 'px-6 pt-6' : ''}">
+	{#if header || title || eyebrow || icon}
+		<div class="flex flex-col gap-1 {padded ? 'px-5 pt-5' : ''}">
 			{#if header}
 				{@render header()}
 			{:else}
+				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				{#if eyebrow}
 					<span class="font-mono text-xs tracking-wide text-text-muted uppercase">{eyebrow}</span>
 				{/if}
@@ -64,12 +69,12 @@
 		</div>
 	{/if}
 
-	<div class="flex-1 {padded ? (header || title || eyebrow ? 'px-6 pt-4 pb-6' : 'p-6') : ''}">
+	<div class="flex-1 {padded ? (header || title || eyebrow ? 'px-5 pt-3.5 pb-5' : 'p-5') : ''}">
 		{@render children()}
 	</div>
 
 	{#if footer}
-		<div class="border-t border-hairline {padded ? 'px-6 py-4' : ''}">
+		<div class="border-t border-hairline {padded ? 'px-5 py-3.5' : ''}">
 			{@render footer()}
 		</div>
 	{/if}

package/dist/styles/matte/Card.svelte.d.ts

@@ -12,6 +12,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     padded?: boolean;
     title?: string;
     eyebrow?: string;
+    /** Leading icon above the title. Ignored when you pass `header`. */
+    icon?: Snippet;
     header?: Snippet;
     footer?: Snippet;
     children: Snippet;

package/dist/styles/matte/CheckboxGroup.svelte

@@ -3,10 +3,13 @@
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Checkbox from './Checkbox.svelte';
 	import type { Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 
 	export interface CheckboxOption {
 		value: string;
 		label: string;
+		/** Leading icon, 20px. Drawn in `boxed` mode only. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 	}
@@ -76,6 +79,9 @@
 							{checked ? 'border-text bg-bg-alt' : 'border-hairline hover:border-hairline-strong'}
 							{disabled ? 'pointer-events-none opacity-50' : ''}"
 					>
+						{#if option.icon}
+							<span class={iconLg}>{@render option.icon()}</span>
+						{/if}
 						<Checkbox
 							{checked}
 							{disabled}

package/dist/styles/matte/CheckboxGroup.svelte.d.ts

@@ -4,6 +4,8 @@ import type { Tone } from '../../core/tones.js';
 export interface CheckboxOption {
     value: string;
     label: string;
+    /** Leading icon, 20px. Drawn in `boxed` mode only. */
+    icon?: Snippet;
     description?: string;
     disabled?: boolean;
 }

package/dist/styles/matte/Combobox.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { anchored } from '../../core/actions/anchor.js';
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd } from './icon.js';
 
 	export interface ComboboxOption {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		/** Second line under the label. */
 		description?: string;
 		disabled?: boolean;
@@ -142,7 +146,7 @@
 
 <div
 	bind:this={wrapper}
-	class="relative inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-4 transition-colors duration-150 ease-brand-out
+	class="relative inline-flex w-full items-center gap-2 border bg-bg pr-2 pl-3.5 transition-colors duration-150 ease-brand-out
 		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
 		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 >
@@ -166,7 +170,7 @@
 		}}
 		onfocus={openList}
 		onkeydown={onKeydown}
-		class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+		class="h-10 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
 	/>
 
 	{#if name}<input type="hidden" {name} {value} />{/if}
@@ -234,6 +238,7 @@
 							{index === active ? toneSoft[tone] : 'text-text-secondary'}"
 					>
 						<span class="flex items-center gap-2">
+							{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
 							<span class="min-w-0 flex-1 truncate">{option.label}</span>
 							{#if option.value === value}
 								<svg

package/dist/styles/matte/Combobox.svelte.d.ts

@@ -1,7 +1,10 @@
+import type { Snippet } from 'svelte';
 import { type Tone } from '../../core/tones.js';
 export interface ComboboxOption {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     /** Second line under the label. */
     description?: string;
     disabled?: boolean;

package/dist/styles/matte/CommandPalette.svelte

@@ -1,7 +1,11 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
 	export interface CommandItem {
 		id: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		/** Second line under the label. */
 		description?: string;
 		/** Items sharing a group are rendered under one heading. */
@@ -21,6 +25,8 @@
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
+	import { isTypingTarget } from '../../core/trigger.js';
+	import { iconMd } from './icon.js';
 	import Kbd from './Kbd.svelte';
 
 	interface Props {
@@ -34,6 +40,11 @@
 		 * Pass `null` to wire your own trigger only.
 		 */
 		hotkey?: string | null;
+		/**
+		 * Key that opens the palette on its own, pressed anywhere the reader
+		 * isn't typing. Default `'/'`. Pass `null` to turn it off.
+		 */
+		quickKey?: string | null;
 		onselect?: (item: CommandItem) => void;
 		class?: string;
 	}
@@ -45,6 +56,7 @@
 		emptyText,
 		tone = 'brand',
 		hotkey = 'k',
+		quickKey = '/',
 		onselect,
 		class: className = ''
 	}: Props = $props();
@@ -82,11 +94,27 @@
 	});
 
 	$effect(() => {
-		if (!hotkey) return;
+		if (!hotkey && !quickKey) return;
 		const onKeydown = (event: KeyboardEvent) => {
-			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === hotkey.toLowerCase()) {
+			const key = event.key.toLowerCase();
+
+			if ((event.metaKey || event.ctrlKey) && key === hotkey?.toLowerCase()) {
 				event.preventDefault();
 				open = !open;
+				return;
+			}
+
+			// A bare key can only open the palette, never close it: while it is
+			// open the keystroke belongs to the query field.
+			if (
+				key === quickKey?.toLowerCase() &&
+				!event.metaKey &&
+				!event.ctrlKey &&
+				!event.altKey &&
+				!isTypingTarget(event.target)
+			) {
+				event.preventDefault();
+				open = true;
 			}
 		};
 		window.addEventListener('keydown', onKeydown);
@@ -138,7 +166,7 @@
 	class="mx-auto mt-[12vh] mb-auto w-[min(36rem,calc(100vw-2rem))] max-w-none border border-hairline bg-bg p-0 text-text backdrop:bg-text/40 {className}"
 >
 	<div use:focusTrap={{ autofocus: false }} onkeydown={onKeydown} role="none" class="flex flex-col">
-		<div class="flex items-center gap-3 border-b border-hairline px-4">
+		<div class="flex items-center gap-3 border-b border-hairline px-3.5">
 			<svg
 				class="size-4 shrink-0 text-text-muted"
 				viewBox="0 0 16 16"
@@ -156,7 +184,7 @@
 				autocomplete="off"
 				aria-label={placeholder ?? t.current.commandPlaceholder}
 				placeholder={placeholder ?? t.current.commandPlaceholder}
-				class="h-12 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
+				class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text placeholder:text-text-muted focus:outline-none"
 			/>
 			<Kbd>esc</Kbd>
 		</div>
@@ -168,13 +196,15 @@
 			class="max-h-80 overflow-y-auto py-1"
 		>
 			{#if flat.length === 0}
-				<p class="px-4 py-10 text-center font-sans text-sm text-text-muted">
+				<p class="px-3.5 py-10 text-center font-sans text-sm text-text-muted">
 					{emptyText ?? t.current.noResults}
 				</p>
 			{:else}
 				{#each groups as [group, groupItems] (group)}
 					{#if group}
-						<p class="px-4 pt-3 pb-1 font-mono text-[10px] tracking-wide text-text-muted uppercase">
+						<p
+							class="px-3.5 pt-3 pb-1 font-mono text-[10px] tracking-wide text-text-muted uppercase"
+						>
 							{group}
 						</p>
 					{/if}
@@ -189,10 +219,11 @@
 							aria-disabled={item.disabled}
 							onclick={() => run(item)}
 							onpointermove={() => (cursor.index = index)}
-							class="flex cursor-pointer items-center gap-3 px-4 py-2.5 font-sans text-[14px] transition-colors duration-100
+							class="flex cursor-pointer items-center gap-3 px-3.5 py-2 font-sans text-[14px] transition-colors duration-100
 								{item.disabled ? 'pointer-events-none opacity-40' : ''}
 								{index === active ? toneSoft[tone] : 'text-text-secondary'}"
 						>
+							{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 							<span class="flex min-w-0 flex-1 flex-col gap-0.5">
 								<span class="truncate">{item.label}</span>
 								{#if item.description}

package/dist/styles/matte/CommandPalette.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 export interface CommandItem {
     id: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     /** Second line under the label. */
     description?: string;
     /** Items sharing a group are rendered under one heading. */
@@ -24,6 +27,11 @@ interface Props {
      * Pass `null` to wire your own trigger only.
      */
     hotkey?: string | null;
+    /**
+     * Key that opens the palette on its own, pressed anywhere the reader
+     * isn't typing. Default `'/'`. Pass `null` to turn it off.
+     */
+    quickKey?: string | null;
     onselect?: (item: CommandItem) => void;
     class?: string;
 }

package/dist/styles/matte/DatePicker.svelte

@@ -94,7 +94,7 @@
 
 <div
 	bind:this={wrapper}
-	class="inline-flex w-full items-center gap-1 border bg-bg pr-1 pl-4 transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center gap-1 border bg-bg pr-1 pl-3.5 transition-colors duration-150 ease-brand-out
 		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
 		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 >
@@ -118,7 +118,7 @@
 		}}
 		onblur={commit}
 		onkeydown={onKeydown}
-		class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none"
+		class="h-10 w-full min-w-0 bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none"
 	/>
 
 	{#if name}<input type="hidden" {name} {value} />{/if}

package/dist/styles/matte/Drawer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { iconLg } from './icon.js';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
@@ -15,6 +16,8 @@
 		size?: DrawerSize;
 		title?: string;
 		description?: string;
+		/** Leading icon beside the title. */
+		icon?: Snippet;
 		dismissible?: boolean;
 		footer?: Snippet;
 		onclose?: () => void;
@@ -27,6 +30,7 @@
 		size = 'md',
 		title,
 		description,
+		icon,
 		dismissible = true,
 		footer,
 		onclose,
@@ -91,7 +95,8 @@
 >
 	<div class="flex h-full flex-col">
 		{#if title || dismissible}
-			<div class="flex items-start gap-4 border-b border-hairline px-6 py-5">
+			<div class="flex items-start gap-4 border-b border-hairline px-5 py-4">
+				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				<div class="flex min-w-0 flex-1 flex-col gap-1">
 					{#if title}
 						<h2 class="font-heading text-lg font-medium tracking-tight">{title}</h2>
@@ -116,7 +121,7 @@
 		{/if}
 
 		<div
-			class="flex-1 overflow-y-auto px-6 py-5 font-sans text-[15px] leading-relaxed text-text-secondary"
+			class="flex-1 overflow-y-auto px-5 py-4 font-sans text-[15px] leading-relaxed text-text-secondary"
 		>
 			{@render children()}
 		</div>

package/dist/styles/matte/Drawer.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props extends HTMLDialogAttributes {
     size?: DrawerSize;
     title?: string;
     description?: string;
+    /** Leading icon beside the title. */
+    icon?: Snippet;
     dismissible?: boolean;
     footer?: Snippet;
     onclose?: () => void;

package/dist/styles/matte/Dropzone.svelte

@@ -173,7 +173,7 @@
 		<ul class="flex flex-col border border-hairline">
 			{#each files as file, i (file.name + file.size + i)}
 				<li
-					class="flex items-center gap-3 border-b border-hairline px-4 py-3 font-sans last:border-b-0"
+					class="flex items-center gap-3 border-b border-hairline px-3.5 py-2.5 font-sans last:border-b-0"
 				>
 					<span class="min-w-0 flex-1 truncate text-sm text-text">{file.name}</span>
 					<span class="shrink-0 font-mono text-xs text-text-muted">{formatSize(file.size)}</span>

package/dist/styles/matte/FeatureCard.svelte

@@ -29,7 +29,7 @@
 <svelte:element
 	this={href ? 'a' : 'div'}
 	{href}
-	class="group flex flex-col gap-3 bg-bg p-6 {href
+	class="group flex flex-col gap-3 bg-bg p-5 {href
 		? `transition-colors duration-150 ease-brand-out ${focusRing} ${toneRing[tone]}`
 		: ''} {className}"
 	{...rest}

package/dist/styles/matte/Footer.svelte

@@ -2,6 +2,8 @@
 	export interface FooterLink {
 		label: string;
 		href?: string;
+		/** Leading icon, 14px. */
+		icon?: Snippet;
 		external?: boolean;
 	}
 
@@ -14,6 +16,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { toneHoverText, type Tone } from '../../core/tones.js';
+	import { iconSm } from './icon.js';
 
 	interface Props {
 		columns?: FooterColumn[];
@@ -59,11 +62,12 @@
 												href={item.href}
 												target={item.external ? '_blank' : undefined}
 												rel={item.external ? 'noreferrer' : undefined}
-												class="font-sans text-sm text-text-secondary transition-colors duration-150 ease-brand-out {toneHoverText[
+												class="inline-flex items-center gap-2 font-sans text-sm text-text-secondary transition-colors duration-150 ease-brand-out {toneHoverText[
 													tone
 												]}"
 											>
-												{item.label}
+												{#if item.icon}<span class={iconSm}>{@render item.icon()}</span
+													>{/if}{item.label}
 												{#if item.external}<span aria-hidden="true" class="text-[0.85em]">↗</span
 													>{/if}
 											</a>

package/dist/styles/matte/Footer.svelte.d.ts

@@ -1,6 +1,8 @@
 export interface FooterLink {
     label: string;
     href?: string;
+    /** Leading icon, 14px. */
+    icon?: Snippet;
     external?: boolean;
 }
 export interface FooterColumn {

package/dist/styles/matte/Input.svelte

@@ -30,14 +30,14 @@
 	}: Props = $props();
 
 	const sizes: Record<InputSize, string> = {
-		sm: 'h-9 text-[13px]',
-		md: 'h-11 text-[15px]',
-		lg: 'h-12 text-base'
+		sm: 'h-8 text-[13px]',
+		md: 'h-10 text-[15px]',
+		lg: 'h-11 text-base'
 	};
 </script>
 
 <span
-	class="inline-flex w-full items-center gap-2 border bg-bg px-4 transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center gap-2 border bg-bg px-3.5 transition-colors duration-150 ease-brand-out
 		{sizes[size]}
 		{invalid
 		? 'border-danger focus-within:border-danger'

package/dist/styles/matte/Link.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { focusRing, toneHoverText, toneRing, toneText, type Tone } from '../../core/tones.js';
+	import { iconSm } from './icon.js';
 
 	interface Props extends HTMLAnchorAttributes {
 		tone?: Tone;
@@ -11,6 +12,10 @@
 		external?: boolean;
 		/** Inherit the surrounding text colour instead of the tone. */
 		muted?: boolean;
+		/** Leading icon, 14px. */
+		icon?: Snippet;
+		/** Trailing icon, before the external mark. */
+		iconEnd?: Snippet;
 		children: Snippet;
 	}
 
@@ -19,6 +24,8 @@
 		underline = 'hover',
 		external = false,
 		muted = false,
+		icon,
+		iconEnd,
 		class: className = '',
 		children,
 		...rest
@@ -39,6 +46,8 @@
 		{underlines[underline]} {focusRing} {toneRing[tone]} {className}"
 	{...rest}
 >
+	{#if icon}<span class={iconSm}>{@render icon()}</span>{/if}
 	{@render children()}
+	{#if iconEnd}<span class={iconSm}>{@render iconEnd()}</span>{/if}
 	{#if external}<span aria-hidden="true" class="text-[0.85em]">↗</span>{/if}
 </a>

package/dist/styles/matte/Link.svelte.d.ts

@@ -9,6 +9,10 @@ interface Props extends HTMLAnchorAttributes {
     external?: boolean;
     /** Inherit the surrounding text colour instead of the tone. */
     muted?: boolean;
+    /** Leading icon, 14px. */
+    icon?: Snippet;
+    /** Trailing icon, before the external mark. */
+    iconEnd?: Snippet;
     children: Snippet;
 }
 declare const Link: import("svelte").Component<Props, {}, "">;

package/dist/styles/matte/MenuItem.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { toneSoftHover, toneText, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLButtonAttributes {
 		/** Renders an `<a>` instead of a `<button>`. */
@@ -37,7 +38,7 @@
 	disabled={href ? undefined : disabled}
 	aria-disabled={disabled ? 'true' : undefined}
 	tabindex={disabled ? undefined : -1}
-	class="flex w-full items-center gap-2.5 px-3 py-2 text-left text-[14px] transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
+	class="flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[14px] transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
 		{tone === 'neutral'
 		? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
 		: `${toneText[tone]} ${toneSoftHover[tone]}`}
@@ -49,7 +50,7 @@
 			<path d="m2 7 3.2 3.2L12 3.6" stroke="currentColor" stroke-width="1.6" />
 		</svg>
 	{:else if icon}
-		<span class="flex size-3.5 shrink-0 items-center justify-center">{@render icon()}</span>
+		<span class={iconMd}>{@render icon()}</span>
 	{/if}
 	<span class="min-w-0 flex-1 truncate">{@render children()}</span>
 	{#if shortcut}

package/dist/styles/matte/Modal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { iconLg } from './icon.js';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
@@ -11,6 +12,8 @@
 		open?: boolean;
 		title?: string;
 		description?: string;
+		/** Leading icon beside the title. */
+		icon?: Snippet;
 		size?: ModalSize;
 		/** Clicking the backdrop or pressing Escape closes the dialog. */
 		dismissible?: boolean;
@@ -26,6 +29,7 @@
 		open = $bindable(false),
 		title,
 		description,
+		icon,
 		size = 'md',
 		dismissible = true,
 		showClose,
@@ -74,7 +78,8 @@
 >
 	<div class="flex flex-col">
 		{#if title || closable}
-			<div class="flex items-start gap-4 border-b border-hairline px-6 py-5">
+			<div class="flex items-start gap-4 border-b border-hairline px-5 py-4">
+				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				<div class="flex min-w-0 flex-1 flex-col gap-1">
 					{#if title}
 						<h2 class="font-heading text-lg font-medium tracking-tight">{title}</h2>
@@ -98,12 +103,12 @@
 			</div>
 		{/if}
 
-		<div class="px-6 py-5 font-sans text-[15px] leading-relaxed text-text-secondary">
+		<div class="px-5 py-4 font-sans text-[15px] leading-relaxed text-text-secondary">
 			{@render children()}
 		</div>
 
 		{#if footer}
-			<div class="flex items-center justify-end gap-3 border-t border-hairline px-6 py-4">
+			<div class="flex items-center justify-end gap-3 border-t border-hairline px-5 py-3.5">
 				{@render footer()}
 			</div>
 		{/if}

package/dist/styles/matte/Modal.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props extends HTMLDialogAttributes {
     open?: boolean;
     title?: string;
     description?: string;
+    /** Leading icon beside the title. */
+    icon?: Snippet;
     size?: ModalSize;
     /** Clicking the backdrop or pressing Escape closes the dialog. */
     dismissible?: boolean;

package/dist/styles/matte/MultiSelect.svelte

@@ -1,7 +1,11 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
 	export interface MultiSelectOption {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 		group?: string;
@@ -13,6 +17,7 @@
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd, iconSm } from './icon.js';
 	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props {
@@ -153,7 +158,7 @@
 					tone
 				]}"
 			>
-				{option.label}
+				{#if option.icon}<span class={iconSm}>{@render option.icon()}</span>{/if}{option.label}
 				<button
 					type="button"
 					onclick={() => remove(option)}
@@ -259,6 +264,7 @@
 								</svg>
 							{/if}
 						</span>
+						{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
 						<span class="flex min-w-0 flex-1 flex-col gap-0.5">
 							<span class="truncate">{option.label}</span>
 							{#if option.description}

package/dist/styles/matte/MultiSelect.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 export interface MultiSelectOption {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     description?: string;
     disabled?: boolean;
     group?: string;