@nqmcreative/ui 0.4.0 → 0.4.2

package/dist/styles/sprout/Table.svelte

@@ -16,7 +16,6 @@
 	import Checkbox from './Checkbox.svelte';
 	import type { Tone } from '../../core/tones.js';
 	import { nextSort, sortRows, toggleKey, type TableSort } from '../../core/table.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { edge } from './lift.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
@@ -83,8 +82,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const aligns = {
 		left: 'text-left',
 		center: 'text-center',
@@ -140,14 +137,14 @@
 		>
 			<span class="font-sans text-[13px] font-semibold text-text">
 				{selected.length}
-				{t.current.selected}
+				selected
 			</span>
 			<button
 				type="button"
 				onclick={clearSelection}
 				class="rounded-full font-sans text-[13px] font-medium text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
-				{t.current.clear}
+				Clear selection
 			</button>
 			<div class="ml-auto flex flex-wrap items-center gap-2">
 				{@render bulkActions?.({ selected, clear: clearSelection })}
@@ -177,7 +174,7 @@
 								checked={allSelected}
 								indeterminate={someSelected}
 								{tone}
-								aria-label={t.current.selectAllRows}
+								aria-label="Select all rows"
 								onchange={toggleAll}
 							/>
 						</th>
@@ -198,7 +195,7 @@
 								<button
 									type="button"
 									onclick={() => toggleSort(column)}
-									class="inline-flex items-center gap-1.5 rounded transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
+									class="inline-flex items-center gap-1.5 rounded-md transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
 									{sort?.key === column.key ? 'text-text' : ''}"
 								>
 									{column.label}
@@ -224,7 +221,7 @@
 							colspan={columns.length + (selectable ? 1 : 0)}
 							class="px-4 py-10 text-center text-sm text-text-muted"
 						>
-							{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
+							{#if empty}{@render empty()}{:else}No data{/if}
 						</td>
 					</tr>
 				{:else}
@@ -241,7 +238,7 @@
 									<Checkbox
 										checked={isSelected}
 										{tone}
-										aria-label={t.current.selectRow}
+										aria-label="Select row"
 										onchange={() => toggleRow(row)}
 									/>
 								</td>

package/dist/styles/sprout/Tabs.svelte

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

package/dist/styles/sprout/TagsInput.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { addTag, splitTags, type TagRejection } from '../../core/tags.js';
 	import { toneFocusWithinBorder, toneSoft, type Tone } from '../../core/tones.js';
 	import { edge } from './lift.js';
@@ -47,8 +46,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let draft = $state('');
 	let field: HTMLInputElement | null = $state(null);
 	/** The last refusal, cleared as soon as the next keystroke lands. */
@@ -112,8 +109,8 @@
 	const messages: Record<TagRejection, string> = $derived({
 		empty: '',
 		short: `${minLength}+`,
-		duplicate: t.current.duplicateTag,
-		full: `${t.current.selected} ${tags.length}/${max}`
+		duplicate: 'Already added',
+		full: `$selected ${tags.length}/${max}`
 	});
 </script>
 
@@ -137,8 +134,8 @@
 				<button
 					type="button"
 					onclick={() => remove(index)}
-					aria-label="{t.current.removeItem} {tag}"
-					class="inline-flex size-4 items-center justify-center rounded transition-colors duration-150 hover:bg-bg/70 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current"
+					aria-label="Remove {tag}"
+					class="inline-flex size-4 items-center justify-center rounded-full transition-colors duration-150 hover:bg-bg/70 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current"
 				>
 					<svg class="size-2.5" viewBox="0 0 10 10" fill="none" aria-hidden="true">
 						<path
@@ -157,8 +154,8 @@
 			bind:value={draft}
 			{disabled}
 			readonly={full}
-			placeholder={tags.length === 0 ? (placeholder ?? t.current.addTag) : ''}
-			aria-label={placeholder ?? t.current.addTag}
+			placeholder={tags.length === 0 ? (placeholder ?? 'Add a tag') : ''}
+			aria-label={placeholder ?? 'Add a tag'}
 			aria-invalid={invalid ? 'true' : undefined}
 			onkeydown={onKeydown}
 			onpaste={onPaste}

package/dist/styles/sprout/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';
 	import { edge } from './lift.js';
 
 	interface Props extends HTMLTextareaAttributes {
@@ -49,7 +49,9 @@
 	bind:value
 	{rows}
 	aria-invalid={invalid ? 'true' : undefined}
-	class="w-full rounded-xl border bg-bg px-3 py-2 font-sans text-sm text-text {edge} 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-xl border bg-bg px-3 py-2 font-sans text-sm text-text {edge} 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/sprout/ThemeToggle.svelte

@@ -10,7 +10,6 @@
 		storedTheme,
 		type Theme
 	} from '../../core/theme.svelte.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { edge } from './lift.js';
 
 	interface Props {
@@ -34,8 +33,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	$effect(() => {
 		applyTheme(theme);
 		if (persist) persistTheme(theme);
@@ -51,8 +48,8 @@
 	}
 
 	const options = $derived([
-		{ value: 'light' as Theme, label: t.current.lightMode },
-		{ value: 'dark' as Theme, label: t.current.darkMode },
+		{ value: 'light' as Theme, label: 'Light' },
+		{ value: 'dark' as Theme, label: 'Dark' },
 		{ value: 'system' as Theme, label: 'Auto' }
 	]);
 </script>
@@ -96,7 +93,7 @@
 {#if variant === 'segmented'}
 	<div
 		role="radiogroup"
-		aria-label={t.current.toggleTheme}
+		aria-label="Toggle theme"
 		class="inline-flex items-center gap-1 rounded-2xl border border-hairline bg-bg-inset p-1 {className}"
 	>
 		{#each options as option (option.value)}
@@ -120,8 +117,8 @@
 	<button
 		type="button"
 		onclick={cycle}
-		aria-label="{t.current.toggleTheme} ({theme})"
-		title={t.current.toggleTheme}
+		aria-label="Toggle theme ({theme})"
+		title="Toggle theme"
 		class="inline-flex size-9 items-center justify-center rounded-xl border border-hairline bg-bg text-text-secondary {edge} transition-colors duration-150 ease-brand-out hover:bg-bg-alt hover:text-text {focusRing} {toneRing[
 			tone
 		]} {className}"

package/dist/styles/sprout/TimeInput.svelte

@@ -1,6 +1,5 @@
 <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';
@@ -38,8 +37,6 @@
 		...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('');
@@ -74,7 +71,7 @@
 	}
 
 	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';
+		'grid size-6 place-items-center rounded-lg 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
@@ -120,7 +117,7 @@
 					class={stepper}
 					{disabled}
 					onclick={() => nudge(1)}
-					aria-label={t.current.increase}
+					aria-label="Increase"
 				>
 					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 						<path
@@ -137,7 +134,7 @@
 					class={stepper}
 					{disabled}
 					onclick={() => nudge(-1)}
-					aria-label={t.current.decrease}
+					aria-label="Decrease"
 				>
 					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 						<path

package/dist/styles/sprout/Toaster.svelte

@@ -6,7 +6,6 @@
 	import { toneText } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 	import Spinner from './Spinner.svelte';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { soft } from './lift.js';
 
 	export type ToasterPosition =
@@ -19,8 +18,6 @@
 
 	let { position = 'bottom-right', class: className = '' }: Props = $props();
 
-	const t = useLocale();
-
 	const positions: Record<ToasterPosition, string> = {
 		'top-left': 'top-4 left-4 items-start',
 		'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
@@ -34,27 +31,43 @@
 	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>
 
 <div
 	use:portal
 	aria-live="polite"
-	aria-label={t.current.notifications}
-	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
+	aria-label="Notifications"
+	class="pointer-events-none fixed z-100 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
 		position
 	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
 >
 	{#each toast.items as item (item.id)}
 		<!--
-			sprout puts every toast on the same cream card and lets the glyph
+			sprout puts every toast on the same white card and lets the glyph
 			carry the tone. matte tints the whole surface; here a tinted block
 			would fight the warm 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'}
@@ -96,7 +109,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}
@@ -107,7 +120,7 @@
 							item.action?.onclick();
 							toast.dismiss(item.id);
 						}}
-						class="mt-1 self-start rounded font-sans text-[13px] font-semibold underline underline-offset-2 {toneText[
+						class="mt-1 self-start rounded-md font-sans text-[13px] font-semibold underline underline-offset-2 {toneText[
 							item.tone
 						]}"
 					>
@@ -119,8 +132,8 @@
 			<button
 				type="button"
 				onclick={() => toast.dismiss(item.id)}
-				aria-label={t.current.dismiss}
-				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+				aria-label="Dismiss"
+				class="-m-1 shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset 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/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';
 	import { soft } from './lift.js';
 
@@ -14,6 +15,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',
@@ -22,9 +28,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-xl bg-text px-2 py-1 font-sans text-xs font-medium whitespace-nowrap text-text-inverse opacity-0 {soft} 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/sprout/index.d.ts

@@ -1,13 +1,12 @@
 /**
- * Sprout — Warm and fully rounded — leaf green on cream, pill buttons, and a round display face. For school, community and family sites.
+ * Sprout — Warm and fully rounded — leaf green on white, pill buttons, and a round display face. For school, community and family sites.
  *
  * Generated by `bun run index`. Behaviour comes from
  * `@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, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, 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, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
-export { default as LocaleProvider } from './LocaleProvider.svelte';
+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';
 export { default as Link } from './Link.svelte';

package/dist/styles/sprout/index.js

@@ -1,14 +1,12 @@
 /**
- * Sprout — Warm and fully rounded — leaf green on cream, pill buttons, and a round display face. For school, community and family sites.
+ * Sprout — Warm and fully rounded — leaf green on white, pill buttons, and a round display face. For school, community and family sites.
  *
  * Generated by `bun run index`. Behaviour comes from
  * `@nqmcreative/ui/core`, re-exported below so this one import covers
  * 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, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
-/* --- locale --- */
-export { default as LocaleProvider } from './LocaleProvider.svelte';
+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/sprout/lift.d.ts

@@ -36,5 +36,19 @@ export declare const float = "shadow-[0_6px_0_0_rgba(20,83,45,0.09),0_28px_60px_
  * reads as one pressed object.
  */
 export declare const lift: Record<Tone, string>;
+/**
+ * The quiet lip, for a button that is not a solid fill: `soft` and `outline`.
+ *
+ * Drawn in the tone's own border colour — the line `outline` already carries —
+ * so the bottom reads as that border thickening rather than as a shadow stuck
+ * underneath. `soft` has no border of its own, so pairing the two here is what
+ * gives both variants the same edge: the only difference left between them is
+ * the face above it.
+ *
+ * Shortens by the same 3px the button travels, exactly like `lift`. Without
+ * that second step a pressed button just slides down with its shadow attached
+ * and never reads as pressed at all.
+ */
+export declare const liftSoft: Record<Tone, string>;
 /** The same lip at 3px, for things too small to travel: icon tiles, dots. */
 export declare const liftSm: Record<Tone, string>;

package/dist/styles/sprout/lift.js

@@ -23,6 +23,29 @@ export const lift = {
     danger: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-danger)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-danger)_72%,black)]',
     neutral: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-neutral)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-neutral)_72%,black)]'
 };
