@fjader/svelte 0.2.2 → 0.2.4

package/dist/interactors/Interval1D.svelte

@@ -62,7 +62,8 @@
 	);
 
 	const brushHandle: SourceHandle = filterGroup.register(source, {
-		excludeMarkIds: () => new Set(chart.config.entries.keys()),
+		// Its own chart is not filtered by it (crossfilter).
+		chart: chart.config,
 		activeDims: () => {
 			const scale = getScale();
 			if (!scale || !columnRef) return [];
@@ -96,7 +97,12 @@
 			column: typeof resolvedField === 'string' ? resolvedField : (resolvedField?.toString() ?? ''),
 			label: typeof resolvedField === 'string' ? resolvedField : resolvedField?.toString(),
 			values: value ? [(value as number[])[0], (value as number[])[1]] : []
-		})
+		}),
+		// The clause was removed from outside (clearAll, a filter pill): take the
+		// rectangle down too, which only this control holds.
+		onCleared: () => {
+			if (brush.active) clearBrush();
+		}
 	});
 
 	// Pointer state (reused to avoid GC)

package/dist/interactors/Interval2D.svelte

@@ -54,7 +54,8 @@
 		state instanceof LinearScaleState ? state.domain.target : (scale.domain() as [number, number]);
 
 	const brushHandle: SourceHandle = filterGroup.register(source, {
-		excludeMarkIds: () => new Set(chart.config.entries.keys()),
+		// Its own chart is not filtered by it (crossfilter).
+		chart: chart.config,
 		activeDims: () => {
 			if (!xColumnRef || !yColumnRef) return [];
 			return [
@@ -96,7 +97,12 @@
 			yColumn: resolvedYField,
 			xValues: (value as unknown[][])?.[0],
 			yValues: (value as unknown[][])?.[1]
-		})
+		}),
+		// The clause was removed from outside (clearAll, a filter pill): take the
+		// rectangle down too, which only this control holds.
+		onCleared: () => {
+			if (brush.active) clearBrush();
+		}
 	});
 
 	// Pointer state (reused to avoid GC)

package/dist/interactors/ParallelAxisSource.svelte

@@ -37,7 +37,8 @@
 		filterGroup: FilterGroup;
 		column: string;
 		chartId: string;
-		excludeMarkIds: () => Set<string>;
+		/** The chart the brush skips, or null for a chart that filters its own lines. */
+		chart: object | null;
 		/** The axis's scale state now: removing another column renumbers the axes. */
 		scaleState: () => LinearScaleState | null;
 		/** The axes' pixel extent (the chart's inner height). */
@@ -47,13 +48,12 @@
 	}
 
 	// Keyed by column in the parent, so none of these change for an instance.
-	const { filterGroup, column, chartId, excludeMarkIds, scaleState, pixelExtent, axes }: Props =
-		$props();
+	const { filterGroup, column, chartId, chart, scaleState, pixelExtent, axes }: Props = $props();
 
 	const columnRef = sqlColumn(column);
 
 	const handle = filterGroup.register(`parallel-brush-${column}-${chartId}`, {
-		excludeMarkIds,
+		chart,
 		activeDims: () => {
 			const state = scaleState();
 			if (!state) return [];
@@ -83,7 +83,16 @@
 			column,
 			label: column,
 			values: value ? [(value as number[])[0], (value as number[])[1]] : []
-		})
+		}),
+		// The clause was removed from outside (clearAll, a filter pill): take this
+		// axis's rectangle down too, which only ParallelBrushes' state holds.
+		onCleared: () => {
+			const axis = axes.get(column);
+			if (!axis) return;
+			axis.brush.clear();
+			axis.lastEmitted.min = null;
+			axis.lastEmitted.max = null;
+		}
 	});
 
 	axes.set(column, { handle, brush: new BrushState1D(), lastEmitted: { min: null, max: null } });

package/dist/interactors/ParallelAxisSource.svelte.d.ts

