@tellegen/svelte 0.3.0 → 0.4.1

package/dist/components/McResults.svelte

@@ -1,19 +1,43 @@
 <script lang="ts">
-	import type { McPfResult, McComplex, DistGraph } from '@tellegen/engine';
+	import {
+		mcPfResultDetail,
+		summarizeMcPfResult,
+		type DistGraph,
+		type McComplex,
+		type McPfDetail,
+		type McPfDetailQuery,
+		type McPfResult,
+		type McPfSummary
+	} from '@tellegen/engine';
 	import { neutralTerminal } from '../multiconductor.js';
+	import type { McEditTiming } from '../state.svelte.js';
 	let {
 		result,
+		detail,
+		timing = null,
 		elapsedMs,
 		selectedBus,
 		selectedEdge,
 		graph
 	}: {
-		result: McPfResult;
+		/** A live session's summary, or a stored full result. */
+		result: McPfSummary | McPfResult;
+		/** Fetches one bus's terminals and a page of equipment ports. A full
+		 * `result` serves its own pages when this is omitted. */
+		detail?: (query: McPfDetailQuery) => Promise<McPfDetail | null>;
+		timing?: McEditTiming | null;
 		elapsedMs: number | null;
 		selectedBus: string | null;
 		selectedEdge: string | null;
 		graph: DistGraph | null;
 	} = $props();
+	const summary = $derived('terminals' in result ? summarizeMcPfResult(result) : result);
+	const load = $derived.by(() => {
+		if (detail) return detail;
+		if (!('terminals' in result)) return null;
+		const full = result;
+		return (query: McPfDetailQuery) => Promise.resolve(mcPfResultDetail(full, query));
+	});
 	let busChoice = $state('');
 	let edgeChoice = $state('');
 	const busId = $derived(
@@ -23,29 +47,48 @@
 	);
 	const bus = $derived(graph?.buses.find((b) => b.id === busId));
 	const neutralName = $derived(bus ? neutralTerminal(bus.terminals, bus.neutral_terminal) : null);
-	const neutral = $derived(
-		result.terminals.find((t) => t.bus === busId && t.terminal === neutralName)?.voltage
-	);
 	const edgeId = $derived(selectedEdge ?? edgeChoice);
-	const sourcePower = $derived(
-		result.source_reactions.reduce(
-			(sum, port) => ({
-				re: sum.re + port.power_into_network.re,
-				im: sum.im + port.power_into_network.im
-			}),
-			{ re: 0, im: 0 }
-		)
-	);
-	const passiveLoss = $derived(
-		result.element_ports
-			.filter((port) => !['load', 'generator', 'ibr'].includes(port.kind))
-			.reduce((sum, port) => sum + port.power_into_element.re, 0)
-	);
 	let search = $state('');
 	let page = $state(0);
 	const size = 20;