+/**
+ * The quiet lip, for a button that is not a solid fill: `soft` and `outline`.
+ *
+ * Drawn in the tone's own border colour — the line `outline` already carries —
+ * so the bottom reads as that border thickening rather than as a shadow stuck
+ * underneath. `soft` has no border of its own, so pairing the two here is what
+ * gives both variants the same edge: the only difference left between them is
+ * the face above it.
+ *
+ * Shortens by the same 3px the button travels, exactly like `lift`. Without
+ * that second step a pressed button just slides down with its shadow attached
+ * and never reads as pressed at all.
+ */
+export const liftSoft = {
+    brand: 'shadow-[0_5px_0_0_var(--color-brand-border)] active:shadow-[0_2px_0_0_var(--color-brand-border)]',
+    accent: 'shadow-[0_5px_0_0_var(--color-accent-border)] active:shadow-[0_2px_0_0_var(--color-accent-border)]',
+    violet: 'shadow-[0_5px_0_0_var(--color-violet-border)] active:shadow-[0_2px_0_0_var(--color-violet-border)]',
+    info: 'shadow-[0_5px_0_0_var(--color-info-border)] active:shadow-[0_2px_0_0_var(--color-info-border)]',
+    success: 'shadow-[0_5px_0_0_var(--color-success-border)] active:shadow-[0_2px_0_0_var(--color-success-border)]',
+    warning: 'shadow-[0_5px_0_0_var(--color-warning-border)] active:shadow-[0_2px_0_0_var(--color-warning-border)]',
+    danger: 'shadow-[0_5px_0_0_var(--color-danger-border)] active:shadow-[0_2px_0_0_var(--color-danger-border)]',
+    neutral: 'shadow-[0_5px_0_0_var(--color-neutral-border)] active:shadow-[0_2px_0_0_var(--color-neutral-border)]'
+};
 /** The same lip at 3px, for things too small to travel: icon tiles, dots. */
 export const liftSm = {
     brand: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-brand)_72%,black)]',

