@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/components/atoms/Switch.svelte

@@ -36,11 +36,13 @@
 
 	const field = getFieldContext();
 	const isInvalid = $derived(invalid || !!field?.invalid);
+	let armed = $state(false);
 
 	function toggle(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
 		onclick?.(e);
 		if (e.defaultPrevented) return;
 		checked = !checked;
+		armed = true;
 		playSound(checked ? 'toggle-on' : 'toggle-off', sound);
 	}
 </script>
@@ -53,6 +55,7 @@
 		class="switch {klass}"
 		class:on={checked}
 		class:switch-sm={size === 'sm'}
+		class:armed
 		role="switch"
 		aria-checked={checked}
 		id={id ?? field?.id}
@@ -78,6 +81,8 @@
 	/* Track and knob sit on the 4px grid: md 24 / sm 20 tall, knob = track minus
 	   border and padding, travel = track width minus the knob and insets. */
 	.switch {
+		position: relative;
+		isolation: isolate;
 		--sw-h: var(--chip-md);
 		--sw-w: 2.75rem;
 		--sw-inset: calc(var(--sp-0-5) + 1px);
@@ -86,8 +91,8 @@
 		width: var(--sw-w);
 		height: var(--sw-h);
 		border-radius: var(--r-pill);
-		border: 1px solid var(--border-strong);
-		background: var(--bg-elevated-2);
+		border: var(--edge-width) solid var(--border-strong);
+		background: var(--track-fill);
 		padding: var(--sp-0-5);
 		display: flex;
 		align-items: center;
@@ -97,6 +102,7 @@
 			border-color var(--dur-fast) var(--ease);
 	}
 	.switch .knob {
+		position: relative;
 		width: var(--sw-knob);
 		height: var(--sw-knob);
 		border-radius: var(--r-pill);
@@ -122,9 +128,139 @@
 		scale: calc(1 + (var(--press-scale) - var(--press-scale-sm)) * 2.4) 1;
 		transition-duration: var(--dur-press);
 	}
