@dorsk/tsumikit 0.81.0 → 0.82.0

package/README.md

@@ -26,6 +26,16 @@ hard-coded values · override by specificity, never by forking · props (incl.
 
 **Live demo:** https://dorskfr.github.io/tsumikit
 
+### Principles
+
+The design principles the kit serves, one markdown file each, live in
+[`principles/`](principles/README.md) and ship in the package
+(`node_modules/@dorsk/tsumikit/principles/`). Each gives the principle, its
+source, do / don't, what tsumikit provides for it, and a check to run on a
+screen. The index ends with a short checklist for designing a screen; point
+design reviews and coding agents at it. The showcase renders them at
+[`/principles`](https://dorskfr.github.io/tsumikit/principles).
+
 ## Develop
 
 ```bash
@@ -55,6 +65,18 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 <Button variant="primary" onclick={save}>Save</Button>
 ```
 
+### Start a new project
+
+Copy [`examples/starter`](examples/starter) and change `"@dorsk/tsumikit": "file:../.."` to a
+version. It is the baseline every app should start from: the kit stylesheet (tokens, themes,
+Inter), `AppShell`, a `ThemePicker`, a `Toaster`, an `+error.svelte` that says what happened in
+plain words (404 included), a list page with URL-driven filters (`Tabs href` + `urlState`),
+`LoadMore`, empty and filtered-empty states, delete with `toasts.undo()` instead of a confirm
+dialog, and `tsumikit-lint` on every commit via lefthook.
+
+Upgrading from 0.81 or older: [docs/MIGRATION-0.82.md](docs/MIGRATION-0.82.md) lists what looks
+different and how to revert each change.
+
 ## Theming
 
 - 31 themes ship (light, highcontrast, gruvboxlight, solarizedlight,
@@ -64,8 +86,15 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
   **dim** tier between the bright and dark extremes: stone, fog, sage (light)
   and slate, moss, espresso, zenburn (dark).
 - Every built-in clears WCAG AA on `bg`, `bg-elev` and `surface`: text 7:1,
-  muted 5.5:1, faint and every accent/status hue 4.5:1, `accent-ink` on
-  `accent` 4.5:1, and `--c-border-strong` (the outline of every control) 3:1.
+  muted 4.5:1, every accent/status hue 4.5:1, `accent-ink` on `accent` 4.5:1,
+  and `--c-border-strong` (the outline of every control) 3:1.
+- Three text levels: `--text` for values and titles, `--text-muted` for labels
+  and secondary text (4.5:1), `--text-faint` only for placeholders, disabled
+  and decorative text (3:1, and muted is at least 1.35x faint so the step is
+  visible).
+- The accent is never a status colour: every theme keeps `--c-accent` at least
+  OKLab deltaE 0.08 away from `--c-green`, `--c-amber` and `--c-red`, so the
+  primary action never reads as "success".
   `tests/theme-contrast.mjs` holds the floors; the test suite fails on any
   breach.
 - `<ThemePicker />` and `<FontScalePicker />` wire the stores to the UI. Theme
@@ -84,6 +113,17 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
   older version still loads — it pins its own slot — but a downgrade will not
   read the new blob and falls back to the default theme.
 
+### Typeface
+
+`styles/app.css` bundles [Inter](https://rsms.me/inter/) (variable, latin subset, OFL-1.1, licence in
+`styles/fonts/`) through `styles/font.css` and lists it first in `--font-sans`. Counts, stat values,
+eyebrow labels and shortcut hints (`--font-numeric`, `--font-label`) are sans by default; only code
+(`CodeBlock`, `Kbd`, `GitRef`, `Text variant="code"`) stays monospace.
+
+To opt out, import `tokens.css` / `themes.css` without `font.css`, or override `--font-sans`.
+Reading text is capped at `--measure` (68ch): `Prose` always, `Text` with `measure`; set
+`--measure: none` on a container to lift it.
+
 ### Stylesheets
 
 `@dorsk/tsumikit/styles/app.css` is a shell over five files you can import
@@ -837,6 +877,144 @@ step; override any string through `messages` (defaults in
 </SortableList>
 ```
 
+## Patterns
+
+### Calm loading
+
+Every busy indicator in the kit waits 200 ms before appearing and then stays at least 500 ms, so a 60 ms save never flashes a spinner and a slow one never flickers. `Button loading` and `EmptyState loading` do this internally; `aria-busy` and the click block still follow `loading` at once, only the visual is calmed. Tune or disable per instance with `loadingDelay` / `loadingMin` (`0` = immediate). For your own indicators:
+
+```svelte
+<script>
+  import { pending } from '@dorsk/tsumikit';
+  let saving = $state(false);
+  const p = pending(() => saving, { delay: 200, min: 500 });
+</script>
+{#if p.visible}<Spinner />{/if}
+```
+
+### Undo over confirm
+
+Prefer an optimistic change with an Undo toast to a confirmation dialog when success is likely. `toasts.undo` applies at once, offers Undo while the toast is visible, commits when it goes away (timeout, click, or `pagehide`), and reverts with a plain-words error toast if the commit fails:
+
+```ts
+toasts.undo({
+  message: 'Message deleted',
+  apply: () => (items = items.filter((m) => m.id !== id)),
+  revert: () => (items = [...items, removed]),
+  commit: () => api.delete(id),
+});
+```
+
+Keep `ConfirmModal` for irreversible or bulk actions (purging data, deleting many rows, anything that cannot be reverted locally).
+
+### URL state
+
+Put tab, filter and page state in the URL so it survives a refresh and can be shared. `urlState` is a framework-neutral rune for one search param; Tabs, SegmentedControl and Pagination accept `href` and then render real links (middle-click opens in a new tab) with `aria-current`.
+
+```svelte
+<script lang="ts">
+	import { Tabs, Pagination, urlState } from '@dorsk/tsumikit';
+	const tab = urlState('tab', { default: 'overview' });
+	const page = urlState('page', { default: 1, parse: Number, serialize: String, push: true });
+</script>
+
+<Tabs {tabs} bind:value={tab.value} href={(id) => tab.href(id)} />
+<Pagination bind:page={page.value} pageCount={12} href={(p) => page.href(p)} />
+```
+
+`urlState(key, { default, parse?, serialize?, push? })` reads the param (or `default`), writes with `history.replaceState` (`pushState` when `push`), follows back/forward, and holds `default` without a `window` (SSR-safe). A value that serializes like the default removes the param. `href(value)` builds the link for the current page with that value. Per-item `href` on `TabItem`/`SegmentOption` overrides the function. `isModifiedClick(e)` is exported for custom links that must leave ctrl/meta/shift/middle clicks to the browser.
+
+### Backdrop
+
+`Backdrop` is the page-level hero: a full-bleed `Artwork` (so a missing or failed
+`src` shows the seeded placeholder and the picture fades in lazily) that melts into
+`--bg` along its bottom edge, with `children` sitting on a scrim mixed from `--bg`
+so titles and actions read over any picture. `height` takes any CSS length
+(default `min(45svh, 22rem)`), `fade="none"` keeps a hard edge, `blur` softens the
+picture, `dim` tints it toward `--bg`. `seed`, `fallback`, `icon`, `fit`, `srcset`,
+`sizes`, `onerror` are passed straight to Artwork; everything else (incl. `aria-*`)
+spreads onto the root. Under `prefers-reduced-transparency` the scrim becomes
+opaque and the blur is dropped; `prefers-contrast: more` also uses the opaque scrim.
+
+```svelte
+<Backdrop as="header" src={album.cover} alt="" seed={album.title} height="18rem">
+  <Heading level={1}>{album.title}</Heading>
+  <Text tone="muted">{album.artist}</Text>
+  <Button variant="primary">Play</Button>
+</Backdrop>
+```
+
+### Breakpoints
+
+One list for every media query: `sm` 40rem (640px), `md` 48rem (768px), `lg`
+64rem (1024px); max-width queries use the complement (`39.999rem`,
+`47.999rem`, `63.999rem`). CSS custom properties cannot drive `@media`, so the
+list is exported for JS (`breakpoints`, `minWidth(bp)`, `maxWidth(bp)`) with a
+reactive, SSR-safe `mq.sm` / `mq.md` / `mq.lg` and `media(query)`.
+`tsumikit-lint` enforces the list in CSS. Inside a pane, prefer container
+queries (below).
+
+## Guardrails
+
+### Design lint (`tsumikit-lint`)
+
+The package ships a dependency-free CLI that flags drift from the kit's rules in your `.svelte` and `.css` files (it only needs node and the `svelte` peer).
+
+```sh
+npx tsumikit-lint            # lints ./src
+npx tsumikit-lint src lib/styles/app.css
+npx tsumikit-lint --json src # CI-friendly
+npx tsumikit-lint --rule spacing-scale,breakpoints src
+npx tsumikit-lint --disable no-raw-control src
+```
+
+Output is `file:line:col  rule  message` plus a per-rule summary; exit code is 1 when anything is reported, 2 on usage errors.
+
+| Rule | Flags |
+| --- | --- |
+| `no-raw-color` | hex / rgb / hsl literals outside `:root` / `[data-theme]` blocks (custom-property definitions and `var()`-composed colors are fine) |
+| `spacing-scale` | px / rem in padding, margin, gap, inset and top/right/bottom/left that is not a `--sp-*` token; `0` and `1px` hairlines allowed; suggests the token |
+| `no-raw-control` | raw `<button>`, `<input>`, `<select>`, `<textarea>` instead of the atoms |
+| `one-primary` | more than one `variant="primary"` that can render at the same time (if/else branches are exclusive, snippets are separate) |
+| `no-raw-font` | `font-family` other than `var(--font-*)`; `--font-mono` outside code-ish elements (use `--font-numeric` / `--font-label`) |
+| `breakpoints` | media-query widths other than 40rem/640px, 48rem/768px, 64rem/1024px (and their max-width complements like 39.999rem / 639.98px) |
+| `motion` | `transition` / `@keyframes` on properties other than transform, opacity, color, background-color, box-shadow, filter (and other paint-only properties); `transition: all` |
+| `img-alt` | `<img>` without `alt` |
+
+Suppress a single line with a comment on the line above (or at the end of the line):
+
+```css
+/* tsumikit-lint-ignore spacing-scale */
+padding: 3px;
+```
+```svelte
+<!-- tsumikit-lint-ignore no-raw-control -->
+<button type="button" class="chip">…</button>
+```
+
+Omit the rule id to ignore every rule on that line. In app code, read the breakpoint list from `breakpoints` in the main entry.
+
+lefthook:
+
+```yaml
+pre-commit:
+  commands:
+    tsumikit-lint:
+      glob: '*.{svelte,css}'
+      run: npx tsumikit-lint {staged_files}
+```
+
+### Dev-mode design warnings
+
+In development, `AppShell` starts a DOM audit (`src/lib/dev-audit.ts`) that console.warns once per issue, prefixed `[tsumikit]`, with the offending element:
+
+- more than one visible primary `Button` in the same `main` or dialog (modal and page are counted separately);
+- `Button`/`IconButton` without an accessible name;
+- on coarse pointers, interactive elements whose hit box is under `--touch-target` (kit controls are accepted at `--touch-target-compact`; controls carrying the kit's touch slab are not flagged; opt out per element with `.hit-compact`);
+- text over an `Artwork`/`img` without a `Scrim` (or any opaque background).
+
+Without `AppShell`: `import { startDesignAudit } from '@dorsk/tsumikit/dev-audit'; startDesignAudit();`. The audit is guarded by `import.meta.env.DEV`, so production bundles contain none of it.
+
 ## Container queries
 
 AppShell's `main` and `sidebar` are query containers (`container-name: main` /

package/dist/breakpoints.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The kit's breakpoint contract, in rem so zoom and large-text settings move the
+ * switch points with the type. Must match lint/breakpoints.mjs and every
+ * width `@media` in src/lib.
+ */
+export declare const breakpoints: {
+    readonly sm: 40;
+    readonly md: 48;
+    readonly lg: 64;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export declare const breakpointsPx: Record<Breakpoint, number>;
+export declare function minWidth(bp: Breakpoint): string;
+/** 0.001rem below `minWidth` so the two never both match at the edge. */
+export declare function maxWidth(bp: Breakpoint): string;

package/dist/breakpoints.js

@@ -0,0 +1,14 @@
+/**
+ * The kit's breakpoint contract, in rem so zoom and large-text settings move the
+ * switch points with the type. Must match lint/breakpoints.mjs and every
+ * width `@media` in src/lib.
+ */
+export const breakpoints = { sm: 40, md: 48, lg: 64 };
+export const breakpointsPx = { sm: 640, md: 768, lg: 1024 };
+export function minWidth(bp) {
+    return `(min-width: ${breakpoints[bp]}rem)`;
+}
+/** 0.001rem below `minWidth` so the two never both match at the edge. */
+export function maxWidth(bp) {
+    return `(max-width: ${(breakpoints[bp] - 0.001).toFixed(3)}rem)`;
+}

package/dist/components/atoms/Badge.svelte

@@ -231,6 +231,7 @@
 	}
 	.mono {
 		font-family: var(--font-numeric);
+		font-variant-numeric: tabular-nums;
 		font-weight: var(--badge-fw, var(--fw-normal));
 	}
 	.uppercase {

package/dist/components/atoms/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Icon, { isIconName } from './Icon.svelte';
 	import { formatCount, hasCount } from '../../count';
+	import { pending } from '../../pending.svelte';
 	import { playSound } from '../../sound';
 	import type { ControlSize } from '../../size';
 	import { canonicalTone, type Tone } from '../../tone';
@@ -65,6 +66,11 @@
 		// morphing into a centred spinner at constant width, or a progress fill
 		// pouring in from the left (driven by `progress`).
 		loadingStyle?: 'spinner' | 'morph' | 'fill';
+		// Calm loading: the visual waits `loadingDelay` ms and then stays at least
+		// `loadingMin` ms; aria-busy and the click block follow `loading` at once.
+		// 0 for both shows and hides with `loading`.
+		loadingDelay?: number;
+		loadingMin?: number;
 		// 0–1 for `loadingStyle="fill"`; omit for an indeterminate idle fill.
 		progress?: number;
 		// Text beside the check in the `'done'` state; defaults to the children.
@@ -113,6 +119,8 @@
 		hitArea = 'auto',
 		loading = false,
 		loadingStyle = 'spinner',
+		loadingDelay,
+		loadingMin,
 		progress,
 		doneLabel,
 		count,
@@ -136,6 +144,8 @@
 	// so an inactive link drops `href` (no focus, no keyboard activation).
 	const tag = $derived(href !== undefined || as === 'a' ? 'a' : 'button');
 	const busy = $derived(loading === true);
+	const spin = pending(() => busy, () => ({ delay: loadingDelay, min: loadingMin }));
+	const spinning = $derived(spin.visible);
 	const done = $derived(loading === 'done');
 	const layered = $derived(loadingStyle !== 'spinner');
 	const inactive = $derived(disabled || busy);
@@ -224,7 +234,8 @@
 	class:btn-tone-danger={t === 'danger'}
 	class:btn-icon-inline={iconInline}
 	class:hover-danger={hoverDanger}
-	class:loading={busy}
+	class:loading={spinning}
+	class:btn-busy={busy}
 	class:btn-done={done}
 	class:btn-morph={loadingStyle === 'morph'}
 	class:btn-fill={loadingStyle === 'fill'}
@@ -234,7 +245,7 @@
 	onclick={handleClick}
 >
 	{#if loadingStyle === 'fill'}<span class="btn-fill-bar" aria-hidden="true"></span>{/if}
-	{#if busy && !layered}<span class="btn-spinner" aria-hidden="true"></span>{:else if done && !layered}<span class="btn-check" aria-hidden="true"><Icon name="check" /></span>{/if}
+	{#if spinning && !layered}<span class="btn-spinner" aria-hidden="true"></span>{:else if done && !layered}<span class="btn-check" aria-hidden="true"><Icon name="check" /></span>{/if}
 	{#if glyph !== undefined}
 		<span class="btn-glyph" aria-hidden="true">
 			{#if typeof glyph !== 'string'}{@render glyph()}{:else if isIconName(glyph)}<Icon name={glyph} />{:else}{glyph}{/if}
@@ -542,7 +553,7 @@
 
 	/* Label collapse: `[data-label]` children disappear below the threshold and
 	   the button falls back to icon-only padding. */
-	@media (max-width: 40rem) {
+	@media (max-width: 39.999rem) {
 		.btn-collapse-mobile :global([data-label]) {
 			display: none;
 		}
@@ -697,10 +708,10 @@
 
 	/* Loading: keep full opacity (it's busy, not disabled-looking) + a wait cursor,
 	   and show a spinner in the current text color. */
-	.btn.loading {
+	.btn.btn-busy {
 		cursor: wait;
 	}
-	.btn.loading:disabled {
+	.btn.btn-busy:disabled {
 		opacity: 1;
 	}
 	.btn-spinner {

package/dist/components/atoms/Button.svelte.d.ts

@@ -25,6 +25,8 @@ type ButtonProps = HTMLButtonAttributes & {
     hitArea?: 'auto' | 'compact';
     loading?: boolean | 'done';
     loadingStyle?: 'spinner' | 'morph' | 'fill';
+    loadingDelay?: number;
+    loadingMin?: number;
     progress?: number;
     doneLabel?: string;
     count?: number;

package/dist/components/atoms/Input.svelte

@@ -260,6 +260,7 @@
 	}
 	.mono {
 		font-family: var(--font-numeric);
+		font-variant-numeric: tabular-nums;
 	}
 
 	.input-wrap {

package/dist/components/atoms/Slider.svelte

@@ -158,7 +158,7 @@
 		flex: 1 0 100%;
 		height: 1.2em;
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.mark {
 		position: absolute;

package/dist/components/atoms/Text.svelte

@@ -32,8 +32,8 @@
 		wrap?: 'normal' | 'anywhere' | 'balance';
 		uppercase?: boolean;
 		leading?: 'tight' | 'normal' | 'none';
-		// CSS max-width for the line measure, e.g. "60ch".
-		measure?: string;
+		// Line measure: `true` caps at --measure (68ch), a string sets a CSS max-width ("60ch").
+		measure?: string | boolean;
 		grow?: boolean;
 		// false pins the size to its unscaled px value, ignoring --fs-scale.
 		scale?: boolean;
@@ -67,7 +67,7 @@
 	const toneClass = $derived(
 		tone === 'neutral' ? 'default' : canonicalTone(tone) === 'ok' ? 'success' : canonicalTone(tone)
 	);
-	const styleAttr = $derived(measure ? `max-width: ${measure}` : undefined);
+	const styleAttr = $derived(measure ? `max-width: ${measure === true ? 'var(--measure)' : measure}` : undefined);
 </script>
 
 <svelte:element
@@ -111,7 +111,7 @@
 	}
 	.v-caption {
 		font-size: var(--txt-size, var(--fs-xs));
-		color: var(--txt-fg, var(--text-faint));
+		color: var(--txt-fg, var(--text-muted));
 	}
 	.v-code {
 		font-family: var(--font-mono);

package/dist/components/atoms/Text.svelte.d.ts

@@ -17,7 +17,7 @@ type Own = {
     wrap?: 'normal' | 'anywhere' | 'balance';
     uppercase?: boolean;
     leading?: 'tight' | 'normal' | 'none';
-    measure?: string;
+    measure?: string | boolean;
     grow?: boolean;
     scale?: boolean;
     block?: boolean;

package/dist/components/layouts/AppShell.svelte

@@ -140,6 +140,20 @@
 		return () => el.removeEventListener('click', onSidebarClick);
 	});
 
+	if (import.meta.env.DEV && browser) {
+		$effect(() => {
+			let stop: (() => void) | undefined;
+			let gone = false;
+			import('../../dev-audit').then((m) => {
+				if (!gone) stop = m.startDesignAudit();
+			});
+			return () => {
+				gone = true;
+				stop?.();
+			};
+		});
+	}
+
 	// Lock body scroll while the mobile drawer is open.
 	$effect(() => {
 		if (!browser) return;

package/dist/components/layouts/Backdrop.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	// Full-bleed hero image (an Artwork, so the seeded placeholder and lazy fade-in
+	// come for free) that fades into --bg at the bottom. Children sit on a scrim
+	// mixed from --bg so text stays readable over any picture.
+	import type { Snippet } from 'svelte';
+	import Artwork from '../atoms/Artwork.svelte';
+	import type { IconName } from '../atoms/Icon.svelte';
+
+	type Own = {
+		as?: 'div' | 'header' | 'section';
+		src?: string | null;
+		srcset?: string;
+		sizes?: string;
+		alt: string;
+		/** Drives the placeholder gradient hue and initials. Defaults to `alt`. */
+		seed?: string;
+		/** Any CSS length. Defaults to a viewport-relative height capped by --backdrop-h. */
+		height?: string;
+		/** Gradient from the image into --bg along the bottom edge. */
+		fade?: 'bottom' | 'none';
+		/** Soften the picture behind the content. */
+		blur?: boolean;
+		/** Darken (tint toward --bg) the whole picture, not just the scrim. */
+		dim?: boolean;
+		fit?: 'cover' | 'contain';
+		fallback?: 'initials' | 'icon' | 'none';
+		icon?: IconName;
+		onerror?: () => void;
+		class?: string;
+		children?: Snippet;
+	};
+	let {
+		as = 'div',
+		src,
+		srcset,
+		sizes,
+		alt,
+		seed,
+		height,
+		fade = 'bottom',
+		blur = false,
+		dim = false,
+		fit = 'cover',
+		fallback = 'initials',
+		icon = 'image',
+		onerror,
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
+</script>
+
+<svelte:element
+	this={as}
+	data-tsu="Backdrop"
+	class="backdrop fade-{fade} {klass}"
+	class:blur
+	class:dim
+	style:--backdrop-h={height}
+	{...rest}
+>
+	<div class="media">
+		<Artwork {src} {srcset} {sizes} {alt} {seed} {fit} {fallback} {icon} {onerror} aspect="auto" radius="sm" />
+	</div>
+	{#if children}
+		<div class="content">{@render children()}</div>
+	{/if}
+</svelte:element>
+
+<style>
+	.backdrop {
+		--backdrop-scrim: 86%;
+		--backdrop-fade: 60%;
+		--backdrop-blur: 12px;
+		--backdrop-dim: 35%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		min-height: var(--backdrop-h, min(45svh, 22rem));
+		overflow: hidden;
+		background: var(--bg);
+		color: var(--text);
+	}
+	.media {
+		position: absolute;
+		inset: 0;
+	}
+	.media > :global([data-tsu='Artwork']) {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		border: 0;
+		border-radius: 0;
+	}
+	.blur .media > :global([data-tsu='Artwork']) {
+		filter: blur(var(--backdrop-blur));
+		scale: 1.08;
+	}
+	.media::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		background-image: linear-gradient(
+			to bottom,
+			transparent calc(100% - var(--backdrop-fade)),
+			var(--bg) 100%
+		);
+	}
+	.fade-none .media::after {
+		background-image: none;
+	}
+	.dim .media::after {
+		background-color: color-mix(in srgb, var(--bg) var(--backdrop-dim), transparent);
+	}
+	.content {
+		position: relative;
+		padding: var(--sp-6) max(var(--sp-4), var(--safe-left)) var(--sp-4) max(var(--sp-4), var(--safe-right));
+		background: color-mix(in srgb, var(--bg) var(--backdrop-scrim), transparent);
+	}
+	/* Feather the scrim upward so it never shows a hard edge over the picture. */
+	.content::before {
+		content: '';
+		position: absolute;
+		inset: auto 0 100% 0;
+		height: var(--sp-12);
+		pointer-events: none;
+		background: linear-gradient(
+			to top,
+			color-mix(in srgb, var(--bg) var(--backdrop-scrim), transparent),
+			transparent
+		);
+	}
+	@media (prefers-reduced-transparency: reduce) {
+		.backdrop {
+			--backdrop-scrim: 100%;
+		}
+		.blur .media > :global([data-tsu='Artwork']) {
+			filter: none;
+			scale: 1;
+		}
+	}
+	@media (prefers-contrast: more) {
+		.backdrop {
+			--backdrop-scrim: 100%;
+			--backdrop-dim: 60%;
+		}
+	}
+</style>

package/dist/components/layouts/Backdrop.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { IconName } from '../atoms/Icon.svelte';
+type Own = {
+    as?: 'div' | 'header' | 'section';
+    src?: string | null;
+    srcset?: string;
+    sizes?: string;
+    alt: string;
+    /** Drives the placeholder gradient hue and initials. Defaults to `alt`. */
+    seed?: string;
+    /** Any CSS length. Defaults to a viewport-relative height capped by --backdrop-h. */
+    height?: string;
+    /** Gradient from the image into --bg along the bottom edge. */
+    fade?: 'bottom' | 'none';
+    /** Soften the picture behind the content. */
+    blur?: boolean;
+    /** Darken (tint toward --bg) the whole picture, not just the scrim. */
+    dim?: boolean;
+    fit?: 'cover' | 'contain';
+    fallback?: 'initials' | 'icon' | 'none';
+    icon?: IconName;
+    onerror?: () => void;
+    class?: string;
+    children?: Snippet;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
+declare const Backdrop: import("svelte").Component<$$ComponentProps, {}, "">;
+type Backdrop = ReturnType<typeof Backdrop>;
+export default Backdrop;

package/dist/components/layouts/NavSection.svelte

@@ -52,7 +52,7 @@
 	.nav-section-label {
 		padding: 0 var(--sp-3);
 		margin-bottom: var(--sp-1);
-		color: var(--text-faint);
+		color: var(--text-muted);
 		font-family: var(--font-label);
 		font-size: var(--fs-xs);
 		font-weight: var(--fw-semibold);

package/dist/components/molecules/AttachmentList.svelte

@@ -202,7 +202,7 @@
 	}
 	.size {
 		margin-inline-start: var(--sp-1);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	li {
 		display: flex;

package/dist/components/molecules/CapBar.svelte

@@ -406,7 +406,7 @@
 	.caption {
 		grid-column: 2 / 3;
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.cap-bar:not(:has(.label)) .caption {
 		grid-column: 1 / 3;

package/dist/components/molecules/Composer.svelte

@@ -253,6 +253,6 @@
 	}
 	.hint {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 </style>

package/dist/components/molecules/Dropzone.svelte

@@ -257,6 +257,6 @@
 	}
 	.dz-hint {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 </style>