@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/components/molecules/Combobox.svelte

@@ -281,11 +281,11 @@
 		max-height: var(--cb-max-height, min(16rem, 40vh));
 		overflow-y: auto;
 		padding: var(--sp-1);
-		background: var(--cb-bg, var(--bg-elevated));
+		background: var(--cb-bg, var(--raised-fill));
 		color: var(--text);
-		border: 1px solid var(--cb-border, var(--border-strong));
+		border: var(--edge-width) solid var(--cb-border, var(--raised-edge));
 		border-radius: var(--cb-radius, var(--r-md));
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		transform-origin: var(--tsu-origin, top left);
 		opacity: 1;
 		scale: 1;

package/dist/components/molecules/CopyButton.svelte

@@ -39,6 +39,7 @@
 
 	const labelShown = $derived(showLabel ?? box === undefined);
 	let copied = $state(false);
+	let run = $state(0);
 	let status = $state('');
 	let timer: ReturnType<typeof setTimeout> | undefined;
 
@@ -46,6 +47,7 @@
 		const ok = await copyToClipboard(text);
 		playSound(ok ? 'success' : 'error', sound);
 		copied = ok;
+		if (ok) run++;
 		status = ok ? copiedLabel : 'Copy failed';
 		clearTimeout(timer);
 		timer = setTimeout(() => {
@@ -63,26 +65,33 @@
 	class="copy-btn {labelShown && box !== undefined ? 'copy-labelled' : ''} {klass}"
 	sound={false}
 	onclick={copy}
+	data-copied={copied || undefined}
 	aria-label={copied ? copiedLabel : label}
 	title={label}
 >
-	<span class="glyphs" class:copied aria-hidden="true">
+	<span class="glyphs" class:copied class:tinted={variant === 'ghost' || variant === 'default'} aria-hidden="true">
 		<span class="glyph copy"><Icon name="copy" /></span>
 		<span class="glyph check"><Icon name="check" /></span>
+		<svg class="glyph tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+			<path d="M4.5 12.5l5 5L19.5 7" pathLength="1" />
+		</svg>
+		{#key run}<span class="sparks"></span>{/key}
 	</span>
-	{#if labelShown}<span>{copied ? copiedLabel : label}</span>{/if}
+	{#if labelShown}
+		<span class="words" class:copied aria-hidden="true"><span class="word idle">{label}</span><span class="word done">{copiedLabel}</span></span>
+	{/if}
 </Button>
 <span class="sr-only" role="status" aria-live="polite">{status}</span>
 
 <style>
-	/* Both glyphs share one grid cell so the swap never changes the width. The
-	   check springs in (the kit's one bounce: a rare confirmation); the copy
-	   glyph fades out fast and back in over the base duration on revert. */
+	/* Both glyphs share one grid cell and both words another, so the swap never
+	   changes the width. */
 	:global(.copy-btn.btn-box.copy-labelled) {
 		width: auto;
 		padding-inline: var(--sp-2);
 	}
 	.glyphs {
+		position: relative;
 		display: inline-grid;
 		place-items: center;
 	}
@@ -111,4 +120,136 @@
 			opacity var(--dur-spring-bounce) ease,
 			scale var(--dur-spring-bounce) var(--ease-spring-bounce);
 	}
+	.tick,
+	.sparks {
+		display: none;
+	}
+	.words {
+		display: inline-grid;
+		overflow: hidden;
+		text-align: start;
+	}
+	.word {
+		grid-area: 1 / 1;
+	}
+	.done,
+	.copied .idle {
+		opacity: 0;
+	}
+	.copied .done {
+		opacity: 1;
+	}
+
+	/* Morph burst: the check springs in on a turn inside a ring of eight sparks. */
+	.glyphs:not(:global([data-fx-copy]:not([data-fx-copy='burst'])) *),
+	:global([data-fx-copy='burst']) .glyphs:not(:global([data-fx-copy='burst'] [data-fx-copy]:not([data-fx-copy='burst'])) *) {
+		& .check {
+			scale: 0.4;
+			rotate: 60deg;
+			transition-property: opacity, scale, rotate;
+			transition-duration: var(--dur-exit-fast);
+			transition-timing-function: ease;
+		}
+		&.copied .check {
+			scale: 1;
+			rotate: 0deg;
+			transition-duration: var(--dur-fast), var(--dur-spring), var(--dur-spring);
+			transition-delay: calc(var(--dur-exit-fast) / 2);
+			transition-timing-function: ease, var(--ease-spring-bounce), var(--ease-out);
+		}
+		& .sparks {
+			--spark-a: color-mix(in srgb, var(--ok) 85%, transparent);
+			--spark-b: color-mix(in srgb, var(--accent) 85%, transparent);
+			position: absolute;
+			inset: -9px;
+			display: block;
+			pointer-events: none;
+			background:
+				radial-gradient(circle at 50% 4%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 83% 17%, var(--spark-b) 1.3px, transparent 1.9px),
+				radial-gradient(circle at 96% 50%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 83% 83%, var(--spark-b) 1.3px, transparent 1.9px),
+				radial-gradient(circle at 50% 96%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 17% 83%, var(--spark-b) 1.3px, transparent 1.9px),
+				radial-gradient(circle at 4% 50%, var(--spark-a) 1.6px, transparent 2.2px),
+				radial-gradient(circle at 17% 17%, var(--spark-b) 1.3px, transparent 1.9px);
+			opacity: 0;
+		}
+		&.copied .sparks {
+			animation: copy-burst calc(var(--dur-slow) + var(--dur-exit-fast)) var(--ease-out);
+		}
+	}
+	@keyframes copy-burst {
+		0% {
+			opacity: 0;
+			scale: 0.35;
+			rotate: -20deg;
+		}
+		30% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			scale: 1.15;
+			rotate: 0deg;
+		}
+	}
+
+	/* Tick and slide: the tick draws itself while the label rolls up into its
+	   copied form. */
+	:global([data-fx-copy='tick']) .glyphs:not(:global([data-fx-copy='tick'] [data-fx-copy]:not([data-fx-copy='tick'])) *) {
+		& .check {
+			display: none;
+		}
+		& .tick {
+			display: block;
+			width: 1em;
+			height: 1em;
+			opacity: 0;
+			transition: opacity var(--dur-exit-fast) ease var(--dur-instant);
+		}
+		&.copied .tick {
+			opacity: 1;
+			transition-duration: var(--dur-fast);
+		}
+		& .tick path {
+			stroke-dasharray: 1;
+			stroke-dashoffset: 1;
+			transition: stroke-dashoffset var(--dur-instant) ease var(--dur-exit-fast);
+		}
+		&.copied .tick path {
+			stroke-dashoffset: 0;
+			transition: stroke-dashoffset var(--dur-slow) var(--ease-out) calc(var(--dur-fast) / 2);
+		}
+		& .copy {
+			transition-property: opacity, scale;
+			transition-duration: var(--dur-base), var(--dur-spring);
+			transition-timing-function: ease, var(--ease-spring);
+		}
+		&.copied .copy {
+			scale: 0.6;
+			transition-duration: var(--dur-exit-fast), var(--dur-exit);
+		}
+	}
+	:global([data-fx-copy='tick']) .words:not(:global([data-fx-copy='tick'] [data-fx-copy]:not([data-fx-copy='tick'])) *) {
+		& .word {
+			transition-property: opacity, translate;
+			transition-duration: var(--dur-base), var(--dur-spring);
+			transition-timing-function: ease, var(--ease-spring);
+		}
+		& .done {
+			translate: 0 100%;
+		}
+		&.copied .idle {
+			translate: 0 -100%;
+			transition-duration: var(--dur-exit-fast), var(--dur-exit);
+		}
+		&.copied .done {
+			translate: 0 0;
+			transition-delay: calc(var(--dur-exit-fast) / 2);
+		}
+	}
+	.tinted.copied :is(.check, .tick) {
+		color: var(--ok);
+	}
 </style>

package/dist/components/molecules/Drawer.svelte

@@ -215,7 +215,7 @@
 			'foot';
 		width: 100%;
 		height: 100%;
-		background: var(--bg-elevated);
+		background: var(--overlay-fill);
 		will-change: translate;
 		padding-top: var(--safe-top);
 		padding-bottom: var(--safe-bottom);
@@ -242,7 +242,7 @@
 		align-items: center;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-icon {
 		display: inline-flex;
@@ -269,7 +269,7 @@
 		display: flex;
 		gap: var(--sp-1);
 		padding: var(--sp-2);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 		overflow-x: auto;
 		scrollbar-width: thin;
 	}
@@ -290,7 +290,7 @@
 		justify-content: flex-end;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 
 	@media (min-width: 48rem) {
@@ -298,8 +298,8 @@
 			width: min(var(--drawer-w), 100%);
 			padding-top: 0;
 			padding-bottom: 0;
-			border-left: 1px solid var(--border-strong);
-			box-shadow: var(--shadow-lg);
+			border-left: var(--edge-width) solid var(--border-strong);
+			box-shadow: var(--overlay-shadow);
 			grid-template-columns: minmax(0, 1fr);
 			grid-template-rows: auto minmax(0, 1fr) auto;
 			grid-template-areas:
@@ -309,7 +309,7 @@
 		}
 		.drawer[data-side='left'] .panel {
 			border-left: 0;
-			border-right: 1px solid var(--border-strong);
+			border-right: var(--edge-width) solid var(--border-strong);
 		}
 		.panel.has-nav {
 			grid-template-columns: var(--drawer-nav-w) minmax(0, 1fr);
@@ -325,7 +325,7 @@
 			overflow-x: hidden;
 			overflow-y: auto;
 			border-bottom: 0;
-			border-right: 1px solid var(--border);
+			border-right: var(--edge-width) solid var(--surface-edge);
 		}
 		.panel-nav-mobile {
 			display: none;

package/dist/components/molecules/EmojiPicker.svelte

@@ -223,7 +223,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: var(--sp-1);
-		border: 1px solid transparent;
+		border: var(--edge-width) solid transparent;
 		border-radius: var(--r-sm);
 		background: none;
 		color: inherit;

package/dist/components/molecules/Field.svelte

@@ -59,7 +59,7 @@
 
 <div class="field {klass}" class:field-grow={grow} class:field-no-shrink={!shrink} class:field-inline={layout === 'inline'} data-tsu="Field">
 	{#if label}
-		<label class="label" for={forId} style:width={labelWidth}>{label}</label>
+		<label class="label" for={forId} style:width={labelWidth}><span class="label-text">{label}</span></label>
 	{/if}
 	{@render children?.()}
 	{#if hint}
@@ -103,4 +103,58 @@
 		font-size: var(--fs-xs);
 		color: var(--danger);
 	}
+
+	/* Spring label: over a md text field the label rests inside the control and
+	   springs into its top edge on focus or once filled. */
+	:global([data-fx-focus='label']) .field:not(.field-inline):not(:global([data-fx-focus='label'] [data-fx-focus]:not([data-fx-focus='label'])) *):has(> .label + :global(input.input:not(.input-sm, .input-lg, .grouped)), > .label + :global(.textarea-wrap:not(.grouped) > .textarea:not(.textarea-sm, .textarea-lg))) {
+		--float-h: 3.25rem;
+		position: relative;
+		& > .label {
+			position: absolute;
+			inset-block-start: 0;
+			inset-inline-start: 0;
+			z-index: 1;
+			display: flex;
+			align-items: center;
+			max-width: 100%;
+			height: var(--float-h);
+			padding-inline: calc(var(--control-px-md) + var(--edge-width));
+			font-size: var(--control-fs-md);
+			pointer-events: none;
+		}
+		& .label-text {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			line-height: var(--lh-none);
+			transform-origin: left center;
+			transition-property: translate, scale, color;
+			transition-duration: var(--dur-spring), var(--dur-spring), var(--dur-fast);
+			transition-timing-function: var(--ease-spring-bounce), var(--ease-spring-bounce), ease;
+		}
+		& :global(:is(.input, .textarea)) {
+			min-height: var(--float-h);
+			padding-top: 1.35rem;
+			padding-bottom: 0.4rem;
+		}
+		& :global(:is(.input, .textarea):not(:focus)::placeholder) {
+			color: transparent;
+		}
+		& :global(:is(.input, .textarea):focus) {
+			animation: none;
+			box-shadow:
+				var(--control-shadow),
+				inset 0 -1px 0 var(--focus-tint);
+		}
+		&:has(:global(:is(.input, .textarea):is(:focus, :not(:placeholder-shown), :autofill))) .label-text {
+			translate: 0 -0.7rem;
+			scale: 0.78;
+		}
+		&:has(:global(:is(.input, .textarea):focus)) > .label {
+			color: var(--accent);
+		}
+		&:has(:global([aria-invalid='true'])) > .label {
+			color: var(--danger);
+		}
+	}
 </style>

package/dist/components/molecules/FileButton.svelte

@@ -107,9 +107,12 @@
 		gap: var(--sp-2);
 		padding: var(--sp-2) var(--btn-px-md);
 		min-height: var(--control-height-default);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--btn-edge);
 		border-radius: var(--r-md);
-		background: var(--surface);
+		background: var(--btn-fill);
+		--file-shadow-rest: var(--btn-shadow);
+		--file-shadow-lift: var(--btn-shadow-hover);
+		box-shadow: var(--file-shadow-rest);
 		color: var(--text);
 		font-weight: var(--fw-medium);
 		font-size: var(--control-fs-md);
@@ -119,16 +122,20 @@
 		cursor: pointer;
 		user-select: none;
 		--icon-size: var(--control-icon-md);
-		--file-scale-dur: var(--dur-fast);
+		--file-scale-dur: var(--dur-release);
+		--file-scale-ease: var(--ease-spring-bounce);
 		transition:
 			background var(--dur-fast) ease,
 			border-color var(--dur-fast) ease,
+			box-shadow var(--dur-fast) ease,
 			color var(--dur-fast) ease,
 			opacity var(--dur-fast) ease,
-			scale var(--file-scale-dur) var(--ease-out);
+			translate var(--dur-fast) var(--ease-out),
+			scale var(--file-scale-dur) var(--file-scale-ease);
 	}
 	.file-btn:active:not(.disabled) {
 		--file-scale-dur: var(--dur-press);
+		--file-scale-ease: var(--ease-out);
 		scale: var(--press-scale);
 	}
 	.file-btn.icon-only:active:not(.disabled),
@@ -197,20 +204,25 @@
 		font-size: var(--icon-xl);
 	}
 	.file-btn.primary {
-		background: var(--accent);
-		border-color: var(--accent);
+		background: var(--btn-primary-fill);
+		border-color: var(--btn-primary-edge);
+		--file-shadow-rest: var(--btn-primary-shadow);
+		--file-shadow-lift: var(--btn-primary-shadow-hover);
 		color: var(--text-on-accent);
 		font-weight: var(--fw-semibold);
 	}
 	.file-btn.ghost {
 		background: transparent;
 		border-color: transparent;
+		--file-shadow-rest: none;
+		--file-shadow-lift: none;
 	}
 	/* The hidden input keeps focusability (sr-only, not display:none), so mirror
 	   its focus onto the label for a visible ring. */
 	.file-btn:focus-within {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--file-shadow-rest), var(--focus-glow);
 	}
 	.file-btn.disabled {
 		opacity: var(--disabled-opacity);
@@ -219,6 +231,8 @@
 	@media (hover: hover) and (pointer: fine) {
 		.file-btn:hover:not(.disabled) {
 			border-color: var(--accent);
+			translate: 0 calc(-1 * var(--hover-lift));
+			--file-shadow-rest: var(--file-shadow-lift);
 		}
 		.file-btn.primary:hover:not(.disabled) {
 			filter: brightness(1.08);

package/dist/components/molecules/FilterInput.svelte

@@ -473,7 +473,7 @@
 		padding: 0 var(--control-px-md);
 		min-height: var(--control-height-default);
 		background: var(--bg-elevated);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-md);
 		transition:
 			border-color var(--dur-fast) ease,
@@ -502,7 +502,7 @@
 		font-size: var(--fs-xs);
 		line-height: var(--lh-none);
 		color: var(--text-faint);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--border);
 		border-radius: var(--r-sm);
 		padding: var(--sp-0-5) var(--sp-1);
 	}
@@ -600,8 +600,8 @@
 		left: 0;
 		right: 0;
 		z-index: var(--z-drawer);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border-strong);