+	/* Effects follow the closest data-fx-switch ancestor; squash is the default. */
+	.switch:not(:global([data-fx-switch]:not([data-fx-switch='squash'])) *),
+	:global([data-fx-switch='squash']) .switch:not(:global([data-fx-switch='squash'] [data-fx-switch]:not([data-fx-switch='squash'])) *) {
+		&.armed.on .knob {
+			animation: sw-squash-on var(--dur-spring) var(--ease-out);
+		}
+		&.armed:not(.on) .knob {
+			animation: sw-squash-off var(--dur-spring) var(--ease-out);
+		}
+	}
+	/* On and off use separate names so the animation restarts on every toggle. */
+	@keyframes sw-squash-on {
+		35% {
+			scale: 1.4 0.8;
+		}
+		70% {
+			scale: 0.86 1.1;
+		}
+	}
+	@keyframes sw-squash-off {
+		35% {
+			scale: 1.4 0.8;
+		}
+		70% {
+			scale: 0.86 1.1;
+		}
+	}
+
+	/* A streak trails the knob in flight; a soft accent halo glows while on. */
+	:global([data-fx-switch='glow']) .switch:not(:global([data-fx-switch='glow'] [data-fx-switch]:not([data-fx-switch='glow'])) *) {
+		&::after {
+			content: '';
+			position: absolute;
+			inset: -40% -18%;
+			z-index: -1;
+			pointer-events: none;
+			background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
+			opacity: 0;
+			transition: opacity var(--dur-slow) var(--ease);
+		}
+		&.on::after {
+			opacity: 1;
+		}
+		& .knob::before {
+			content: '';
+			position: absolute;
+			top: 18%;
+			bottom: 18%;
+			width: 170%;
+			z-index: -1;
+			pointer-events: none;
+			border-radius: var(--r-pill);
+			opacity: 0;
+		}
+		&.on .knob::before {
+			right: 40%;
+			transform-origin: right center;
+			background: linear-gradient(to left, color-mix(in srgb, var(--text-on-accent) 75%, transparent), transparent);
+		}
+		&:not(.on) .knob::before {
+			left: 40%;
+			transform-origin: left center;
+			background: linear-gradient(to right, color-mix(in srgb, var(--accent) 80%, transparent), transparent);
+		}
+		&.armed.on .knob::before {
+			animation: sw-trail-on var(--dur-spring) var(--ease-out);
+		}
+		&.armed:not(.on) .knob::before {
+			animation: sw-trail-off var(--dur-spring) var(--ease-out);
+		}
+	}
+	@keyframes sw-trail-on {
+		0%,
+		100% {
+			opacity: 0;
+			scale: 0.2 1;
+		}
+		30% {
+			opacity: 1;
+			scale: 1;
+		}
+	}
+	@keyframes sw-trail-off {
+		0%,
+		100% {
+			opacity: 0;
+			scale: 0.2 1;
+		}
+		30% {
+			opacity: 1;
+			scale: 1;
+		}
+	}
+
+	/* Calm: an unhurried glide with no overshoot; a small accent pip settles into the knob once on. */
+	:global([data-fx-switch='calm']) .switch:not(:global([data-fx-switch='calm'] [data-fx-switch]:not([data-fx-switch='calm'])) *) {
+		transition:
+			background var(--dur-slow) var(--ease),
+			border-color var(--dur-slow) var(--ease);
+		& .knob {
+			transform-origin: center;
+			transition:
+				translate var(--dur-slow) var(--ease-in-out),
+				scale var(--dur-fast) var(--ease-out),
+				background var(--dur-slow) var(--ease);
+		}
+		&:active:not(:disabled) .knob {
+			scale: var(--press-scale-sm);
+		}
+		& .knob::after {
+			content: '';
+			position: absolute;
+			inset: 32%;
+			border-radius: var(--r-pill);
+			background: var(--accent);
+			opacity: 0;
+			scale: 0.4;
+			transition:
+				opacity var(--dur-exit-fast) var(--ease-out),
+				scale var(--dur-exit-fast) var(--ease-out);
+		}
+		&.on .knob::after {
+			opacity: 1;
+			scale: 1;
+			transition:
+				opacity var(--dur-base) var(--ease) var(--dur-fast),
+				scale var(--dur-base) var(--ease-out) var(--dur-fast);
+		}
+	}
 	.switch:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--focus-glow);
 	}
 	.switch:disabled {
 		opacity: var(--disabled-opacity);

package/dist/components/atoms/Textarea.svelte

@@ -211,6 +211,7 @@
 			bind:value
 			use:autoresizeAction={typeof value === 'string' ? value : ''}
 			{...rest}
+			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
@@ -230,6 +231,7 @@
 			style:max-height={maxHeight}
 			bind:value
 			{...rest}
+			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
@@ -278,9 +280,10 @@
 		   --sp-3 top+bottom would overshoot it and a `rows={1}` textarea would
 		   render taller than the buttons it sits beside. */
 		padding: var(--sp-2) var(--control-px-md);
-		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-radius: var(--textarea-radius, var(--r-md));
+		box-shadow: var(--control-shadow);
 		color: var(--textarea-fg, var(--text));
 		transition: border-color var(--dur-fast) ease;
 		/* Custom handle replaces the native grip; never show the native one. */
@@ -299,6 +302,11 @@
 	.textarea:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
+	}
+	.textarea::placeholder {
+		color: var(--text-faint);
+		opacity: 1;
 	}
 	.textarea:disabled {
 		cursor: not-allowed;
@@ -333,6 +341,36 @@
 	.textarea[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	.textarea {
+		--focus-tint: var(--accent);
+	}
+	.textarea[aria-invalid='true'] {
+		--focus-tint: var(--danger);
+	}
+	/* Focus bloom: a solid ring whose soft halo swells, then settles to a quieter glow. */
+	.textarea:not(.grouped):focus:not(:global([data-fx-focus='none']) *),
+	:global(:is([data-fx-focus='bloom'], [data-fx-focus='label'])) .textarea:not(.grouped):focus:not(:global(:is([data-fx-focus='bloom'], [data-fx-focus='label']) [data-fx-focus='none']) *) {
+		outline: none;
+		box-shadow:
+			var(--control-shadow),
+			0 0 0 var(--focus-ring-width) var(--focus-tint),
+			0 0 16px 2px color-mix(in srgb, var(--focus-tint) 24%, transparent);
+		animation: focus-bloom var(--dur-fast) var(--ease-out);
+	}
+	@keyframes focus-bloom {
+		0% {
+			box-shadow:
+				var(--control-shadow),
+				0 0 0 0 transparent,
+				0 0 0 0 transparent;
+		}
+		45% {
+			box-shadow:
+				var(--control-shadow),
+				0 0 0 calc(var(--focus-ring-width) + 1px) var(--focus-tint),
+				0 0 20px 4px color-mix(in srgb, var(--focus-tint) 32%, transparent);
+		}
+	}
 	/* Inside an InputGroup the group draws the focus ring and the overlaid
 	   adornments report their widths; the text stays clear of them. */
 	.textarea.grouped {
@@ -347,6 +385,7 @@
 	}
 	.textarea.grouped:focus-visible {
 		outline: none;
+		box-shadow: var(--control-shadow);
 	}
 	.textarea.grouped.bar {
 		padding-inline: var(--ig-pad-x);
@@ -408,7 +447,7 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.textarea:hover:not(:disabled, :focus, [aria-invalid='true']) {
-			border-color: var(--text-faint);
+			border-color: var(--control-edge-hover);
 		}
 		.resize-handle:hover::after {
 			background: var(--accent);

package/dist/components/atoms/Thinking.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	// Chat "assistant is working" indicator. `dots`: three dots rise one after
+	// the other, drawn in currentColor. `sheen`: a light sweeps through the
+	// status word (children, or `label`), with a blinking caret after it.
+	let {
+		variant = 'dots',
+		label = 'Thinking',
+		caret = true,
+		children,
+		class: klass = '',
+		style: styleProp = '',
+		...rest
+	}: {
+		variant?: 'dots' | 'sheen';
+		/** Announced to AT; also the visible word of `sheen` when there are no children. */
+		label?: string;
+		/** Blinking caret after the sheen text. */
+		caret?: boolean;
+		children?: Snippet;
+		class?: string;
+		style?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<span
+	data-tsu="Thinking"
+	class="thinking v-{variant} {klass}"
+	style={styleProp}
+	role="status"
+	aria-label={variant === 'dots' ? label : undefined}
+	{...rest}
+>
+	{#if variant === 'dots'}
+		<span class="dots" aria-hidden="true"><span></span><span></span><span></span></span>
+	{:else}
+		<span class="text">{#if children}{@render children()}{:else}{label}{/if}</span>
+		{#if caret}<span class="caret" aria-hidden="true"></span>{/if}
+	{/if}
+</span>
+
+<style>
+	.thinking {
+		display: inline-flex;
+		align-items: center;
+		line-height: 1;
+		vertical-align: middle;
+	}
+	.dots {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3em;
+		padding: 0.25em 0;
+	}
+	.dots span {
+		display: block;
+		width: 0.4em;
+		height: 0.4em;
+		border-radius: 50%;
+		background: currentColor;
+		animation: tsu-thinking-dot 1.2s var(--ease-in-out) infinite;
+	}
+	.dots span:nth-child(1) {
+		opacity: 1;
+	}
+	.dots span:nth-child(2) {
+		opacity: 0.6;
+		animation-delay: 0.15s;
+	}
+	.dots span:nth-child(3) {
+		opacity: 0.3;
+		animation-delay: 0.3s;
+	}
+	@keyframes tsu-thinking-dot {
+		0%,
+		55%,
+		100% {
+			opacity: 0.35;
+			transform: translateY(0);
+		}
+		25% {
+			opacity: 1;
+			transform: translateY(-0.3em);
+		}
+	}
+
+	.v-sheen {
+		line-height: inherit;
+	}
+	.text {
+		background: linear-gradient(90deg, var(--text-muted) 0 38%, var(--text) 50%, var(--text-muted) 62% 100%);
+		background-size: 300% 100%;
+		background-position: 100% 0;
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+		animation: tsu-thinking-sheen 1.8s linear infinite;
+	}
+	@keyframes tsu-thinking-sheen {
+		to {
+			background-position: 0% 0;
+		}
+	}
+	.caret {
+		display: inline-block;
+		width: 2px;
+		height: 1em;
+		margin-left: 0.2em;
+		border-radius: 1px;
+		background: var(--accent);
+		animation: tsu-thinking-blink 1s steps(2, jump-none) infinite;
+	}
+	@keyframes tsu-thinking-blink {
+		to {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.dots span,
+		.text,
+		.caret {
+			animation: none;
+		}
+		.text {
+			background-position: 50% 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    variant?: 'dots' | 'sheen';
+    /** Announced to AT; also the visible word of `sheen` when there are no children. */
+    label?: string;
+    /** Blinking caret after the sheen text. */
+    caret?: boolean;
+    children?: Snippet;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+};
+declare const Thinking: import("svelte").Component<$$ComponentProps, {}, "">;
+type Thinking = ReturnType<typeof Thinking>;
+export default Thinking;

package/dist/components/layouts/AppShell.svelte

@@ -276,7 +276,7 @@
 		padding-top: var(--safe-top);
 		background: color-mix(in srgb, var(--bg) 88%, transparent);
 		backdrop-filter: blur(8px);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.shell-header > :global(*) {
 		min-width: 0;
@@ -302,7 +302,7 @@
 	}
 	.shell-footer {
 		grid-area: footer;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 		padding: var(--sp-4) max(var(--sp-4), var(--safe-right)) calc(var(--sp-4) + var(--safe-bottom))
 			max(var(--sp-4), var(--safe-left));
 	}
@@ -318,8 +318,8 @@
 		overflow-y: auto;
 		overflow-x: hidden; /* overflow-y:auto would otherwise make x auto too */
 		-webkit-overflow-scrolling: touch;
-		background: var(--bg-elevated);
-		border-right: 1px solid var(--border);
+		background: var(--surface-fill);
+		border-right: var(--edge-width) solid var(--surface-edge);
 		--shell-sidebar-pad: var(--sp-3);
 		padding: var(--shell-sidebar-pad);
 		padding-top: max(var(--shell-sidebar-pad), var(--safe-top));
@@ -338,7 +338,7 @@
 	}
 	.shell-sidebar.open {
 		translate: 0 0;
-		box-shadow: var(--shadow-lg);
+		box-shadow: var(--overlay-shadow);
 		transition-duration: var(--dur-sheet);
 	}
 	.shell-scrim {
@@ -396,7 +396,7 @@
 			transition: none;
 			z-index: auto;
 			box-shadow: none;
-			border-right: 1px solid var(--border);
+			border-right: var(--edge-width) solid var(--surface-edge);
 		}
 		.shell.sticky-sidebar .shell-sidebar {
 			position: sticky;

package/dist/components/layouts/MasterDetail.svelte

@@ -107,7 +107,7 @@
 	class:selected
 	style="--md-list-w: {listWidth}; --md-gap: {gap}; --md-divider: {divider === 'none'
 		? 'none'
-		: '1px solid var(--border)'};{style ? ` ${style}` : ''}"
+		: 'var(--edge-width) solid var(--surface-edge)'};{style ? ` ${style}` : ''}"
 	data-tsu="MasterDetail"
 	{...rest}
 >
@@ -159,7 +159,7 @@
 		-webkit-overflow-scrolling: touch;
 	}
 	.md-list {
-		border-right: var(--md-divider, 1px solid var(--border));
+		border-right: var(--md-divider, var(--edge-width) solid var(--surface-edge));
 	}
 	.md-detail {
 		display: flex;
@@ -180,7 +180,7 @@
 		padding-inline: var(--sp-3);
 		background: color-mix(in srgb, var(--bg) 88%, transparent);
 		backdrop-filter: blur(8px);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.md-detail-header-content {
 		flex: 1;

package/dist/components/layouts/NavBar.svelte

@@ -239,14 +239,14 @@
 		padding-inline: max(var(--safe-left), var(--sp-1)) max(var(--safe-right), var(--sp-1));
 		background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
 		backdrop-filter: blur(12px);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.floating {
 		padding: var(--sp-1);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-md);
-		background: var(--bg-elevated);
-		box-shadow: var(--shadow-md);
+		background: var(--raised-fill);
+		box-shadow: var(--raised-shadow);
 	}
 	.bar.floating {
 		left: calc(var(--sp-2) + var(--safe-left));

package/dist/components/layouts/NavSection.svelte

@@ -74,7 +74,7 @@
 		.nav-section:not(:first-child) {
 			margin-top: var(--sp-2);
 			padding-top: var(--sp-2);
-			border-top: 1px solid var(--border);
+			border-top: var(--edge-width) solid var(--surface-edge);
 		}
 	}
 </style>

package/dist/components/layouts/ResizablePanel.svelte

@@ -401,8 +401,8 @@
 		min-width: 0;
 		min-height: 0;
 		width: var(--panel-current-width);
-		background: var(--bg-elevated);
-		border-right: 1px solid var(--border);
+		background: var(--surface-fill);
+		border-right: var(--edge-width) solid var(--surface-edge);
 		transition:
 			width var(--dur-base) var(--ease),
 			box-shadow var(--dur-base) var(--ease);
@@ -414,7 +414,7 @@
 		grid-column: 2;
 		grid-row: 1;
 		border-right: 0;
-		border-left: 1px solid var(--border);
+		border-left: var(--edge-width) solid var(--surface-edge);
 	}
 	.main {
 		min-width: 0;
@@ -449,7 +449,7 @@
 		font: inherit;
 		font-size: var(--icon-sm);
 		background: transparent;
-		border: 1px solid transparent;
+		border: var(--edge-width) solid transparent;
 		border-radius: var(--r-sm);
 		cursor: pointer;
 		transition:
@@ -475,7 +475,7 @@
 		.collapse-control:hover {
 			color: var(--text);
 			background: var(--bg-elevated-2);
-			border-color: var(--border);
+			border-color: var(--surface-edge);
 		}
 	}
 	.collapse-control:focus-visible,
@@ -547,7 +547,7 @@
 			left: 0;
 			z-index: 1;
 			width: min(var(--panel-current-width), 85cqw);
-			box-shadow: var(--shadow-md);
+			box-shadow: var(--raised-shadow);
 		}
 		.right .panel {
 			right: 0;
@@ -581,7 +581,7 @@
 		left: 0;
 		z-index: var(--z-drawer);
 		width: min(var(--panel-current-width), 100%);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		outline: none;
 		animation: panel-slide-left var(--dur-base) var(--ease);
 	}

package/dist/components/layouts/TabBar.svelte

@@ -144,8 +144,8 @@
 <style>
 	.tabbar {
 		min-width: 0;
-		background: var(--bg-elevated);
-		border-top: 1px solid var(--border);
+		background: var(--surface-fill);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.bar {
 		position: fixed;

package/dist/components/molecules/Accordion.svelte

@@ -124,7 +124,7 @@
 
 <style>
 	.accordion {
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-lg);
 		overflow: hidden;
 	}
@@ -133,7 +133,7 @@
 		border-radius: 0;
 	}
 	.accordion > :global(.acc-item + .acc-item) {
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.acc-title {
 		min-width: 0;

package/dist/components/molecules/AttachmentList.svelte

@@ -317,7 +317,7 @@
 		right: -0.35em;
 		min-width: 1.4em;
 		padding: 0.1em 0.3em;
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--surface-edge-strong);
 		border-radius: var(--r-pill);
 		background: var(--bg);
 		color: var(--text);
@@ -326,7 +326,7 @@
 	.preview {
 		display: block;
 		padding: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		background: none;
 		cursor: pointer;

package/dist/components/molecules/CapBar.svelte

@@ -284,7 +284,7 @@
 		inset: 0 0 0 var(--cap);
 		border-radius: 0 var(--r-pill) var(--r-pill) 0;
 		background: var(--bg);
-		box-shadow: inset 0 0 0 1px var(--border);
+		box-shadow: inset 0 0 0 var(--edge-width) var(--track-edge);
 		pointer-events: none;
 	}
 	.fill-clip {
@@ -363,7 +363,7 @@
 		left: clamp(0%, var(--cap), 100%);
 		translate: calc(-1 * clamp(0%, var(--cap), 100%)) 0;
 		padding: var(--sp-px) var(--sp-1);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-sm);
 		background: var(--bg-elevated-2);
 		box-shadow: var(--shadow-sm);

package/dist/components/molecules/CodeBlock.svelte

@@ -85,7 +85,7 @@
 <style>
 	.codeblock {
 		margin: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-lg);
 		background: var(--bg);
 		overflow: hidden;
@@ -95,8 +95,8 @@
 		align-items: center;
 		gap: var(--sp-2);
 		padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
-		background: var(--bg-elevated-2);
-		border-bottom: 1px solid var(--border);
+		background: var(--surface-fill-2);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 		font-size: var(--fs-xs);
 		font-family: var(--font-mono);
 		color: var(--text-muted);
@@ -120,8 +120,8 @@
 		padding: var(--sp-3) var(--sp-2);
 		text-align: right;
 		color: var(--text-faint);
-		background: var(--bg-elevated);
-		border-right: 1px solid var(--border);
+		background: var(--surface-fill);
+		border-right: var(--edge-width) solid var(--surface-edge);
 		user-select: none;
 		font-family: var(--font-mono);
 		font-size: var(--fs-sm);