@nqmcreative/ui 0.4.1 → 0.4.3

package/dist/styles/paper/Modal.svelte

@@ -39,6 +39,8 @@
 		...rest
 	}: Props = $props();
 
+	const uid = $props.id();
+
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const closable = $derived(showClose ?? dismissible);
@@ -64,12 +66,14 @@
 
 <dialog
 	bind:this={dialog}
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	aria-describedby={description ? `${uid}-description` : undefined}
 	onclose={close}
 	onclick={onBackdrop}
 	oncancel={(event) => {
 		if (!dismissible) event.preventDefault();
 	}}
-	class="m-auto w-[calc(100%-2rem)] rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {sizes[
+	class="m-auto w-[calc(100%-2rem)] animate-enter rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {sizes[
 		size
 	]} {className}"
 	{...rest}
@@ -80,10 +84,12 @@
 				{#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-base font-semibold text-text">{title}</h2>
+						<h2 id="{uid}-title" class="font-heading text-base font-semibold text-text">{title}</h2>
 					{/if}
 					{#if description}
-						<p class="font-sans text-[13px] text-text-muted">{description}</p>
+						<p id="{uid}-description" class="font-sans text-[13px] text-text-muted">
+							{description}
+						</p>
 					{/if}
 				</div>
 				{#if closable}

package/dist/styles/paper/MultiSelect.svelte

@@ -232,7 +232,7 @@
 		id="{id ?? 'multiselect'}-listbox"
 		role="listbox"
 		aria-multiselectable="true"
-		class="z-50 max-h-64 overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
+		class="z-50 max-h-64 animate-reveal overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
 	>
 		{#if flat.length === 0}
 			<p class="px-3 py-6 text-center text-sm text-text-muted">

package/dist/styles/paper/Navbar.svelte

@@ -111,7 +111,7 @@
 							class="{link} {focusRing} {toneRing[tone]} {item.active
 								? toneSoft[tone]
 								: 'text-text-secondary hover:bg-bg-inset hover:text-text'} {item.disabled
-								? 'pointer-events-none opacity-50'
+								? 'pointer-events-none opacity-40'
 								: ''}"
 						>
 							{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
@@ -164,7 +164,7 @@
 					class="flex items-center justify-between gap-3 rounded-md px-3 py-2.5 font-sans text-sm font-medium {item.active
 						? `${toneSoft[tone]}`
 						: 'text-text-secondary hover:bg-bg-inset'} {item.disabled
-						? 'pointer-events-none opacity-50'
+						? 'pointer-events-none opacity-40'
 						: ''}"
 				>
 					<span class="flex min-w-0 items-center gap-2.5">

package/dist/styles/paper/Popover.svelte

@@ -77,7 +77,7 @@
 		role="dialog"
 		aria-label={title}
 		tabindex="-1"
-		class="z-50 flex max-w-xs flex-col gap-2 rounded-lg border border-hairline bg-bg p-4 font-sans shadow-lg {className}"
+		class="z-50 flex max-w-xs animate-reveal flex-col gap-2 rounded-lg border border-hairline bg-bg p-4 font-sans shadow-lg {className}"
 	>
 		{#if title}
 			<p class="font-heading text-sm font-semibold text-text">{title}</p>

package/dist/styles/paper/Radio.svelte

@@ -24,32 +24,51 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	const uid = $props.id();
 </script>
 
-<label
-	class="group inline-flex items-start gap-2.5 font-sans text-sm
-		{disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'} {className}"
+<div
+	class="inline-block font-sans text-sm {disabled
+		? 'pointer-events-none opacity-50'
+		: ''} {className}"
 >
-	<input type="radio" bind:group {value} {disabled} class="peer sr-only" {...rest} />
-	<span
-		class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border border-hairline-strong bg-bg shadow-xs transition-colors duration-150 ease-brand-out
+	<label class="group inline-flex items-start gap-2.5 {disabled ? '' : 'cursor-pointer'}">
+		<input
+			type="radio"
+			bind:group
+			{value}
+			{disabled}
+			aria-describedby={description ? `${uid}-description` : undefined}
+			class="peer sr-only"
+			{...rest}
+		/>
+		<span
+			class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border border-hairline-strong bg-bg shadow-xs transition-colors duration-150 ease-brand-out
 			{tonePeerChecked[tone]} {peerFocusRing} {tonePeerFocus[tone]}"
-		aria-hidden="true"
-	>
+			aria-hidden="true"
+		>
+			<span
+				class="size-1.5 rounded-full bg-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
+			></span>
+		</span>
+		{#if label || children}
+			<span class="flex flex-col gap-0.5">
+				{#if children}
+					{@render children()}
+				{:else if label}
+					<span class="leading-snug text-text">{label}</span>
+				{/if}
+			</span>
+		{/if}
+	</label>
+	{#if description}
+		<!-- ponytail: the indent tracks the 18px dot plus the label's gap; move one, move both. -->
 		<span
-			class="size-1.5 rounded-full bg-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
-		></span>
-	</span>
-	{#if label || description || children}
-		<span class="flex flex-col gap-0.5">
-			{#if children}
-				{@render children()}
-			{:else if label}
-				<span class="leading-snug text-text">{label}</span>
-			{/if}
-			{#if description}
-				<span class="text-[13px] leading-snug text-text-muted">{description}</span>
-			{/if}
+			id="{uid}-description"
+			class="mt-0.5 block pl-[28px] text-[13px] leading-snug text-text-muted"
+		>
+			{description}
 		</span>
 	{/if}
-</label>
+</div>

package/dist/styles/paper/RadioGroup.svelte

@@ -44,13 +44,24 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	const uid = $props.id();
+	// The group's own hint and error sit outside every control in it, so the
+	// fieldset is what has to point at them.
+	const messageId = $derived(error ? `${uid}-error` : hint ? `${uid}-hint` : undefined);
 </script>
 
-<fieldset class="flex flex-col gap-3 border-0 p-0 {className}" {...rest}>
+<fieldset
+	aria-describedby={messageId}
+	class="flex flex-col gap-3 border-0 p-0 {className}"
+	{...rest}
+>
 	{#if legend}
 		<legend class="mb-1 font-sans text-sm font-medium text-text">
 			{legend}
-			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span><span
+					class="sr-only">(required)</span
+				>{/if}
 		</legend>
 	{/if}
 
@@ -94,8 +105,8 @@
 	</div>
 
 	{#if error}
-		<p class="font-sans text-[13px] text-danger">{error}</p>
+		<p id="{uid}-error" role="alert" class="font-sans text-[13px] text-danger">{error}</p>
 	{:else if hint}
-		<p class="font-sans text-[13px] text-text-muted">{hint}</p>
+		<p id="{uid}-hint" class="font-sans text-[13px] text-text-muted">{hint}</p>
 	{/if}
 </fieldset>

package/dist/styles/paper/SegmentedControl.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { focusRing, toneRing, type Tone } from '../../core/tones.js';
+	import { focusRing, toneRing, toneText, type Tone } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 
 	export interface SegmentOption {
@@ -92,7 +92,7 @@
 			onclick={() => select(option)}
 			class="inline-flex items-center justify-center rounded-md font-sans font-medium whitespace-nowrap transition-all duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40
 				{iconOnly ? squares[size] : sizes[size]} {focusRing} {toneRing[tone]}
-				{value === option.value ? 'bg-bg text-text shadow-xs' : 'text-text-muted hover:text-text'}"
+				{value === option.value ? `bg-bg ${toneText[tone]} shadow-xs` : 'text-text-muted hover:text-text'}"
 		>
 			{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
 			{#if !iconOnly}{option.label}{/if}

package/dist/styles/paper/Select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLSelectAttributes } from 'svelte/elements';
-	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+	import { focusRing, toneFocusBorder, toneRing, type Tone } from '../../core/tones.js';
 
 	export interface SelectOption {
 		value: string;
@@ -35,7 +35,9 @@
 	<select
 		bind:value
 		aria-invalid={invalid ? 'true' : undefined}
-		class="h-10 w-full appearance-none rounded-md border bg-bg py-0 pr-9 pl-3 font-sans text-sm text-text shadow-xs transition-colors duration-150 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-50
+		class="{focusRing} {toneRing[
+			tone
+		]} h-10 w-full appearance-none rounded-md border bg-bg py-0 pr-9 pl-3 font-sans text-sm text-text shadow-xs transition-colors duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-50
 			{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusBorder[tone]}`} {className}"
 		{...rest}
 	>

package/dist/styles/paper/Skeleton.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if variant === 'text' && lines > 1}
-	<div class="flex w-full flex-col gap-2 {className}" {...rest}>
+	<div aria-hidden="true" class="flex w-full flex-col gap-2 {className}" {...rest}>
 		{#each { length: lines }, i (i)}
 			<div
 				class="h-4 animate-pulse rounded-md bg-bg-inset {i === lines - 1 ? 'w-2/3' : 'w-full'}"
@@ -39,6 +39,7 @@
 	</div>
 {:else}
 	<div
+		aria-hidden="true"
 		class="animate-pulse bg-bg-inset {variants[variant]} {className}"
 		style="{width ? `width:${width};` : ''}{height ? `height:${height};` : ''}"
 		{...rest}

package/dist/styles/paper/Stat.svelte

@@ -32,7 +32,15 @@
 	}: Props = $props();
 
 	const trendTone: Record<StatTrend, Tone> = { up: 'success', down: 'danger', flat: 'neutral' };
-	const trendGlyph: Record<StatTrend, string> = { up: '↑', down: '↓', flat: '→' };
+	// Drawn rather than typed. `↑` renders in whatever face the reader's system
+	// substitutes for it and is announced as "up arrow" or nothing at all, and
+	// the colour beside it says nothing either — so the word ships with it.
+	const trendPath: Record<StatTrend, string> = {
+		up: 'M7 11V3.5M7 3l3.5 3.5M7 3 3.5 6.5',
+		down: 'M7 3v7.5M7 11l3.5-3.5M7 11 3.5 7.5',
+		flat: 'M3 7h7.5M11 7 7.5 3.5M11 7l-3.5 3.5'
+	};
+	const trendWord: Record<StatTrend, string> = { up: 'up', down: 'down', flat: 'no change' };
 </script>
 
 <div class="flex flex-col gap-1 font-sans {className}" {...rest}>
@@ -49,7 +57,21 @@
 		</span>
 		{#if delta}
 			<span class="text-sm font-medium {toneText[trendTone[trend]]}">
-				{trendGlyph[trend]}
+				<svg
+					class="inline-block size-[1em] align-[-0.115em]"
+					viewBox="0 0 14 14"
+					fill="none"
+					aria-hidden="true"
+				>
+					<path
+						d={trendPath[trend]}
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span class="sr-only">{trendWord[trend]}</span>
 				{delta}
 			</span>
 		{/if}

package/dist/styles/paper/Switch.svelte

@@ -30,6 +30,8 @@
 		md: { track: 'h-6 w-11', thumb: 'size-5', travel: 'translate-x-5' }
 	};
 
+	const uid = $props.id();
+
 	function toggle() {
 		checked = !checked;
 		onchange?.(checked);
@@ -42,6 +44,7 @@
 		role="switch"
 		aria-checked={checked}
 		aria-label={label}
+		aria-describedby={description ? `${uid}-description` : undefined}
 		{disabled}
 		onclick={toggle}
 		class="relative mt-0.5 inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors duration-200 ease-brand-out disabled:pointer-events-none
@@ -57,7 +60,9 @@
 		<span class="flex flex-col gap-0.5 font-sans text-sm">
 			{#if label}<span class="leading-snug text-text">{label}</span>{/if}
 			{#if description}
-				<span class="text-[13px] leading-snug text-text-muted">{description}</span>
+				<span id="{uid}-description" class="text-[13px] leading-snug text-text-muted"
+					>{description}</span
+				>
 			{/if}
 		</span>
 	{/if}

package/dist/styles/paper/Tabs.svelte

@@ -74,7 +74,7 @@
 			}`;
 		}
 		return `${base} h-8 rounded-md px-3.5 ${
-			active ? 'bg-bg text-text shadow-xs' : 'text-text-muted hover:text-text'
+			active ? `bg-bg ${toneText[tone]} shadow-xs` : 'text-text-muted hover:text-text'
 		}`;
 	}
 </script>

package/dist/styles/paper/Textarea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
-	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+	import { focusRing, toneFocusBorder, toneRing, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLTextareaAttributes {
 		value?: string;
@@ -48,7 +48,9 @@
 	bind:value
 	{rows}
 	aria-invalid={invalid ? 'true' : undefined}
-	class="w-full rounded-md border bg-bg px-3 py-2 font-sans text-sm text-text shadow-xs transition-colors duration-150 ease-brand-out placeholder:text-text-muted focus:outline-none disabled:pointer-events-none disabled:opacity-50
+	class="{focusRing} {toneRing[
+		tone
+	]} w-full rounded-md border bg-bg px-3 py-2 font-sans text-sm text-text shadow-xs transition-colors duration-150 ease-brand-out placeholder:text-text-muted disabled:pointer-events-none disabled:opacity-50
 		{autoresize ? 'resize-none overflow-hidden' : 'resize-y'}
 		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusBorder[tone]}`} {className}"
 	{...rest}></textarea>

package/dist/styles/paper/Toaster.svelte

@@ -30,8 +30,24 @@
 	const fromLeft = $derived(position.endsWith('left'));
 	const fromCenter = $derived(position.endsWith('center'));
 
+	/**
+	 * A card sliding in from the edge of the screen, and a stack of them shuffling
+	 * to make room, is exactly the motion this preference exists to stop. Under it
+	 * the toast fades in place and the stack reorders instantly — the state change
+	 * still reads, it just stops travelling.
+	 *
+	 * ponytail: read once at mount. Someone who flips the OS setting mid-session
+	 * gets the new behaviour on the next load; a live listener is the upgrade.
+	 */
+	const stillness =
+		typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
 	const enter = $derived(
-		fromCenter ? { y: fromTop ? -16 : 16, x: 0 } : { x: fromLeft ? -16 : 16, y: 0 }
+		stillness
+			? { x: 0, y: 0 }
+			: fromCenter
+				? { y: fromTop ? -16 : 16, x: 0 }
+				: { x: fromLeft ? -16 : 16, y: 0 }
 	);
 </script>
 
@@ -50,7 +66,7 @@
 			would fight the page underneath.
 		-->
 		<div
-			animate:flip={{ duration: 200 }}
+			animate:flip={{ duration: stillness ? 0 : 200 }}
 			in:fly={{ ...enter, duration: 220 }}
 			out:fly={{ ...enter, duration: 160 }}
 			role={item.tone === 'danger' ? 'alert' : 'status'}
@@ -92,7 +108,7 @@
 			</span>
 
 			<div class="flex min-w-0 flex-1 flex-col gap-1">
-				<p class="text-sm leading-snug font-semibold text-text">{item.title}</p>
+				<p class="font-heading text-sm leading-snug font-semibold text-text">{item.title}</p>
 				{#if item.description}
 					<p class="text-[13px] leading-relaxed text-text-secondary">{item.description}</p>
 				{/if}

package/dist/styles/paper/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { describedBy } from '../../core/trigger.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
@@ -13,6 +14,11 @@
 
 	let { content, placement = 'top', class: className = '', children, ...rest }: Props = $props();
 
+	const uid = $props.id();
+	let wrapper: HTMLElement | null = $state(null);
+
+	$effect(() => describedBy(wrapper, `${uid}-tip`));
+
 	const placements: Record<TooltipPlacement, string> = {
 		top: 'bottom-full left-1/2 mb-1.5 -translate-x-1/2',
 		bottom: 'top-full left-1/2 mt-1.5 -translate-x-1/2',
@@ -21,9 +27,10 @@
 	};
 </script>
 
-<span class="group/tt relative inline-flex" {...rest}>
+<span bind:this={wrapper} class="group/tt relative inline-flex" {...rest}>
 	{@render children()}
 	<span
+		id="{uid}-tip"
 		role="tooltip"
 		class="pointer-events-none invisible absolute z-50 rounded-md bg-text px-2 py-1 font-sans text-xs font-medium whitespace-nowrap text-text-inverse opacity-0 shadow-lg transition-opacity duration-150 ease-brand-out group-focus-within/tt:visible group-focus-within/tt:opacity-100 group-hover/tt:visible group-hover/tt:opacity-100
 			{placements[placement]} {className}"

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

@@ -5,7 +5,7 @@
  * `@nqmcreative/ui/core`, re-exported below so this one import covers
  * the whole style.
  */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, focusWithinRing, toneFocusWithinRing, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
 export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
 export { default as Button } from './Button.svelte';
 export type { ButtonVariant, ButtonSize } from './Button.svelte';

package/dist/styles/paper/index.js

@@ -6,7 +6,7 @@
  * the whole style.
  */
 /* --- shared behaviour --- */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, focusWithinRing, toneFocusWithinRing, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
 /* --- actions --- */
 export { default as Button } from './Button.svelte';
 export { default as Link } from './Link.svelte';

package/dist/styles/paper/theme.css

@@ -29,10 +29,10 @@
 	--color-text-inverse: #ffffff;
 
 	/* --- brand / primary (indigo) --- */
-	--color-brand: #4f46e5;
-	--color-brand-hover: #4338ca;
-	--color-brand-light: #eef2ff;
-	--color-brand-border: #c7d2fe;
+	--color-brand: #15803d;
+	--color-brand-hover: #166534;
+	--color-brand-light: #e8f6ee;
+	--color-brand-border: #a7d9b9;
 
 	/* --- accent (rose) --- */
 	--color-accent: #e11d48;
@@ -95,9 +95,46 @@
 		'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
 
-	/* --- motion --- */
+	/* --- motion ---
+	 * paper enters by rising and fading — depth is its language, so overlays
+	 * settle onto the page rather than snapping or scaling in. One token per
+	 * overlay kind: `enter` for dialog panels + backdrops, `reveal` for anchored
+	 * menus and popovers. matte and sprout define these same two names their own
+	 * way, so an overlay's markup never changes between styles — only the values.
+	 */
 	--ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
 	--ease-brand-out: cubic-bezier(0, 0, 0.2, 1);
+	--animate-enter: nqm-rise 200ms var(--ease-brand-out);
+	--animate-reveal: nqm-drop 180ms var(--ease-brand-out);
+}
+
+/* Enter-only, matching the Drawer: the native <dialog> and the {#if}-mounted
+ * popover each play these once on mount and leave instantly. */
+@keyframes nqm-fade {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes nqm-rise {
+	from {
+		opacity: 0;
+		/* dialogs rise and grow a hair — a gentle zoom onto the page */
+		transform: translateY(8px) scale(0.98);
+		/* one layer, matching the panel's shadow-2xl, so box-shadow interpolates
+		 * to the resting shadow instead of snapping (a mismatched layer count is
+		 * discrete). The shadow deepens as the panel settles. */
+		box-shadow: 0 8px 20px -12px rgb(0 0 0 / 0.18);
+	}
+}
+@keyframes nqm-drop {
+	from {
+		opacity: 0;
+		transform: translateY(-6px);
+		/* two layers, matching the menus' shadow-lg — same reason as above */
+		box-shadow:
+			0 2px 6px -3px rgb(0 0 0 / 0.08),
+			0 1px 3px -2px rgb(0 0 0 / 0.06);
+	}
 }
 
 /*
@@ -126,10 +163,10 @@
 	--color-text-muted: #9ca3af;
 	--color-text-inverse: #0b0f19;
 
-	--color-brand: #818cf8;
-	--color-brand-hover: #a5b4fc;
-	--color-brand-light: #1e1b4b;
-	--color-brand-border: #3730a3;
+	--color-brand: #46a06a;
+	--color-brand-hover: #5cb47e;
+	--color-brand-light: #12281b;
+	--color-brand-border: #255034;
 
 	--color-accent: #fb7185;
 	--color-accent-hover: #fda4af;
@@ -182,10 +219,10 @@
 		--color-text-muted: #9ca3af;
 		--color-text-inverse: #0b0f19;
 
-		--color-brand: #818cf8;
-		--color-brand-hover: #a5b4fc;
-		--color-brand-light: #1e1b4b;
-		--color-brand-border: #3730a3;
+		--color-brand: #46a06a;
+		--color-brand-hover: #5cb47e;
+		--color-brand-light: #12281b;
+		--color-brand-border: #255034;
 
 		--color-accent: #fb7185;
 		--color-accent-hover: #fda4af;
@@ -223,3 +260,38 @@
 		--color-neutral-border: #374151;
 	}
 }
+
+/*
+ * The surfaces the browser draws for us.
+ *
+ * A caret and a highlight in the user-agent's blue belong to no design system,
+ * and they are the two the reader touches most: one sits in every field they
+ * type into, the other appears the moment they drag across a paragraph. The
+ * selection is mixed from the brand rather than pinned to a token so it stays
+ * a wash — the text underneath keeps its own colour and its own contrast.
+ */
+@layer base {
+	/* The one overlay surface a class can't reach: every <dialog> backdrop
+	 * fades with its panel. */
+	dialog::backdrop {
+		animation: nqm-fade 180ms var(--ease-brand-out);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.animate-enter,
+		.animate-reveal,
+		dialog::backdrop {
+			animation: none;
+		}
+	}
+
+	::selection {
+		background-color: color-mix(in oklab, var(--color-brand) 24%, transparent);
+	}
+
+	input,
+	textarea,
+	[contenteditable] {
+		caret-color: var(--color-brand);
+	}
+}

package/dist/styles/sprout/Alert.svelte

@@ -41,7 +41,7 @@
 	const variants = $derived({
 		soft: `${toneSurface[tone]} border ${toneBorderSoft[tone]}`,
 		outline: `bg-bg ${edge} border ${toneBorderSoft[tone]}`,
-		accent: `${toneSurface[tone]} border-l-4 ${toneBorder[tone]}`
+		accent: `${toneSurface[tone]} border-l-2 ${toneBorder[tone]}`
 	});
 
 	function dismiss() {
@@ -70,7 +70,7 @@
 
 		<div class="flex min-w-0 flex-1 flex-col gap-1">
 			{#if title}
-				<p class="text-sm leading-snug font-semibold {toneText[tone]}">{title}</p>
+				<p class="font-heading text-sm leading-snug font-semibold {toneText[tone]}">{title}</p>
 			{/if}
 			{#if children}
 				<div class="text-[13px] leading-relaxed text-text-secondary">{@render children()}</div>
@@ -82,7 +82,7 @@
 				type="button"
 				onclick={dismiss}
 				aria-label="Dismiss"
-				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg/60 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+				class="-m-1 shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg/60 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
 				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 					<path

package/dist/styles/sprout/Avatar.svelte

@@ -47,6 +47,12 @@
 		xl: 'grid place-items-center *:size-8'
 	};
 
+	// A src that 404s left the reader with the browser's broken-image mark while
+	// the initials sat right there unused. Holding the failed URL rather than a
+	// flag means a new src is tried again on its own.
+	let failed = $state('');
+	const broken = $derived(failed !== '' && failed === src);
+
 	const initials = $derived(
 		name
 			.trim()
@@ -60,13 +66,18 @@
 
 <span
 	class="inline-flex shrink-0 items-center justify-center overflow-hidden font-sans font-semibold select-none
-		{squared ? 'rounded-2xl' : 'rounded-full'} {sizes[size]} {src
+		{squared ? 'rounded-2xl' : 'rounded-full'} {sizes[size]} {src && !broken
 		? 'bg-bg-inset'
 		: toneSoft[tone]} {className}"
 	{...rest}
 >
-	{#if src}
-		<img {src} alt={alt ?? name} class="size-full object-cover" />
+	{#if src && !broken}
+		<img
+			{src}
+			alt={alt ?? name}
+			onerror={() => (failed = src ?? '')}
+			class="size-full object-cover"
+		/>
 	{:else if fallback}
 		<span class={glyphs[size]}>{@render fallback()}</span>
 	{:else}

package/dist/styles/sprout/Breadcrumb.svelte

@@ -30,7 +30,7 @@
 				{#if item.href && i < items.length - 1}
 					<a
 						href={item.href}
-						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[
+						class="inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-text-muted transition-colors duration-150 ease-brand-out hover:bg-bg-inset {toneHoverText[
 							tone
 						]}"
 					>