@dorsk/tsumikit 0.78.0 → 0.79.0

package/dist/components/atoms/Artwork.svelte

@@ -102,13 +102,14 @@
 		justify-content: center;
 		overflow: hidden;
 		flex: none;
-		background: var(--bg-elevated-2);
-		border: 1px solid var(--border);
+		background: var(--surface-fill-2);
+		border: var(--edge-width) solid var(--surface-edge);
 		color: var(--text-muted);
 		container-type: inline-size;
 		transition:
 			border-color var(--dur-fast) var(--ease),
 			box-shadow var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease-out),
 			scale var(--dur-fast) var(--ease-out);
 	}
 	.r-sm {
@@ -125,8 +126,9 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.hover:hover {
-			border-color: var(--border-strong);
+			border-color: var(--surface-edge-strong);
 			box-shadow: var(--shadow-md);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 	}
 	.hover:active {

package/dist/components/atoms/Badge.svelte

@@ -195,7 +195,7 @@
 		--icon-size: var(--icon-xs);
 		background: var(--badge-bg, var(--bg-elevated-2));
 		color: var(--badge-fg, var(--text-muted));
-		border: 1px solid var(--badge-border, var(--border));
+		border: var(--edge-width) solid var(--badge-border, var(--border));
 		white-space: nowrap;
 		max-width: var(--badge-max-width, 100%);
 	}

package/dist/components/atoms/Button.svelte

@@ -242,9 +242,12 @@
 		padding: var(--sp-2) var(--btn-px-md);
 		min-height: var(--btn-size, var(--control-height-default));
 		max-width: 100%;
-		border: 1px solid var(--btn-border, var(--border-strong));
+		border: var(--edge-width) solid var(--btn-border, var(--btn-edge));
 		border-radius: var(--btn-radius, var(--r-md));
-		background: var(--btn-bg, var(--surface));
+		background: var(--btn-bg, var(--btn-fill));
+		--btn-shadow-rest: var(--btn-shadow);
+		--btn-shadow-lift: var(--btn-shadow-hover);
+		box-shadow: var(--btn-shadow-rest);
 		color: var(--btn-fg, var(--text));
 		font-weight: var(--fw-medium);
 		font-size: var(--control-fs-md);
@@ -254,8 +257,10 @@
 		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,
+			translate var(--dur-fast) var(--ease-out),
 			scale var(--btn-scale-dur) var(--ease-out);
 		user-select: none;
 		white-space: normal;
@@ -265,6 +270,9 @@
 		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
+	.btn:focus-visible:not(.btn-link, .btn-icon-inline, [aria-pressed='true']) {
+		box-shadow: var(--btn-shadow-rest), var(--focus-glow);
+	}
 	/* Press: scale in over --dur-press, release over --dur-fast. */
 	.btn:active:not(:disabled, [aria-disabled='true'], .loading, .btn-link) {
 		--btn-scale-dur: var(--dur-press);
@@ -277,8 +285,10 @@
 		scale: var(--press-scale-sm);
 	}
 	.btn-primary {
-		background: var(--btn-bg, var(--accent));
-		border-color: var(--btn-border, var(--accent));
+		background: var(--btn-bg, var(--btn-primary-fill));
+		border-color: var(--btn-border, var(--btn-primary-edge));
+		--btn-shadow-rest: var(--btn-primary-shadow);
+		--btn-shadow-lift: var(--btn-primary-shadow-hover);
 		color: var(--btn-fg, var(--text-on-accent));
 		font-weight: var(--fw-semibold);
 	}
@@ -289,6 +299,8 @@
 	.btn-ghost {
 		background: var(--btn-bg, transparent);
 		border-color: var(--btn-border, transparent);
+		--btn-shadow-rest: none;
+		--btn-shadow-lift: none;
 	}
 	.btn-sm {
 		min-height: var(--btn-size, var(--control-height-compact));
@@ -372,9 +384,9 @@
 		height: var(--btn-size, var(--control-height));
 		min-height: var(--btn-size, var(--control-height));
 		padding: 0 var(--control-px-md);
-		border: 1px solid var(--btn-border, var(--border-strong));
+		border: var(--edge-width) solid var(--btn-border, var(--btn-edge));
 		border-radius: var(--btn-radius, var(--r-md));
-		background: var(--btn-bg, var(--surface));
+		background: var(--btn-bg, var(--btn-fill));
 		color: var(--btn-fg, var(--text));
 		font-weight: var(--fw-medium);
 		font-size: var(--control-fs-md);
@@ -390,8 +402,8 @@
 	   the primary action with the neutral --surface; restore the accent fill when
 	   both are present. */
 	.btn-control.btn-primary {
-		background: var(--btn-bg, var(--accent));
-		border-color: var(--btn-border, var(--accent));
+		background: var(--btn-bg, var(--btn-primary-fill));
+		border-color: var(--btn-border, var(--btn-primary-edge));
 		color: var(--btn-fg, var(--text-on-accent));
 	}
 	.btn-control.btn-tone-success {
@@ -730,6 +742,8 @@
 	@media (hover: hover) and (pointer: fine) {
 		.btn:hover:not(:disabled) {
 			border-color: var(--accent);
+			translate: 0 calc(-1 * var(--hover-lift));
+			--btn-shadow-rest: var(--btn-shadow-lift);
 		}
 		.btn-primary:hover:not(:disabled) {
 			filter: brightness(1.08);
@@ -782,11 +796,13 @@
 		.btn-link:hover:not(:disabled) {
 			background: none;
 			border: none;
+			translate: none;
 			text-decoration: underline;
 		}
 		.btn-icon-inline:hover:not(:disabled) {
 			border: none;
 			background: none;
+			translate: none;
 			color: var(--text);
 		}
 		.btn-icon-inline.hover-danger:hover:not(:disabled) {

package/dist/components/atoms/Card.svelte

@@ -174,10 +174,12 @@
 	.card {
 		--card-pad: var(--sp-4);
 		min-width: 0;
-		background: var(--bg-elevated);
+		background: var(--surface-fill);
 		--card-border-style: solid;
-		border: 1px var(--card-border-style) var(--border);
+		border: var(--edge-width) var(--card-border-style) var(--surface-edge);
 		border-radius: var(--r-lg);
+		--card-shadow-rest: var(--surface-shadow);
+		box-shadow: var(--card-shadow-rest);
 		padding: var(--card-pad);
 	}
 	.card-gap {
@@ -194,10 +196,10 @@
 		padding: var(--card-pad);
 	}
 	.card-head {
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.card-foot {
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	/* Theme-aware surface shade, selected by prop so it adapts across themes
 	   instead of being overridden with app-level :global hacks. `base` is the
@@ -206,7 +208,7 @@
 		background: var(--surface);
 	}
 	.surface-sunken {
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 	}
 	.border-dashed {
 		--card-border-style: dashed;
@@ -237,16 +239,19 @@
 			border-color var(--dur-fast) var(--ease),
 			background var(--dur-fast) var(--ease),
 			box-shadow var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease-out),
 			scale var(--dur-fast) var(--ease-out);
 	}
 	.card-tap:active {
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		scale: var(--press-scale-lg);
 		transition-duration: var(--dur-press);
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.card-tap:hover {
-			border-color: var(--border-strong);
+			border-color: var(--surface-edge-strong);
+			translate: 0 calc(-1 * var(--hover-lift));
+			--card-shadow-rest: var(--surface-shadow-hover);
 		}
 	}
 	.card-max {
@@ -275,9 +280,10 @@
 	.card-warn,
 	.card-danger,
 	.card-info,
+	.card-accent,
 	.card-attention {
-		border-color: color-mix(in srgb, var(--card-tone) 55%, var(--border));
-		background: color-mix(in srgb, var(--card-tone) 8%, var(--bg-elevated));
+		border-color: color-mix(in srgb, var(--card-tone) 55%, var(--surface-edge));
+		background: color-mix(in srgb, var(--card-tone) 8%, var(--surface-fill));
 	}
 	.card-attention {
 		background: var(--attention-bg);
@@ -291,8 +297,8 @@
 		/* Defaults; overridden inline by the stackY/stackX props. */
 		--stack-y: 8px;
 		--stack-x: 2px;
-		--stack-bg: var(--bg-elevated-2);
-		--stack-border: var(--border);
+		--stack-bg: var(--surface-fill-2);
+		--stack-border: var(--surface-edge);
 		/* Reserve room for the two peeking layers so they aren't clipped. */
 		margin-right: calc(var(--stack-x) * 2);
 		margin-bottom: calc(var(--stack-y) * 2);
@@ -306,7 +312,7 @@
 		/* Opaque fill so each layer fully hides the one behind it — only the
 		   bottom-right peek (and its single border line) stays visible. */
 		background: var(--stack-bg);
-		border: 1px var(--card-border-style) var(--stack-border);
+		border: var(--edge-width) var(--card-border-style) var(--stack-border);
 	}
 	/* Nearest back layer — sits just under the front surface. */
 	.card-stacked::before {

package/dist/components/atoms/Checkbox.svelte

@@ -106,9 +106,10 @@
 		flex: none;
 		width: var(--cb-box, var(--chip-sm));
 		height: var(--cb-box, var(--chip-sm));
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-sm);
-		background: var(--bg);
+		background: var(--control-fill);
+		box-shadow: var(--control-shadow);
 		transition:
 			background var(--dur-fast) var(--ease),
 			border-color var(--dur-fast) var(--ease),
@@ -158,6 +159,7 @@
 	input:focus-visible + .box {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	input[aria-invalid='true']:not(:checked):not(:indeterminate) + .box {
 		border-color: var(--danger);

package/dist/components/atoms/Gauge.svelte

@@ -108,9 +108,9 @@
 		height: var(--gauge-h, 1.25rem);
 		margin: 0;
 		padding: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--track-edge);
 		border-radius: var(--r-sm);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: visible;
 		color: inherit;
 		font: inherit;

package/dist/components/atoms/Input.svelte

@@ -142,9 +142,10 @@
 		padding: var(--sp-2) var(--control-px-md);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
-		background: var(--input-bg, var(--bg));
-		border: 1px solid var(--input-border, var(--border-strong));
+		background: var(--input-bg, var(--control-fill));
+		border: var(--edge-width) solid var(--input-border, var(--control-edge));
 		border-radius: var(--input-radius, var(--r-md));
+		box-shadow: var(--control-shadow);
 		color: var(--input-fg, var(--text));
 		transition: border-color var(--dur-fast) ease;
 	}
@@ -155,6 +156,7 @@
 	.input:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	.input:disabled {
 		opacity: var(--disabled-opacity);
@@ -216,6 +218,7 @@
 	}
 	.input.grouped:focus-visible {
 		outline: none;
+		box-shadow: var(--control-shadow);
 	}
 	.input.grouped:disabled {
 		opacity: 1;
@@ -296,7 +299,7 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.input:hover:not(:disabled, :focus, [aria-invalid='true']) {
-			border-color: var(--text-faint);
+			border-color: var(--control-edge-hover);
 		}
 		.input-clear:hover {
 			color: var(--text);

package/dist/components/atoms/Kbd.svelte

@@ -108,7 +108,7 @@
 		font-size: inherit;
 		line-height: var(--lh-snug);
 		padding: 0 var(--sp-1);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--border-strong);
 		border-bottom-width: 2px;
 		border-radius: var(--r-sm);
 		background: var(--bg-elevated-2);

package/dist/components/atoms/Progress.svelte

@@ -146,7 +146,7 @@
 		position: relative;
 		width: 100%;
 		height: 0.5rem;
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		border-radius: var(--r-pill);
 		overflow: hidden;
 	}

package/dist/components/atoms/SegmentedProgress.svelte

@@ -168,7 +168,7 @@
 		flex: 0 1 0%;
 		min-width: 3px;
 		height: 100%;
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 		overflow: hidden;
 	}
 	.segment:first-child {
@@ -206,7 +206,7 @@
 
 	.stacked {
 		overflow: hidden;
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 	}
 	.stacked .segment {
 		min-width: 0;

package/dist/components/atoms/Select.svelte

@@ -217,9 +217,10 @@
 		padding: var(--sp-2) var(--control-px-md);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
-		background: var(--select-bg, var(--bg));
-		border: 1px solid var(--select-border, var(--border-strong));
+		background: var(--select-bg, var(--control-fill));
+		border: var(--edge-width) solid var(--select-border, var(--control-edge));
 		border-radius: var(--select-radius, var(--r-md));
+		box-shadow: var(--control-shadow);
 		color: var(--select-fg, var(--text));
 		transition: border-color var(--dur-fast) ease;
 	}
@@ -261,11 +262,15 @@
 		background: var(--select-bg, var(--bg-elevated-2));
 		border: none;
 		border-radius: var(--select-radius, var(--r-sm));
+		box-shadow: none;
 	}
 	.select:focus {
 		outline: none;
 		border-color: var(--accent);
 	}
+	.select:focus-visible:not(.embedded, .ghost) {
+		box-shadow: var(--control-shadow), var(--focus-glow);
+	}
 	.select:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
@@ -367,7 +372,7 @@
 	}
 	@media (hover: hover) and (pointer: fine) {
 		.select:hover:not(:disabled, :focus, [aria-invalid='true'], .ghost, .embedded) {
-			border-color: var(--text-faint);
+			border-color: var(--control-edge-hover);
 		}
 	}
 	/* Transparent overlay: fills the positioned parent, the trigger shows through. */
@@ -380,6 +385,7 @@
 		opacity: 0;
 		border: none;
 		background: none;
+		box-shadow: none;
 		cursor: pointer;
 	}
 </style>

package/dist/components/atoms/Slider.svelte

@@ -210,13 +210,13 @@
 		background: linear-gradient(
 			to right,
 			var(--slider-accent, var(--accent)) var(--pct),
-			var(--bg-elevated-2) var(--pct)
+			var(--track-fill) var(--pct)
 		);
 	}
 	input[type='range']::-moz-range-track {
 		height: var(--track);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--track-fill);
 	}
 	input[type='range']::-moz-range-progress {
 		height: var(--track);
@@ -233,7 +233,7 @@
 		border-radius: var(--r-pill);
 		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transition:
 			scale var(--dur-press) var(--ease-out),
 			box-shadow var(--dur-fast) var(--ease);
@@ -244,17 +244,17 @@
 		border-radius: var(--r-pill);
 		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
-		box-shadow: var(--shadow-sm);
+		box-shadow: var(--thumb-shadow);
 		transition:
 			scale var(--dur-press) var(--ease-out),
 			box-shadow var(--dur-fast) var(--ease);
 	}
 	@media (hover: hover) and (pointer: fine) {
 		input[type='range']:not(:disabled):hover::-webkit-slider-thumb {
-			box-shadow: var(--shadow-sm), var(--halo);
+			box-shadow: var(--thumb-shadow), var(--halo);
 		}
 		input[type='range']:not(:disabled):hover::-moz-range-thumb {
-			box-shadow: var(--shadow-sm), var(--halo);
+			box-shadow: var(--thumb-shadow), var(--halo);
 		}
 	}
 	input[type='range']:not(:disabled):active::-webkit-slider-thumb {
@@ -269,10 +269,12 @@
 	input[type='range']:focus-visible::-webkit-slider-thumb {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--thumb-shadow), var(--focus-glow);
 	}
 	input[type='range']:focus-visible::-moz-range-thumb {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--thumb-shadow), var(--focus-glow);
 	}
 	@media (pointer: coarse) {
 		input[type='range'] {

package/dist/components/atoms/Swatch.svelte

@@ -70,7 +70,7 @@
 		height: var(--swatch-size);
 		padding: 0;
 		margin: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--border);
 		border-radius: var(--r-pill);
 		background: var(--swatch-color);
 		color: var(--text);

package/dist/components/atoms/Switch.svelte

@@ -86,8 +86,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;
@@ -125,6 +125,7 @@
 	.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

@@ -278,9 +278,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 +300,7 @@
 	.textarea:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--control-shadow), var(--focus-glow);
 	}
 	.textarea:disabled {
 		cursor: not-allowed;
@@ -347,6 +349,7 @@
 	}
 	.textarea.grouped:focus-visible {
 		outline: none;
+		box-shadow: var(--control-shadow);
 	}
 	.textarea.grouped.bar {
 		padding-inline: var(--ig-pad-x);
@@ -408,7 +411,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/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);
 	}