package/dist/styles/sprout/theme.css

@@ -1,7 +1,7 @@
 /*
  * sprout — design tokens.
  *
- * The warm one: leaf green on cream, fully rounded corners, and a display face
+ * The warm one: leaf green on white, fully rounded corners, and a display face
  * with round terminals. Built for school, community and family sites, where the
  * reader is a parent on a phone rather than an operator at a desk. Import this
  * after `@import "tailwindcss";` in your app's CSS entry point.
@@ -17,16 +17,21 @@
  */
 @theme {
 	/*
-	 * Surfaces are cream rather than white, and the greys are green-cast. A
-	 * neutral grey next to this much foliage reads as a printing error, so every
-	 * step of the scale carries a little of the brand hue.
+	 * Surfaces are white, and the greys under them are near-neutral with only a
+	 * hair of warmth. The green belongs to the brand, not to the paper: a page
+	 * whose every secondary surface and every hover is tinted reads as tiring
+	 * long before it reads as warm, so the neutrals stay out of the way.
+	 *
+	 * `--color-bg` is the face of a card; `--color-bg-alt` is the ground it sits
+	 * on. Put `bg-bg-alt` on the body and cards float as white, which is the
+	 * layering this style was drawn from.
 	 */
 	/* --- surfaces --- */
-	--color-bg: #fffefb;
-	--color-bg-alt: #f0fdf4;
-	--color-bg-inset: #e3f6e9;
-	--color-hairline: #ecefe7;
-	--color-hairline-strong: #d3e0d1;
+	--color-bg: #ffffff;
+	--color-bg-alt: #f7f7f4;
+	--color-bg-inset: #edede8;
+	--color-hairline: #e6e6e0;
+	--color-hairline-strong: #cfcfc7;
 
 	/* --- text --- */
 	--color-text: #1a3a1f;
@@ -136,25 +141,25 @@
  * Every utility built on these tokens follows automatically, so components
  * need no `dark:` classes of their own.
  *
- * The dark palette is a night garden rather than a neutral slate: the surfaces
- * keep the green cast, and every hue lifts a step or two so it still reads
- * against them.
+ * The dark palette is lamplight rather than a neutral slate: the surfaces carry
+ * the same honey cast as the light ones, and every hue lifts a step or two so
+ * it still reads against them.
  */
 @custom-variant dark (&:where(.dark, .dark *));
 
 .dark {
 	color-scheme: dark;
 
-	--color-bg: #0e1a11;
-	--color-bg-alt: #14251a;
-	--color-bg-inset: #1b3020;
-	--color-hairline: #1e3524;
-	--color-hairline-strong: #2f4a36;
+	--color-bg: #17140e;
+	--color-bg-alt: #211c13;
+	--color-bg-inset: #2d261a;
+	--color-hairline: #2a2317;
+	--color-hairline-strong: #453a27;
 
 	--color-text: #f0f7f0;
 	--color-text-secondary: #cadfcd;
 	--color-text-muted: #94ad99;
-	--color-text-inverse: #0e1a11;
+	--color-text-inverse: #17140e;
 
 	--color-brand: #4ade80;
 	--color-brand-hover: #86efac;
@@ -201,16 +206,16 @@
 	:root:not(.light) {
 		color-scheme: dark;
 
-		--color-bg: #0e1a11;
-		--color-bg-alt: #14251a;
-		--color-bg-inset: #1b3020;
-		--color-hairline: #1e3524;
-		--color-hairline-strong: #2f4a36;
+		--color-bg: #17140e;
+		--color-bg-alt: #211c13;
+		--color-bg-inset: #2d261a;
+		--color-hairline: #2a2317;
+		--color-hairline-strong: #453a27;
 
 		--color-text: #f0f7f0;
 		--color-text-secondary: #cadfcd;
 		--color-text-muted: #94ad99;
-		--color-text-inverse: #0e1a11;
+		--color-text-inverse: #17140e;
 
 		--color-brand: #4ade80;
 		--color-brand-hover: #86efac;
@@ -253,3 +258,24 @@
 		--color-neutral-border: #2f4a36;
 	}
 }
+
+/*
+ * 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 {
+	::selection {
+		background-color: color-mix(in oklab, var(--color-brand) 24%, transparent);
+	}
+
+	input,
+	textarea,
+	[contenteditable] {
+		caret-color: var(--color-brand);
+	}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nqmcreative/ui",
-	"version": "0.4.0",
-	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 71 components each, one shared behaviour core. No runtime dependencies.",
+	"version": "0.4.2",
+	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 70 components each, one shared behaviour core. No runtime dependencies.",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && svelte-kit sync && svelte-package && node scripts/strip-dist-tests.mjs && node scripts/generate-index.mjs && node scripts/generate-exports.mjs && node scripts/generate-registry.mjs && node scripts/generate-scoped-css.mjs && node scripts/generate-demos.mjs && publint",
@@ -42,11 +42,6 @@
 			"svelte": "./dist/core/tones.js",
 			"default": "./dist/core/tones.js"
 		},
-		"./core/locale": {
-			"types": "./dist/core/locale.svelte.d.ts",
-			"svelte": "./dist/core/locale.svelte.js",
-			"default": "./dist/core/locale.svelte.js"
-		},
 		"./core/date": {
 			"types": "./dist/core/date.d.ts",
 			"svelte": "./dist/core/date.js",
@@ -91,10 +86,6 @@
 			"types": "./dist/styles/matte/index.d.ts",
 			"svelte": "./dist/styles/matte/index.js"
 		},
-		"./matte/locale-provider": {
-			"types": "./dist/styles/matte/LocaleProvider.svelte.d.ts",
-			"svelte": "./dist/styles/matte/LocaleProvider.svelte"
-		},
 		"./matte/button": {
 			"types": "./dist/styles/matte/Button.svelte.d.ts",
 			"svelte": "./dist/styles/matte/Button.svelte"
@@ -381,10 +372,6 @@
 			"types": "./dist/styles/paper/index.d.ts",
 			"svelte": "./dist/styles/paper/index.js"
 		},
-		"./paper/locale-provider": {
-			"types": "./dist/styles/paper/LocaleProvider.svelte.d.ts",
-			"svelte": "./dist/styles/paper/LocaleProvider.svelte"
-		},
 		"./paper/button": {
 			"types": "./dist/styles/paper/Button.svelte.d.ts",
 			"svelte": "./dist/styles/paper/Button.svelte"
@@ -671,10 +658,6 @@
 			"types": "./dist/styles/sprout/index.d.ts",
 			"svelte": "./dist/styles/sprout/index.js"
 		},
-		"./sprout/locale-provider": {
-			"types": "./dist/styles/sprout/LocaleProvider.svelte.d.ts",
-			"svelte": "./dist/styles/sprout/LocaleProvider.svelte"
-		},
 		"./sprout/button": {
 			"types": "./dist/styles/sprout/Button.svelte.d.ts",
 			"svelte": "./dist/styles/sprout/Button.svelte"