@@ -31,7 +31,8 @@ interface Props {
     filterGroup: FilterGroup;
     column: string;
     chartId: string;
-    excludeMarkIds: () => Set<string>;
+    /** The chart the brush skips, or null for a chart that filters its own lines. */
+    chart: object | null;
     /** The axis's scale state now: removing another column renumbers the axes. */
     scaleState: () => LinearScaleState | null;
     /** The axes' pixel extent (the chart's inner height). */

package/dist/interactors/ParallelBrushes.svelte

@@ -19,9 +19,9 @@
 	interface Props {
 		/** Filter group name — selects which FilterGroup these brushes write to. */
 		selection?: string;
-		/** When true, the parallel chart excludes itself from its own brush filters
-		 *  (standard crossfilter behavior). When false (default), brushes self-filter
-		 *  the chart — typical for parallel coordinates. */
+		/** When true, the brushes skip their own chart (standard crossfilter
+		 *  behavior). When false (default), they filter it — typical for parallel
+		 *  coordinates. */
 		cross?: boolean;
 	}
 
@@ -105,11 +105,10 @@
 		return Math.min(30, (chart.innerWidth / (ps.columns.length - 1)) * 0.35);
 	});
 
-	// Cross-filter: when cross=true, exclude chart's own marks (standard crossfilter).
-	// When cross=false (default for parallel coords), empty set — all marks self-filter.
-	const excludeMarkIds = cross
-		? () => new Set(chart.config.entries.keys())
-		: () => new Set<string>();
+	// Cross-filter: with cross=true the brushes skip their own chart (standard
+	// crossfilter). With cross=false, the default for parallel coordinates, the
+	// chart filters its own lines.
+	const skips = cross ? chart.config : null;
 
 	/** An axis's scale state, looked up by column: removing a column renumbers the axes. */
 	function scaleStateOf(col: string): LinearScaleState | null {
@@ -344,7 +343,7 @@
 			{filterGroup}
 			column={col}
 			chartId={chart.chartId}
-			{excludeMarkIds}
+			chart={skips}
 			scaleState={() => scaleStateOf(col)}
 			pixelExtent={() => chart.innerHeight}
 			{axes}

package/dist/interactors/ParallelBrushes.svelte.d.ts

@@ -1,9 +1,9 @@
 interface Props {
     /** Filter group name — selects which FilterGroup these brushes write to. */
     selection?: string;
-    /** When true, the parallel chart excludes itself from its own brush filters
-     *  (standard crossfilter behavior). When false (default), brushes self-filter
-     *  the chart — typical for parallel coordinates. */
+    /** When true, the brushes skip their own chart (standard crossfilter
+     *  behavior). When false (default), they filter it — typical for parallel
+     *  coordinates. */
     cross?: boolean;
 }
 declare const ParallelBrushes: import("svelte").Component<Props, {}, "">;

package/dist/interactors/Toggle.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { getContext, onDestroy } from 'svelte';
 	import type { ChartContext } from '../types';
-	import type { ScaleRegistry } from '../scales/ScaleRegistry.svelte';
-	import type { ActiveValueScale, ToggleHandle } from '../query-engine/FilterGroup.svelte';
+	import type { ToggleHandle } from '../query-engine/FilterGroup.svelte';
 	import type { FilterGroupRegistry } from '../query-engine/FilterGroupRegistry.svelte';
 	import type { BandScaleState } from '../scales/BandScaleState.svelte';
 	import BandLabelToggle from './BandLabelToggle.svelte';
@@ -16,9 +15,10 @@
 	 * - Band axis label: toggles the axis's own source field, whatever the
 	 *   declared field is. Labels are a ready-made category picker.
 	 *
-	 * Toggles on different fields AND together. The source chart is excluded
-	 * from its own toggles (crossfilter semantics) and dims instead via scale
-	 * active-value projection; other charts in the filter group filter.
+	 * Toggles on different fields AND together. The chart skips its own toggles
+	 * (crossfilter): its marks that read the toggled field dim, the rest keep
+	 * their data. Elsewhere in the group, marks that read the field dim and the
+	 * rest filter.
 	 */
 
 	interface Props {
@@ -32,33 +32,18 @@
 	const filterGroups = getContext<FilterGroupRegistry>('filter-groups');
 	const filterGroup = filterGroups.get(selection);
 	const chart = getContext<ChartContext>('chart');
-	const scaleRegistry = getContext<ScaleRegistry>('scale-registry');
 
 	// Normalize field to array for multi-column support
 	const fields = Array.isArray(field) ? field : [field];
 	const declaredField = fields.length === 1 ? fields[0] : null;
 
-	/** Marks in this chart — excluded so the source dims rather than filters. */
-	const excludeMarkIds = () => new Set(chart.config.entries.keys());
-
-	/** Scales keyed by the toggled field: its color scale and any band scale
-	 *  whose source column is that field. Never a band scale for another field. */
-	function scalesFor(toggleField: string): ActiveValueScale[] {
-		const out: ActiveValueScale[] = [];
-		const color = scaleRegistry?.getScaleByField(toggleField, 'color');
-		if (color) out.push(color as unknown as ActiveValueScale);
-		for (const axis of ['x', 'y'] as const) {
-			if (chart.scaleTypes?.[axis] !== 'band') continue;
-			const band = chart[`${axis}ScaleState`] as BandScaleState | null | undefined;
-			if (band && band.sourceField === toggleField) out.push(band as unknown as ActiveValueScale);
-		}
-		return out;
-	}
+	/**
+	 * This chart skips its own toggles (crossfilter): its marks keyed by the
+	 * toggled field dim, the rest keep their data.
+	 */
+	const skips = chart.config;
 
-	const declared = filterGroup.registerToggle(fields, {
-		excludeMarkIds,
-		scales: () => (declaredField ? scalesFor(declaredField) : [])
-	});
+	const declared = filterGroup.registerToggle(fields, { chart: skips });
 	chart.activators.add(declared.activate);
 
 	/** One BandLabelToggle per band axis field (see bandFieldsOf). */
@@ -85,15 +70,37 @@
 	function bandCategoryAt(
 		axis: 'x' | 'y',
 		innerPos: number
-	): { field: string; value: unknown } | null {
+	): { field: string; value: unknown; otherId: number | null } | null {
 		if (chart.scaleTypes?.[axis] !== 'band') return null;
 		const bandState = chart[`${axis}ScaleState`] as BandScaleState;
 		const extent = axis === 'x' ? chart.innerWidth : chart.innerHeight;
 		const slot = bandState.invertScreenToData(innerPos, extent, axis === 'y');
 		if (slot == null) return null;
 		const id = bandState.idAtSlot(slot);
-		const value = id == null ? null : (bandState.categoryAt(id) ?? null);
-		return value == null ? null : { field: bandState.sourceField, value };
+		// undefined is "no category here"; null is the NULL category, a real one.
+		const value = id == null ? undefined : bandState.categoryAt(id);
+		if (value === undefined) return null;
+		// The axis's Other bucket: its label is no value, so the click selects
+		// what it holds instead.
+		const otherId = id != null && id === bandState.otherId ? id : null;
+		return { field: bandState.sourceField, value, otherId };
+	}
+
+	/**
+	 * The Other bucket an inner click hit, or null: the hit row's band id on an
+	 * axis of the declared field, when it is that axis's Other. The label in
+	 * the row can't say, so the tooltip keeps the raw id beside it.
+	 */
+	function otherHit(point: Record<string, unknown>): number | null {
+		if (!declaredField) return null;
+		for (const axis of ['x', 'y'] as const) {
+			if (chart.scaleTypes?.[axis] !== 'band') continue;
+			const bandState = chart[`${axis}ScaleState`] as BandScaleState;
+			if (bandState.sourceField !== declaredField) continue;
+			const id = point[axis === 'x' ? '__bandIdX' : '__bandIdY'];
+			if (typeof id === 'number' && id === bandState.otherId) return id;
+		}
+		return null;
 	}
 
 	chart.onChartClick = (event) => {
@@ -105,8 +112,15 @@
 		// Path 1: Inner area click — use tooltip hit data (don't require visible —
 		// pointer micro-movement during click hides tooltip but data stays valid)
 		if (xInBounds && yInBounds && tm?.currentPoint) {
+			const otherId = otherHit(tm.currentPoint);
+			if (otherId !== null) {
+				const facetId = tm.currentPoint.__facetId;
+				declared.toggleOther(otherId, typeof facetId === 'number' ? facetId : null, isMulti);
+				return;
+			}
 			const tuple = fields.map((f) => tm.currentPoint![f]);
-			if (tuple.some((v) => v == null)) return;
+			// A missing field is undefined; null is the NULL category, selectable.
+			if (tuple.some((v) => v === undefined)) return;
 			declared.toggle(tuple, isMulti);
 			return;
 		}
@@ -119,7 +133,9 @@
 					? bandCategoryAt('x', innerPoint.x)
 					: null;
 		if (hit) {
-			toggleFor(hit.field)?.toggle([hit.value], isMulti);
+			const toggle = toggleFor(hit.field);
+			if (hit.otherId !== null) toggle?.toggleOther(hit.otherId, null, isMulti);
+			else toggle?.toggle([hit.value], isMulti);
 			return;
 		}
 
@@ -139,11 +155,5 @@
 </script>
 
 {#each bandFields as bandField (bandField)}
-	<BandLabelToggle
-		{filterGroup}
-		field={bandField}
-		{excludeMarkIds}
-		scales={() => scalesFor(bandField)}
-		handles={bandToggles}
-	/>
+	<BandLabelToggle {filterGroup} field={bandField} chart={skips} handles={bandToggles} />
 {/each}

package/dist/interactors/Toggle.svelte.d.ts

@@ -6,9 +6,10 @@
  * - Band axis label: toggles the axis's own source field, whatever the
  *   declared field is. Labels are a ready-made category picker.
  *
- * Toggles on different fields AND together. The source chart is excluded
- * from its own toggles (crossfilter semantics) and dims instead via scale
- * active-value projection; other charts in the filter group filter.
+ * Toggles on different fields AND together. The chart skips its own toggles
+ * (crossfilter): its marks that read the toggled field dim, the rest keep
+ * their data. Elsewhere in the group, marks that read the field dim and the
+ * rest filter.
  */
 interface Props {
     /** Filter group name — selects which FilterGroup this toggle writes to. */

package/dist/interactors/Tooltip.svelte

@@ -2,8 +2,12 @@
   Tooltip.svelte - Display component for data tooltips.
 
   Reads from TooltipManager (via context) and renders a floating tooltip
-  at the cursor position. Uses CSS anchor positioning for automatic
-  edge-aware placement.
+  at the cursor. It is a manual popover, so it paints in the top layer and no
+  overflow, scroll area, stacking context or transformed ancestor clips it. It
+  stays in the chart's DOM, so inherited theme variables and scoped styles still
+  apply. Placed in viewport pixels with the `translate` property (no layout per
+  move), flipped and clamped against the viewport, and measured by a
+  ResizeObserver rather than by reading its size.
 
   Always renders one point at a time (stable layout). When multiple
   points match, colored dots appear at the bottom and the user can
@@ -12,7 +16,9 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { format as d3format } from 'd3-format';
+	import { categoryLabel } from '../query-engine/categorical-identity';
 	import type { ChartContext, ContinuousScaleState } from '../types';
+	import { otherTooltipRows } from './other-tooltip';
 
 	const commaFormat = d3format(',.4~g');
 
@@ -35,40 +41,76 @@
 	let colorField = $derived(tm?.currentColorField ?? null);
 	let channelFields = $derived(tm?.currentChannelFields ?? null);
 	let displayFields = $derived(tm?.currentDisplayFields ?? null);
-	let px = $derived(tm?.pointerScreenX ?? 0);
-	let py = $derived(tm?.pointerScreenY ?? 0);
+	let px = $derived(tm?.pointerClientX ?? 0);
+	let py = $derived(tm?.pointerClientY ?? 0);
 
-	// High-water mark for tooltip width — grows but never shrinks.
-	let tooltipEl: HTMLDivElement;
+	// The tooltip's size, from a ResizeObserver: read after the browser's own
+	// layout, so measuring forces none. Its width is a high-water mark (grows,
+	// never shrinks) so it does not jitter between points: content wider than
+	// min-width makes the observed width exceed it, and min-width follows.
 	let minWidth = $state(0);
 	let tooltipW = $state(0);
 	let tooltipH = $state(0);
 
-	$effect(() => {
-		// Dependencies: re-measure when focused point or index changes
-		void point;
-		void focusedIndex;
-		if (!visible || !tooltipEl) return;
-		const prev = tooltipEl.style.minWidth;
-		tooltipEl.style.minWidth = '0px';
-		const natural = tooltipEl.offsetWidth;
-		tooltipEl.style.minWidth = prev;
-		if (natural > minWidth) minWidth = natural;
-		tooltipW = tooltipEl.offsetWidth;
-		tooltipH = tooltipEl.offsetHeight;
-	});
+	function measure(el: HTMLElement) {
+		const observer = new ResizeObserver((entries) => {
+			const box = entries[entries.length - 1].borderBoxSize[0];
+			// A closed popover is display: none and reports 0: keep the last size.
+			if (box.inlineSize === 0) return;
+			tooltipW = box.inlineSize;
+			tooltipH = box.blockSize;
+			if (box.inlineSize > minWidth) minWidth = box.inlineSize;
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}
+
+	// The viewport, without the scrollbars. Read when the tooltip opens and on
+	// resize, never per move.
+	let viewW = $state(0);
+	let viewH = $state(0);
+	function readViewport() {
+		const root = document.documentElement;
+		viewW = root.clientWidth;
+		viewH = root.clientHeight;
+	}
+
+	// Open in the top layer while shown; closed again once it has faded out, so a
+	// page of charts keeps at most the hovered one's tooltip there.
+	function popover(el: HTMLElement) {
+		if (visible && !el.matches(':popover-open')) {
+			readViewport();
+			el.showPopover();
+		}
+	}
+	function handleTransitionEnd(event: TransitionEvent) {
+		const el = event.currentTarget as HTMLElement;
+		if (event.propertyName === 'opacity' && !visible && el.matches(':popover-open')) {
+			el.hidePopover();
+		}
+	}
 
-	// Flip when tooltip would overflow chart bounds, with hysteresis to prevent jitter
+	// Left of the cursor when it fits, else right; below it, else above. With
+	// hysteresis so it does not jitter at the edge. Then clamped into the viewport,
+	// for a tooltip that fits on neither side.
 	const GAP = 12;
 	const HYSTERESIS = 40;
-	let flippedX = $state(true);
-	let flippedY = $state(false);
-	$effect(() => {
+	const MARGIN = 8;
+	let leftOfCursor = true;
+	let aboveCursor = false;
+	const flippedX = $derived.by(() => {
 		const spaceLeft = px - tooltipW - GAP;
-		flippedX = spaceLeft >= 0 && (!flippedX ? spaceLeft >= HYSTERESIS : true);
-		const spaceY = chart.height - py - tooltipH;
-		flippedY = spaceY < 0 || (flippedY && spaceY < HYSTERESIS);
+		leftOfCursor = spaceLeft >= 0 && (leftOfCursor || spaceLeft >= HYSTERESIS);
+		return leftOfCursor;
 	});
+	const flippedY = $derived.by(() => {
+		const spaceBelow = viewH - py - tooltipH;
+		aboveCursor = spaceBelow < 0 || (aboveCursor && spaceBelow < HYSTERESIS);
+		return aboveCursor;
+	});
+	const clamp = (v: number, max: number) => Math.max(MARGIN, Math.min(v, max - MARGIN));
+	const left = $derived(clamp(flippedX ? px - tooltipW - GAP : px + GAP, viewW - tooltipW));
+	const top = $derived(clamp(flippedY ? py - tooltipH + 4 : py - 4, viewH - tooltipH));
 
 	// Transform origin: corner nearest the anchor point
 	let originX = $derived(flippedX ? '100%' : '0%');
@@ -94,7 +136,8 @@
 		if (!point) return [];
 		if (displayFields) return displayFields.filter((k) => k in point);
 		if (fields) return fields.filter((k) => k in point);
-		return Object.keys(point);
+		// Keys starting with `_` are kept for clicks (a band's raw id), never shown.
+		return Object.keys(point).filter((k) => !k.startsWith('_'));
 	});
 
 	// Scale-aware formatters for numeric values (same as MarginLabel)
@@ -109,6 +152,14 @@
 			: null
 	);
 
+	// An Other bar's rows, after the point's own: written with the value axis's format.
+	let otherRows = $derived.by(() => {
+		const stats = tm?.focusedOtherStats;
+		if (!stats || !point) return [];
+		const format = ('__bandIdX' in point ? yFormat : xFormat) ?? commaFormat;
+		return otherTooltipRows(stats, format);
+	});
+
 	function formatValue(key: string, value: unknown) {
 		if (formatters[key]) return formatters[key](value);
 		if (typeof value === 'number') {
@@ -117,25 +168,28 @@
 			if (fmt) return fmt(value);
 			return commaFormat(value);
 		}
-		return String(value);
+		return String(categoryLabel(value));
 	}
 
 	const channelIcons: Record<string, string> = { x: '\u2192', y: '\u2191' };
 
-	// Computed style values — kept here so Prettier can't break them by line-wrapping
-	const translateX = $derived(flippedX ? 'calc(-100% - 12px)' : '12px');
-	const translateY = $derived(flippedY ? 'calc(-100% + 4px)' : '-4px');
-	const translate = $derived(`${translateX} ${translateY}`);
+	// Computed style values — kept here so Prettier can't break them by line-wrapping.
+	// `translate`, not `transform` or left/top: it moves the box without layout, and
+	// it applies after `scale`, so the pop-in scales about the box's own corner.
+	const translate = $derived(`${left}px ${top}px`);
 	const transformOrigin = $derived(`${originX} ${originY}`);
 </script>
 
-<!-- Tooltip positioned via JS with flip detection -->
+<svelte:window onresize={readViewport} />
+
+<!-- In the top layer, placed in viewport pixels with flip detection -->
 <div
 	class="tooltip"
 	class:visible
-	bind:this={tooltipEl}
-	style:left="{px}px"
-	style:top="{py}px"
+	popover="manual"
+	{@attach measure}
+	{@attach popover}
+	ontransitionend={handleTransitionEnd}
 	style:translate
 	style:transform-origin={transformOrigin}
 	style:min-width="{minWidth}px"
@@ -154,6 +208,12 @@
 			</span>
 		</div>
 	{/each}
+	{#each otherRows as row (row.key)}
+		<div class="row">
+			<span class="key">{row.key}</span>
+			<span class="value">{row.value}</span>
+		</div>
+	{/each}
 	<div class="dots" class:show={isMulti}>
 		{#each matched as m, i (i)}
 			<span
@@ -167,24 +227,53 @@
 
 <style>
 	.tooltip {
-		position: absolute;
-		background: var(--fjader-tooltip-bg, rgba(0, 0, 0, 0.88));
-		color: var(--fjader-tooltip-text, #ffffff);
+		/* A popover in the top layer: fixed to the viewport at its origin, placed by
+		   translate. Resets the UA popover box (inset, margin, border, overflow). */
+		position: fixed;
+		inset: 0 auto auto 0;
+		margin: 0;
+		border: 0;
+		overflow: visible;
+		/* Colours, highest first: the app's --fjader-tooltip-bg/-text; the mode a
+		   data-fjader-tooltip ancestor picks; contrast. light-dark() resolves against
+		   the color-scheme the tooltip inherits from the chart's DOM ancestors. */
+		background: var(
+			--fjader-tooltip-bg,
+			var(--_fjader-tooltip-bg, light-dark(rgba(0, 0, 0, 0.88), rgba(255, 255, 255, 0.92)))
+		);
+		color: var(--fjader-tooltip-text, var(--_fjader-tooltip-text, light-dark(#ffffff, #111827)));
 		padding: 6px 10px;
 		border-radius: 4px;
 		font-family: var(--fjader-font, system-ui, sans-serif);
 		font-size: 12px;
 		line-height: 1.4;
 		pointer-events: none;
-		z-index: 1000;
 		white-space: nowrap;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+		box-shadow:
+			0 0 0 1px var(--_fjader-tooltip-ring, transparent),
+			0 2px 8px rgba(0, 0, 0, 0.25);
 		opacity: 0;
 		scale: 0.78;
 		transition:
 			opacity 100ms ease-out,
 			scale 200ms cubic-bezier(0.34, 1.3, 0.64, 1);
-		will-change: opacity, scale;
+		will-change: opacity, scale, translate;
+	}
+
+	/* The mode, set on any ancestor (the page, a panel, a chart through ChartContainer's
+	   tooltipScheme): custom properties inherit, so the nearest one wins. `contrast` is
+	   the opposite of the scheme, `follow` the same, with a ring to separate it from a
+	   background of its own colour. */
+	:global([data-fjader-tooltip='contrast']) {
+		--_fjader-tooltip-bg: light-dark(rgba(0, 0, 0, 0.88), rgba(255, 255, 255, 0.92));
+		--_fjader-tooltip-text: light-dark(#ffffff, #111827);
+		--_fjader-tooltip-ring: transparent;
+	}
+
+	:global([data-fjader-tooltip='follow']) {
+		--_fjader-tooltip-bg: light-dark(rgba(255, 255, 255, 0.96), rgba(31, 41, 55, 0.96));
+		--_fjader-tooltip-text: light-dark(#111827, #f9fafb);
+		--_fjader-tooltip-ring: light-dark(rgba(17, 24, 39, 0.1), rgba(255, 255, 255, 0.12));
 	}
 
 	.tooltip.visible {
@@ -192,6 +281,15 @@
 		scale: 1;
 	}
 
+	/* Opening the popover takes it out of display: none, which runs no transition:
+	   start the pop-in from the hidden look. */
+	@starting-style {
+		.tooltip.visible {
+			opacity: 0;
+			scale: 0.78;
+		}
+	}
+
 	.row {
 		display: flex;
 		gap: 8px;

package/dist/interactors/TooltipManager.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { OtherRowStats } from '../components/marks/lifecycle/other-rows.svelte';
 import type { QueryEngine } from '../query-engine/QueryEngine';
 import type { D3Scale, ScaleStateInstance } from '../types';
 import type { DimValue } from '../query-engine/categorical-identity';
@@ -50,6 +51,11 @@ interface TooltipMarkRegistration {
     };
     constantRadius?: number;
     displayFields?: string[] | null;
+    /**
+     * What an Other bar's point holds, for the tooltip to add its rows; read at
+     * display time, so a selection that changes under the pointer shows at once.
+     */
+    otherStats?: (point: DataRow) => OtherRowStats | null;
     proximityAxis: 'x' | 'y' | 'xy';
     enabled: boolean;
 }
@@ -83,11 +89,13 @@ export declare class TooltipManager {
     currentChannelFields: Record<string, string> | null;
     currentDisplayFields: string[] | null;
     visible: boolean;
-    pointerScreenX: number;
-    pointerScreenY: number;
+    pointerClientX: number;
+    pointerClientY: number;
     matchedRadius: number | null;
     get focusedPoint(): DataRow | null;
     get focusedMatch(): MatchedPoint | null;
+    /** The focused point's Other numbers, or null where it is not an Other bar. */
+    get focusedOtherStats(): OtherRowStats | null;
     get currentPoint(): DataRow | null;
     get currentColor(): string | null;
     get matchedScreenX(): number | null;
@@ -97,6 +105,12 @@ export declare class TooltipManager {
      * Update the cursor's data-space position. Called directly from pointer move handler.
      */
     updatePosition(xData: number | null, yData: number | null): void;
+    /**
+     * Run the hover query again at the last position, if the pointer is still
+     * in the chart: a mark's tooltip table was rewritten under a still pointer,
+     * so the row it shows is the old data's. The next frame runs it.
+     */
+    refresh(): void;
     /**
      * Cycle the focused point index by delta. Wraps around.
      * Remembers the focused category so it persists across cursor moves.
@@ -121,10 +135,11 @@ export declare class TooltipManager {
      */
     get currentMarkLOD(): MarkLODSurface | null;
     /**
-     * Update raw screen position for tooltip positioning.
-     * Called from chart container's pointer move handler.
+     * The pointer's viewport (client) position, where the tooltip is placed: it
+     * renders in the top layer, outside the chart's clipping ancestors. Called from
+     * the chart's pointer move handler.
      */
-    updatePointerScreen(x: number, y: number): void;
+    updatePointerClient(x: number, y: number): void;
     /**
      * Called once per animation frame by GPUCoordinator's render loop.
      */