+		background: var(--raised-fill);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-md);
 		box-shadow: var(--shadow-lg);
 		padding: var(--sp-1);

package/dist/components/molecules/GitRef.svelte

@@ -125,9 +125,9 @@
 		min-width: 0;
 		padding: var(--sp-0-5) var(--sp-2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		color: var(--text-muted);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		text-decoration: none;
 	}
 	.branch {

package/dist/components/molecules/GlyphStack.svelte

@@ -314,6 +314,8 @@
 		height: 1rem;
 		max-width: 1rem;
 		max-height: 1rem;
+		min-width: 0;
+		min-height: 0;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
@@ -321,6 +323,22 @@
 		font-size: var(--fs-xs);
 		line-height: var(--lh-none);
 	}
+	/* Controls with a minimum box (e.g. a `box="xs"` IconButton) shrink to the cell instead of clipping. */
+	.stacked > .cell > :global(*) {
+		min-width: 0;
+		min-height: 0;
+		max-width: 1rem;
+		max-height: 1rem;
+	}
+	/* A labelled Dot folds to its disc; the label stays in the accessibility tree. */
+	.stacked :global(.dot-row > :not(.dot)) {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
 	.stacked > :global(*) :global(:focus-visible),
 	.stacked > :global(:focus-visible) {
 		outline-offset: var(--focus-ring-offset-inset);
@@ -343,11 +361,11 @@
 		margin: 0;
 		padding: var(--sp-1);
 		max-width: calc(100vw - 2 * var(--sp-2));
-		background: var(--bg-elevated);
+		background: var(--raised-fill);
 		color: var(--text);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-md);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		opacity: 0;
 		scale: var(--enter-scale);
 		transition:

package/dist/components/molecules/InputGroup.svelte

@@ -221,8 +221,8 @@
 		position: absolute;
 		inset: auto 0 0 0;
 		height: var(--ig-h);
-		background: var(--textarea-bg, var(--bg));
-		border: 1px solid var(--textarea-border, var(--border-strong));
+		background: var(--textarea-bg, var(--control-fill));
+		border: var(--edge-width) solid var(--textarea-border, var(--control-edge));
 		border-top: 0;
 		border-radius: 0 0 var(--ig-radius) var(--ig-radius);
 		transition: border-color var(--dur-fast) ease;
@@ -234,7 +234,7 @@
 	.ig-bar:has(.ig-field :global([aria-invalid='true']))::before {
 		border-color: var(--danger);
 	}
-	.ig:has(:focus-visible)::after {
+	.ig:has(:global(:focus-visible))::after {
 		content: '';
 		position: absolute;
 		inset: 0;

package/dist/components/molecules/LookPicker.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import SegmentedControl, { type SegmentOption } from './SegmentedControl.svelte';
+	import { theme } from '../../stores/theme.svelte';
+	import { LOOKS, type LookId } from '../../theme-mode';
+
+	let {
+		looks,
+		experimental = true,
+		experimentalLabel = 'beta',
+		label = 'Look',
+		size = 'md',
+		control,
+		block,
+		scroll,
+		sound,
+		onchange,
+		class: klass = '',
+	}: Pick<ComponentProps<typeof SegmentedControl>, 'size' | 'control' | 'block' | 'scroll' | 'sound'> & {
+		/** Restrict and order the offered looks; defaults to every registered look. */
+		looks?: readonly LookId[];
+		/** Offer looks whose status is `experimental`. */
+		experimental?: boolean;
+		/** Badge on experimental looks; empty hides it. */
+		experimentalLabel?: string;
+		label?: string;
+		onchange?: (look: LookId) => void;
+		class?: string;
+	} = $props();
+
+	const options = $derived(
+		(looks ?? LOOKS.map((l) => l.id)).flatMap((id) => {
+			const l = LOOKS.find((x) => x.id === id);
+			const beta = l?.status === 'experimental';
+			if (!l || (beta && !experimental)) return [];
+			return [{ value: l.id, label: l.label }];
+		})
+	);
+	const tagged = new Set<string>(LOOKS.filter((l) => l.status === 'experimental').map((l) => l.id));
+</script>
+
+{#snippet option(o: SegmentOption)}
+	<span class="look">
+		<span class="name">{o.label}</span>
+		{#if experimentalLabel && tagged.has(o.value)}<span class="tag">{experimentalLabel}</span>{/if}
+	</span>
+{/snippet}
+
+<SegmentedControl
+	{options}
+	value={theme.look}
+	onchange={(v) => {
+		theme.setLook(v);
+		onchange?.(theme.look);
+	}}
+	{label}
+	{size}
+	{control}
+	{block}
+	{scroll}
+	{sound}
+	class="look-picker {klass}"
+	{option}
+/>
+
+<style>
+	.look {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		min-width: 0;
+	}
+	:global(.seg-block) .name {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.tag {
+		flex: none;
+		padding: 0 var(--sp-1);
+		border: 1px solid currentColor;
+		border-radius: var(--r-pill);
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-semibold);
+		line-height: var(--lh-tight);
+	}
+</style>

package/dist/components/molecules/LookPicker.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import SegmentedControl from './SegmentedControl.svelte';
+import { type LookId } from '../../theme-mode';
+type $$ComponentProps = Pick<ComponentProps<typeof SegmentedControl>, 'size' | 'control' | 'block' | 'scroll' | 'sound'> & {
+    /** Restrict and order the offered looks; defaults to every registered look. */
+    looks?: readonly LookId[];
+    /** Offer looks whose status is `experimental`. */
+    experimental?: boolean;
+    /** Badge on experimental looks; empty hides it. */
+    experimentalLabel?: string;
+    label?: string;
+    onchange?: (look: LookId) => void;
+    class?: string;
+};
+declare const LookPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type LookPicker = ReturnType<typeof LookPicker>;
+export default LookPicker;

package/dist/components/molecules/Modal.svelte

@@ -286,10 +286,10 @@
 		max-height: calc(100dvh - var(--safe-top) - var(--sp-6));
 		display: flex;
 		flex-direction: column;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
+		background: var(--overlay-fill);
+		border: var(--edge-width) solid var(--overlay-edge);
 		border-radius: var(--r-lg) var(--r-lg) 0 0;
-		box-shadow: var(--shadow-lg);
+		box-shadow: var(--overlay-shadow);
 		padding-bottom: var(--safe-bottom);
 		/* Bottom sheet: slides up on enter, down on exit. */
 		opacity: 0;
@@ -357,7 +357,7 @@
 		align-items: center;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.sheet-toned {
 		border-top: 3px solid var(--modal-tone);
@@ -382,7 +382,7 @@
 		justify-content: flex-end;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	/* Opt-in: a flex item is shrink-to-fit, so a layout wrapper handed to the
 	   footer would size to its content and hug the right edge instead of