+	let portPage = $state(0);
+	// Only the selected bus and one equipment page are fetched; the previous
+	// rows stay visible until the page for a new operating point arrives.
+	let current = $state.raw<McPfDetail | null>(null);
+	let requested = 0;
+	$effect(() => {
+		const fetchDetail = load;
+		const query: McPfDetailQuery = {
+			bus: busId || null,
+			element: edgeId || null,
+			port_offset: portPage * size,
+			port_limit: size
+		};
+		void result;
+		if (!fetchDetail) {
+			current = null;
+			return;
+		}
+		const seq = ++requested;
+		fetchDetail(query).then(
+			(next) => {
+				if (seq !== requested || !next) return;
+				if (next.element_port_total > 0 && query.port_offset! >= next.element_port_total) {
+					portPage = 0;
+					return;
+				}
+				current = next;
+			},
+			() => {}
+		);
+	});
+	const neutral = $derived(
+		current?.terminals.find((t) => t.bus === busId && t.terminal === neutralName)?.voltage
+	);
+	const sourcePower = $derived(summary.source_power_into_network);
+	const passiveLoss = $derived(summary.passive_loss.re);
 	const terminals = $derived(
-		result.terminals.filter(
+		(current?.terminals ?? []).filter(
 			(row) =>
 				(!busId || row.bus === busId) &&
 				`${row.bus} ${row.terminal}`.toLowerCase().includes(search.toLowerCase())
@@ -54,13 +97,13 @@
 	const pageCount = $derived(Math.max(1, Math.ceil(terminals.length / size)));
 	const currentPage = $derived(Math.min(page, pageCount - 1));
 	const visible = $derived(terminals.slice(currentPage * size, (currentPage + 1) * size));
-	const ports = $derived(result.element_ports.filter((row) => !edgeId || row.element === edgeId));
-	let portPage = $state(0);
-	const portPages = $derived(Math.max(1, Math.ceil(ports.length / size)));
+	const portTotal = $derived(current?.element_port_total ?? 0);
+	const portPages = $derived(Math.max(1, Math.ceil(portTotal / size)));
 	const currentPortPage = $derived(Math.min(portPage, portPages - 1));
-	const visiblePorts = $derived(ports.slice(currentPortPage * size, (currentPortPage + 1) * size));
+	const visiblePorts = $derived(current?.element_ports ?? []);
 	const magnitude = (value: McComplex) => Math.hypot(value.re, value.im);
 	const fixed = (value: number) => (Number.isFinite(value) ? value.toFixed(3) : '-');
+	const ms = (value: number | null) => (value === null ? '-' : `${value.toFixed(1)} ms`);
 	const angle = (value: McComplex) =>
 		magnitude(value) > 1e-12 ? ((Math.atan2(value.im, value.re) * 180) / Math.PI).toFixed(2) : '-';
 </script>
@@ -68,7 +111,7 @@
 <section aria-label="AC power flow results" class="mc-results">
 	<div class="result-heading">
 		<strong>AC power flow</strong><span
-			>{result.iterations} iterations{elapsedMs === null
+			>{summary.iterations} iterations{elapsedMs === null
 				? ''
 				: `, ${Math.round(elapsedMs)} ms`}</span
 		>
@@ -76,15 +119,15 @@
 	<dl class="totals">
 		<div>
 			<dt>Status</dt>
-			<dd>{result.converged ? 'Converged' : 'Not converged'}</dd>
+			<dd>{summary.converged ? 'Converged' : 'Not converged'}</dd>
 		</div>
 		<div>
 			<dt>Voltage band</dt>
-			<dd>{result.voltage_valid ? 'Valid' : `${result.voltage_violations.length} violations`}</dd>
+			<dd>{summary.voltage_valid ? 'Valid' : `${summary.voltage_violation_count} violations`}</dd>
 		</div>
 		<div>
 			<dt>Load voltage range</dt>
-			<dd>{result.min_voltage_pu == null || result.max_voltage_pu == null ? 'n/a' : `${fixed(result.min_voltage_pu)}–${fixed(result.max_voltage_pu)} pu`}</dd>
+			<dd>{summary.min_voltage_pu == null || summary.max_voltage_pu == null ? 'n/a' : `${fixed(summary.min_voltage_pu)}–${fixed(summary.max_voltage_pu)} pu`}</dd>
 		</div>
 		<div>
 			<dt>Source P / Q</dt>
@@ -212,7 +255,7 @@
 			</table>
 		</div>
 		<div class="pagination">
-			<span>{ports.length} connections</span>{#if portPages > 1}<button
+			<span>{portTotal} connections</span>{#if portPages > 1}<button
 					disabled={currentPortPage === 0}
 					onclick={() => (portPage = currentPortPage - 1)}
 					aria-label="Previous currents">Previous</button
@@ -228,28 +271,48 @@
 		<dl>
 			<div>
 				<dt>Maximum KCL residual</dt>
-				<dd>{result.physical_kcl_residual.toExponential(3)} A</dd>
+				<dd>{summary.physical_kcl_residual.toExponential(3)} A</dd>
 			</div>
 			<div>
 				<dt>Scaled KCL residual</dt>
-				<dd>{result.scaled_kcl_residual.toExponential(3)}</dd>
+				<dd>{summary.scaled_kcl_residual.toExponential(3)}</dd>
 			</div>
 			<div>
 				<dt>Voltage change</dt>
-				<dd>{result.voltage_change.toExponential(3)} V</dd>
+				<dd>{summary.voltage_change.toExponential(3)} V</dd>
 			</div>
 			<div>
 				<dt>Matrix size</dt>
-				<dd>{result.matrix_dimension}</dd>
+				<dd>{summary.matrix_dimension}</dd>
 			</div>
 			<div>
 				<dt>Nonzero entries</dt>
-				<dd>{result.matrix_nonzeros}</dd>
+				<dd>{summary.matrix_nonzeros}</dd>
 			</div>
 			<div>
 				<dt>Factorizations</dt>
-				<dd>{result.factorization_count}</dd>
+				<dd>{summary.factorization_count}</dd>
 			</div>
+			{#if timing}
+				<div>
+					<dt>Engine solve</dt>
+					<dd>{ms(timing.engine_ms)}</dd>
+				</div>
+				<div>
+					<dt>Transfer and parse</dt>
+					<dd>
+						{ms(
+							timing.engine_ms === null
+								? null
+								: timing.round_trip_ms - timing.engine_ms + timing.parse_ms
+						)}
+					</dd>
+				</div>
+				<div>
+					<dt>Total update</dt>
+					<dd>{ms(timing.total_ms)}</dd>
+				</div>
+			{/if}
 		</dl>
 		<p>
 			Voltage is measured to ground. Net current is the injection into the network. The calculation

package/dist/components/McResults.svelte.d.ts

@@ -1,6 +1,12 @@
-import type { McPfResult, DistGraph } from '@tellegen/engine';
+import { type DistGraph, type McPfDetail, type McPfDetailQuery, type McPfResult, type McPfSummary } from '@tellegen/engine';
+import type { McEditTiming } from '../state.svelte.js';
 type $$ComponentProps = {
-    result: McPfResult;
+    /** A live session's summary, or a stored full result. */
+    result: McPfSummary | McPfResult;
+    /** Fetches one bus's terminals and a page of equipment ports. A full
+     * `result` serves its own pages when this is omitted. */
+    detail?: (query: McPfDetailQuery) => Promise<McPfDetail | null>;
+    timing?: McEditTiming | null;
     elapsedMs: number | null;
     selectedBus: string | null;
     selectedEdge: string | null;

package/dist/components/ModelDetails.svelte

@@ -138,7 +138,7 @@
     display: grid;
     gap: 6px;
     margin: 12px 0;
-    font-size: 11px;
+    font-size: 13px;
   }
   input {
     min-width: 0;
@@ -158,7 +158,7 @@
   table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 10px;
+    font-size: 12px;
   }
   caption {
     text-align: left;
@@ -194,7 +194,7 @@
     justify-content: space-between;
     gap: 8px;
     margin: 10px 0;
-    font-size: 10px;
+    font-size: 12px;
     color: var(--text-secondary);
   }
   button {
@@ -218,13 +218,13 @@
   }
   .references {
     margin-top: 12px;
-    font-size: 10px;
+    font-size: 12px;
   }
   .references dl > div {
     grid-template-columns: 42px minmax(0, 1fr);
   }
   code {
     overflow-wrap: anywhere;
-    font: 10px/1.5 var(--font-mono);
+    font: 12px/1.5 var(--font-mono);
   }
 </style>

package/dist/components/MulticonductorDetails.svelte

@@ -306,7 +306,7 @@
 
 	.tag {
 		margin: 0 0 10px;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-secondary);
 		letter-spacing: 0;
 		text-transform: uppercase;
@@ -353,7 +353,7 @@
 		background: color-mix(in srgb, var(--tc) 26%, transparent);
 		color: var(--ink);
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: 13px;
 	}
 
 	.term.grounded {
@@ -377,7 +377,7 @@
 		border-radius: 3px;
 		background: var(--bc);
 		color: #fff;
-		font-size: 10px;
+		font-size: 12px;
 		letter-spacing: 0;
 	}
 
@@ -389,7 +389,7 @@
 
 	.load-editor h4 {
 		margin: 0 0 8px;
-		font-size: 11px;
+		font-size: 13px;
 	}
 
 	.load-row {
@@ -404,7 +404,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
-		font-size: 9px;
+		font-size: 12px;
 		color: var(--text-secondary);
 	}
 
@@ -412,11 +412,11 @@
 		min-width: 0;
 		width: 100%;
 		box-sizing: border-box;
-		font: 10px var(--font-mono);
+		font: 12px var(--font-mono);
 	}
 
 	.load-row button {
-		font-size: 9px;
+		font-size: 12px;
 	}
 
 	/* The global stylesheet's .legend is the 6px color-ramp strip; its height
@@ -426,7 +426,7 @@
 		flex-direction: column;
 		gap: 4px;
 		margin-top: 12px;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-secondary);
 	}
 
@@ -469,7 +469,7 @@
 
 	.footnote {
 		margin: 8px 0 0;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-tertiary);
 		letter-spacing: 0;
 	}

package/dist/components/NotificationCenter.svelte

@@ -12,14 +12,16 @@
 	const observed = new WeakSet<object>();
 	$effect(() => {
 		const message = app.error;
+		const detail = app.errorDetail;
 		const revision = app.errorRevision;
 		const retry = app.errorRetry;
 		if (message)
 			untrack(() =>
 				notices.push({
 					kind: 'error',
-					title: errorNoticeTitle(message),
-					details: message,
+					// A message with its own detail is already written for people.
+					title: detail ? message : errorNoticeTitle(message),
+					details: detail ?? message,
 					retry: () => ctrl.retryError(),
 					canRetry: () =>
 						app.errorRevision === revision && app.error === message && app.errorRetry === retry

package/dist/components/PanelCard.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { tick } from 'svelte';
-	import { getPanelLayout, type PanelRegistration, type PanelSide } from '../panels.svelte.js';
+	import {
+		focusFirst,
+		getPanelLayout,
+		type PanelRegistration,
+		type PanelSide
+	} from '../panels.svelte.js';
 	let {
 		panel,
 		floating = false,
@@ -12,6 +17,7 @@
 	} = $props();
 	const layout = getPanelLayout();
 	let menu = $state(false);
+	let menuAnchor: HTMLDivElement | undefined = $state();
 	let card: HTMLElement;
 	const bounds = $derived(layout.bounds(panel));
 	const preferred = $derived(!floating && !mobile && layout.preferred(panel));
@@ -86,11 +92,40 @@
 	}
 	async function close() {
 		const title = panel.title;
+		const position = layout.position(panel);
+		const dock = position === 'floating' ? panel.side : position;
+		const opener = layout.opener(panel);
 		layout.close(panel);
 		await tick();
-		document
-			.querySelector<HTMLElement>(`.panel-toolbar button[aria-label="${CSS.escape(title)}"]`)
-			?.focus();
+		// The toolbar button for the panel; a host without the toolbar gets the
+		// control that opened it, else the panel's dock (the drawer when narrow).
+		focusFirst([
+			document.querySelector<HTMLElement>(
+				`.panel-toolbar button[aria-label="${CSS.escape(title)}"]`
+			),
+			opener,
+			document.querySelector<HTMLElement>(`[data-panel-dock="${dock}"], [data-panel-drawer]`)
+		]);
+	}
+	// Keyboard users can scroll an overflowing panel only through focus, so the
+	// content becomes a labelled, focusable region exactly while it overflows.
+	let overflowing = $state(false);
+	function trackOverflow(content: HTMLElement) {
+		const sync = () => (overflowing = content.scrollHeight > content.clientHeight + 1);
+		const resize = new ResizeObserver(sync);
+		const observe = () => {
+			resize.disconnect();
+			resize.observe(content);
+			for (const child of content.children) resize.observe(child);
+			sync();
+		};
+		const children = new MutationObserver(observe);
+		children.observe(content, { childList: true });
+		observe();
+		return () => {
+			resize.disconnect();
+			children.disconnect();
+		};
 	}
 </script>
 
@@ -98,6 +133,9 @@
 	onkeydown={(event) => {
 		if (event.key === 'Escape') menu = false;
 	}}
+	onpointerdown={(event) => {
+		if (menu && !menuAnchor?.contains(event.target as Node)) menu = false;
+	}}
 />
 <aside
 	bind:this={card}
@@ -127,7 +165,7 @@
 			>
 		{/if}
 		<div class="header-actions">{@render panel.headerActions?.()}</div>
-		{#if !mobile}<div class="menu-anchor">
+		{#if !mobile}<div class="menu-anchor" bind:this={menuAnchor}>
 				<button
 					class="icon"
 					aria-label={`${panel.title} panel options`}
@@ -150,7 +188,7 @@
 					</div>{/if}
 			</div>{/if}
 		<button
-			class="icon"
+			class="icon close"
 			aria-label={`Close ${panel.title.toLowerCase()} panel`}
 			title="Close panel"
 			onclick={close}
@@ -160,7 +198,18 @@
 			>
 		</button>
 	</header>
-	<div class="panel-content">{@render panel.children()}</div>
+	<!-- A scroll container must take focus for keyboard scrolling, and this one
+		 takes it only while it overflows. -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		class="panel-content"
+		{@attach trackOverflow}
+		tabindex={overflowing ? 0 : undefined}
+		role={overflowing ? 'region' : undefined}
+		aria-label={overflowing ? `${panel.title} panel content` : undefined}
+	>
+		{@render panel.children()}
+	</div>
 	{#if floating}<button
 			class="resize"
 			aria-label={`Resize ${panel.title} panel`}
@@ -238,6 +287,19 @@
 	.icon svg {
 		fill: currentColor;
 	}
+	/* Coarse pointers: a 44px hit area around the 26x28 close button. The
+	   pseudo-element reaches into the header padding and the gap, so nothing
+	   moves. */
+	@media (pointer: coarse) {
+		.close {
+			position: relative;
+		}
+		.close::after {
+			content: '';
+			position: absolute;
+			inset: -8px -10px -8px -8px;
+		}
+	}
 	.header-actions {
 		display: flex;
 		align-items: center;
@@ -258,6 +320,9 @@
 		flex-direction: column;
 		border-radius: 0 0 5px 5px;
 	}
+	.panel-content:focus-visible {
+		outline-offset: -2px;
+	}
 	.menu-anchor {
 		position: relative;
 	}

package/dist/components/PanelHost.svelte

@@ -4,6 +4,12 @@
 	import { getPanelLayout } from '../panels.svelte.js';
 	import { getNoticeCenter } from '../notices.svelte.js';
 	import PanelCard from './PanelCard.svelte';
+
+	// The dock insets come from `--tellegen-dock-left/right/bottom` on an
+	// ancestor (defaults 20px, 20px, 100px), so a custom shell with its own
+	// rail or status bar can move the docks without restyling them.
+	let { showToolbar = true }: { showToolbar?: boolean } = $props();
+
 	const app = getAppState();
 	const layout = getPanelLayout();
 	const notices = getNoticeCenter();
@@ -55,43 +61,59 @@
 	onpointerup={() => layout.finishGesture()}
 	onpointercancel={() => layout.finishGesture()}
 />
-<div class="panel-toolbar" style:top="{toolbarTop}px" aria-label="Panels">
-	<div class="panel-buttons">
-		{#each layout.ordered().filter((p) => p.side === 'left') as panel (panel.id)}
-			<button
-				aria-label={panel.title}
-				aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
-				onclick={() => layout.toggle(panel)}>{panel.title}</button
-			>
-		{/each}
-	</div>
-	<div class="panel-buttons right">
-		{#each layout.ordered().filter((p) => p.side === 'right') as panel (panel.id)}
+{#if showToolbar}
+	<div class="panel-toolbar" style:top="{toolbarTop}px" aria-label="Panels">
+		<div class="panel-buttons">
+			{#each layout.ordered().filter((p) => p.side === 'left') as panel (panel.id)}
+				<button
+					aria-label={panel.title}
+					aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
+					onclick={() => layout.toggle(panel)}>{panel.title}</button
+				>
+			{/each}
+		</div>
+		<div class="panel-buttons right">
+			{#each layout.ordered().filter((p) => p.side === 'right') as panel (panel.id)}
+				<button
+					aria-label={panel.title}
+					aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
+					onclick={() => layout.toggle(panel)}>{panel.title}</button
+				>
+			{/each}
 			<button
-				aria-label={panel.title}
-				aria-pressed={layout.compact ? layout.drawer === panel.id : panel.open}
-				onclick={() => layout.toggle(panel)}>{panel.title}</button
+				class="reset-layout"
+				onclick={() => layout.reset()}
+				title="Restore the default panel positions">Reset layout</button
 			>
-		{/each}
-		<button
-			class="reset-layout"
-			onclick={() => layout.reset()}
-			title="Restore the default panel positions">Reset layout</button
-		>
+		</div>
 	</div>
-</div>
+{/if}
 {#if layout.storageError}<p class="layout-error" role="status" style:top="{panelTop}px">
 		{layout.storageError}
 	</p>{/if}
+<!-- The docks and the drawer take focus (tabindex -1) when a closed panel has
+	 no toolbar button or opener to hand it back to. The drawer stays rendered,
+	 at zero height, while no panel is open in it. -->
 {#if layout.compact}
-	{#if drawer}<div class="drawer" style:bottom="{bottomReserve}px" style:height="{drawerHeight}px">
-			<PanelCard panel={drawer} mobile />
-		</div>{/if}
+	<div
+		class="drawer"
+		data-panel-drawer
+		role="region"
+		aria-label="Panels"
+		tabindex="-1"
+		style:bottom="{bottomReserve}px"
+		style:height="{drawer ? drawerHeight : 0}px"
+	>
+		{#if drawer}<PanelCard panel={drawer} mobile />{/if}
+	</div>
 {:else}
 	<div
 		class="dock left"
-		style:bottom="{Math.max(100, bottomReserve)}px"
+		style:bottom="max(var(--tellegen-dock-bottom, 100px), {bottomReserve}px)"
 		data-panel-dock="left"
+		role="region"
+		aria-label="Left panels"
+		tabindex="-1"
 		style:top="{panelTop}px"
 		style:width="{layout.dockWidth('left')}px"
 	>
@@ -99,8 +121,11 @@
 	</div>
 	<div
 		class="dock right"
-		style:bottom="{Math.max(100, bottomReserve)}px"
+		style:bottom="max(var(--tellegen-dock-bottom, 100px), {bottomReserve}px)"
 		data-panel-dock="right"
+		role="region"
+		aria-label="Right panels"
+		tabindex="-1"
 		style:top="{panelTop}px"
 		style:width="{layout.dockWidth('right')}px"
 	>
@@ -113,8 +138,8 @@
 	.panel-toolbar {
 		position: fixed;
 		z-index: 30;
-		left: 20px;
-		right: 20px;
+		left: var(--tellegen-dock-left, 20px);
+		right: var(--tellegen-dock-right, 20px);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -159,7 +184,7 @@
 	.dock {
 		position: fixed;
 		z-index: 25;
-		bottom: 100px;
+		bottom: var(--tellegen-dock-bottom, 100px);
 		display: flex;
 		flex-direction: column;
 		align-items: stretch;
@@ -167,10 +192,10 @@
 		pointer-events: none;
 	}
 	.dock.left {
-		left: 20px;
+		left: var(--tellegen-dock-left, 20px);
 	}
 	.dock.right {
-		right: 20px;
+		right: var(--tellegen-dock-right, 20px);
 	}
 	.drawer {
 		position: fixed;
@@ -194,8 +219,8 @@
 	}
 	@media (max-width: 960px) {
 		.panel-toolbar {
-			left: 12px;
-			right: 12px;
+			left: var(--tellegen-dock-left, 12px);
+			right: var(--tellegen-dock-right, 12px);
 			gap: 6px;
 		}
 		.panel-buttons {

package/dist/components/PanelHost.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const PanelHost: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    showToolbar?: boolean;
+};
+declare const PanelHost: import("svelte").Component<$$ComponentProps, {}, "">;
 type PanelHost = ReturnType<typeof PanelHost>;
 export default PanelHost;

package/dist/components/PlacementCue.svelte

@@ -21,7 +21,7 @@
 		border-radius: 3px;
 		color: var(--text-accent);
 		font-size: 11px;
-		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.1);
+		box-shadow: var(--elev-cue);
 		pointer-events: none;
 	}