@heyramzi/ui 3.0.0 → 3.2.0

package/src/charts/area-chart.svelte

@@ -23,6 +23,7 @@
 	import { resolveEdgeFade } from "./edge-fade.js";
 	import Figure from "./figure.svelte";
 	import HoverFocus from "./hover-focus.svelte";
+	import { dualAxis } from "./dual-axis.js";
 	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
 	import { valueTick } from "./primitives/chart-utils.js";
 	import Reveal from "./reveal.svelte";
@@ -44,6 +45,11 @@
 		key: keyof TData & string;
 		label?: string;
 		color?: string;
+		/**
+		 * `"right"` plots the series on a second value axis with its own scale, for a measure in a
+		 * different unit or about 10x larger than the rest. It draws as a line, without the fill.
+		 */
+		axis?: "left" | "right";
 	};
 
 	interface Props {
@@ -68,8 +74,15 @@
 		xTicks?: number;
 		/** A target drawn across the plot, like the deal a cost runs up to. */
 		reference?: ChartReference;
-		/** The headline while no point is hovered, like a period total. Defaults to the last point. */
-		resting?: { value: number; label: string };
+		/**
+		 * The headline while no point is hovered, like a period total. Defaults to the last point.
+		 * `values`, keyed by series, shows one figure per series side by side in its colour, so it also reads as the legend.
+		 */
+		resting?: {
+			value?: number;
+			values?: Partial<Record<keyof TData & string, number>>;
+			label: string;
+		};
 		/** Smooths the drawn line by the window shown; the resting figure stays the caller's total. */
 		smoothing?: Smoothing;
 		/** The chart's accessible name. Its data range and values are read after it. */
@@ -146,11 +159,14 @@
 					key: s.key,
 					label: s.label ?? s.key,
 					color: s.color ?? `var(--chart-series-${(i % 6) + 1})`,
+					axis: s.axis === "right" ? ("right" as const) : ("left" as const),
 				}))
 			: yKey
-				? [{ key: yKey, label: yKey, color }]
+				? [{ key: yKey, label: yKey, color, axis: "left" as const }]
 				: [],
 	);
+	const leftSeries = $derived(series.filter((s) => s.axis === "left"));
+	const rightSeries = $derived(series.filter((s) => s.axis === "right"));
 	const smoothed = $derived(
 		smoothing
 			? smoothSeries(
@@ -167,12 +183,41 @@
 	const averageLabel = $derived(mode === "rolling" ? averageName(smoothed.window) : null);
 	const dataMax = $derived.by(() => {
 		if (stacked) {
-			return Math.max(0, ...data.map((d) => series.reduce((s, k) => s + Number(d[k.key] ?? 0), 0)));
+			return Math.max(
+				0,
+				...data.map((d) => leftSeries.reduce((s, k) => s + Number(d[k.key] ?? 0), 0)),
+			);
 		}
-		return Math.max(0, ...data.flatMap((d) => series.map((s) => Number(d[s.key] ?? 0))));
+		return Math.max(0, ...data.flatMap((d) => leftSeries.map((s) => Number(d[s.key] ?? 0))));
 	});
 	// A target above every point would sit off the plot.
 	const yMax = $derived(Math.max(dataMax, reference?.value ?? 0));
+	// A right-axis series lives on the chart's one y scale, rescaled so its domain fills the same
+	// height; the right axis labels that height in the series' own unit.
+	const axes = $derived.by(() => {
+		if (rightSeries.length === 0) return null;
+		const rightMax = Math.max(
+			0,
+			...data.flatMap((d) => rightSeries.map((s) => Number(d[s.key] ?? 0))),
+		);
+		return dualAxis(yMax, rightMax);
+	});
+	const plotKey = (s: { key: string; axis: "left" | "right" }) =>
+		s.axis === "right" ? `__hr_right_${s.key}` : s.key;
+	const plotData = $derived.by((): TData[] => {
+		if (!axes) return data;
+		const factor = axes.left.max / axes.right.max;
+		return data.map((d) => {
+			const row: Record<string, unknown> = { ...d };
+			// A gap stays a gap: null times a factor would draw a 0.
+			for (const s of rightSeries)
+				row[plotKey(s)] = d[s.key] == null ? null : Number(d[s.key]) * factor;
+			return row as TData;
+		});
+	});
+	// An axis takes its series' colour only when one series owns it; with two on a side the colour would name one of them.
+	const leftTone = $derived(axes && leftSeries.length === 1 ? leftSeries[0].color : undefined);
+	const rightTone = $derived(rightSeries.length === 1 ? rightSeries[0].color : undefined);
 	const curve = $derived(smooth ? curveMonotoneX : undefined);
 	const fade = $derived(resolveEdgeFade(edgeFade));
 	const fadeMask = $derived(fade > 0 ? `url(#${uid}-fade)` : undefined);
@@ -206,7 +251,16 @@
 <!-- WHY: leaving only resets the hover readout; the keyboard path is ChartPlot's. -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="hr-area-chart {className ?? ''}" onpointerleave={() => (active = null)}>
-	{#if resting && !active && series[0]}
+	{#if resting?.values && !active}
+		<Figure
+			series={series
+				.filter((s) => resting.values?.[s.key] != null)
+				.map((s) => ({ value: Number(resting.values?.[s.key]), label: s.label, color: s.color }))}
+			eyebrow={resting.label}
+			format={formatValue}
+			size="md"
+		/>
+	{:else if resting && resting.value != null && !active && series[0]}
 		<Figure
 			series={[{ value: resting.value, label: series[0].label, color: series[0].color }]}
 			eyebrow={resting.label}
@@ -226,21 +280,43 @@
 			<div class="empty"><p>No data</p></div>
 		{:else}
 			<Chart
-				{data}
+				data={plotData}
 				x={xKey}
-				y={series[0]?.key}
-				yDomain={[0, yMax || 1]}
-				yNice
-				padding={{ left: 48, bottom: 28, top: 8, right: 12 }}
+				y={series[0] ? plotKey(series[0]) : undefined}
+				yDomain={[0, axes ? axes.left.max : yMax || 1]}
+				yNice={!axes}
+				padding={{ left: 48, bottom: 28, top: 8, right: axes ? 48 : 12 }}
 				tooltipContext={{ mode: "quadtree-x" }}
 				motion={DOMAIN_MOTION}
 				bind:context
 			>
 				<Svg aria-hidden="true">
-					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
+					<g class="hr-axis-tone" style:--hr-axis-tone={leftTone}>
+						<Axis
+							placement="left"
+							format={(v) => tick(Number(v))}
+							ticks={axes ? axes.left.ticks : 4}
+						/>
+					</g>
+					{#if axes}
+						<g class="hr-axis-tone" style:--hr-axis-tone={rightTone}>
+							<Axis
+								placement="right"
+								domain={[0, axes.right.max]}
+								format={(v) => tick(Number(v))}
+								ticks={axes.right.ticks}
+							/>
+						</g>
+					{/if}
 					<Axis placement="bottom" format={(v) => formatX(v)} ticks={ticksForWidth(xTicks)} />
 					<g class="hr-area-grid">
-						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />
+						<Axis
+							placement="left"
+							grid
+							rule={false}
+							ticks={axes ? axes.left.ticks : 4}
+							format={() => ""}
+						/>
 					</g>
 					{#if fade > 0}
 						<EdgeFade id="{uid}-fade" amount={fade} />
@@ -261,17 +337,39 @@
 								<!-- WHY `y1` and not `y`: layerchart's Area has no `y` prop, so every
 							     series drew the first series' shape and the gradients stacked on
 							     one path. See `Area.shared.svelte.js`. -->
-								<Area y1={s.key} {curve} fill="url(#{uid}-{i})" mask={fadeMask} />
-								<Spline y={s.key} {curve} style="stroke: {s.color}; fill: none" stroke-width="2" />
+								{#if s.axis === "left"}
+									<Area y1={s.key} {curve} fill="url(#{uid}-{i})" mask={fadeMask} />
+								{/if}
+								<Spline
+									y={plotKey(s)}
+									{curve}
+									style="stroke: {s.color}; fill: none"
+									stroke-width="2"
+								/>
 							{/each}
 						</Reveal>
 						{#snippet segment()}
 							{#each series as s (s.key)}
-								<Spline y={s.key} {curve} style="stroke: {s.color}; fill: none" stroke-width="2" />
+								<Spline
+									y={plotKey(s)}
+									{curve}
+									style="stroke: {s.color}; fill: none"
+									stroke-width="2"
+								/>
 							{/each}
 						{/snippet}
 					</HoverFocus>
-					<Highlight points lines={{ style: `stroke: url(#${uid}-cross)` }} />
+					{#if axes}
+						<!-- WHY `data`: without it Highlight places dots from the tooltip's raw values, off the rescaled right series. -->
+						<Highlight lines={{ style: `stroke: url(#${uid}-cross)` }} />
+						{#if context?.tooltip.data}
+							{#each series as s (s.key)}
+								<Highlight data={context.tooltip.data} y={plotKey(s)} points={{ fill: s.color }} />
+							{/each}
+						{/if}
+					{:else}
+						<Highlight points lines={{ style: `stroke: url(#${uid}-cross)` }} />
+					{/if}
 				</Svg>
 				<Tooltip.Root x="data" y={TOOLTIP_TOP} xOffset={TOOLTIP_GAP}>
 					{#snippet children({ data: d })}

package/src/charts/area-chart.svelte.d.ts

@@ -11,6 +11,11 @@ declare function $$render<TData extends Record<string, unknown>>(): {
             key: keyof TData & string;
             label?: string;
             color?: string;
+            /**
+             * `"right"` plots the series on a second value axis with its own scale, for a measure in a
+             * different unit or about 10x larger than the rest. It draws as a line, without the fill.
+             */
+            axis?: "left" | "right";
         }[];
         color?: string;
         height?: number;
@@ -25,9 +30,13 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         xTicks?: number;
         /** A target drawn across the plot, like the deal a cost runs up to. */
         reference?: ChartReference;
-        /** The headline while no point is hovered, like a period total. Defaults to the last point. */
+        /**
+         * The headline while no point is hovered, like a period total. Defaults to the last point.
+         * `values`, keyed by series, shows one figure per series side by side in its colour, so it also reads as the legend.
+         */
         resting?: {
-            value: number;
+            value?: number;
+            values?: Partial<Record<keyof TData & string, number>>;
             label: string;
         };
         /** Smooths the drawn line by the window shown; the resting figure stays the caller's total. */

package/src/charts/chart-tokens.css

@@ -4,8 +4,8 @@
    `@heyramzi/ui/charts/dashboard` keeps its card edge without the barrel. */
 
 @layer components {
-  /* Shared chart tokens, held at zero specificity by `:where()`. The reveal pair
-     is the entrance every chart shares; motion.ts mirrors its duration. */
+  /* Shared chart tokens, held at zero specificity by `:where()`. The tooltip portals to
+     `body`, outside its chart, so it is listed for its series dots to match the lines. */
   :where(
     .hr-area-chart,
     .hr-bar-chart,
@@ -17,7 +17,8 @@
     .hr-ts-chart,
     .hr-donut-chart,
     .hr-ring,
-    .hr-gauge
+    .hr-gauge,
+    .lc-tooltip-container
   ) {
     /* Series palette: brand, then hues round the wheel, blue and orange first for colour
        blindness. Each is pulled 15% toward the text, clearing 3:1 on the card in both themes. */

package/src/charts/dashboard/data-table.svelte

@@ -43,9 +43,11 @@
 	 */
 	import { cn } from "../../lib/utils.js";
 	import RatingChip from "./rating-chip.svelte";
+	import Hint from "./hint.svelte";
 	import {
 		Pagination,
 		SortableHead,
+		TableSkeleton,
 		paginateRows,
 		totalPages,
 		type SortState,
@@ -127,6 +129,18 @@
 	});
 
 	const visible = $derived(pageSize ? paginateRows(sorted, page, pageSize) : sorted);
+
+	// Placeholder rows hold the 40px of a lead cell's padding, touch or not, and the rule sits
+	// outside it as before. Each cell keeps its column's padding, rule and breakpoint.
+	const loadingCell = "box-content h-10 any-pointer-coarse:h-10";
+	const loadingColumns = $derived([
+		{ width: "w-2/3", class: cn("px-4", loadingCell) },
+		...columns.map((column) => ({
+			width: "w-3/4",
+			align: column.align === "start" ? ("left" as const) : ("right" as const),
+			class: cn(columnClass(column), loadingCell),
+		})),
+	]);
 	const opens = $derived(Boolean(rowHref || onRowClick));
 
 	// Fewer rows than the page you stand on would draw an empty table.
@@ -182,96 +196,82 @@
 					<th
 						scope="col"
 						class={cn(column.align === "start" ? dataThClass : dataThNumClass, columnClass(column))}
-						title={column.hint}
 					>
-						{column.label}
+						<Hint text={column.hint}>{column.label}</Hint>
 					</th>
 				{/if}
 			{/each}
 		</tr>
 	</thead>
-	<tbody>
-		{#if loading}
-			{#each { length: LOADING_ROWS }, index (index)}
-				<tr class={dataTrClass} aria-hidden="true">
-					<td class={cn(dataTdClass, "py-3")}>
-						<span class="block h-4 w-2/3 animate-pulse rounded bg-muted"></span>
-					</td>
-					{#each columns as column (column.key)}
-						<td class={cn(dataTdNumClass, columnClass(column), "align-middle")}>
-							<span
-								class={cn(
-									"block h-4 w-3/4 animate-pulse rounded bg-muted",
-									column.align !== "start" && "ml-auto",
-								)}
-							></span>
-						</td>
-					{/each}
+	{#if loading}
+		<TableSkeleton rows={LOADING_ROWS} columns={loadingColumns} rowClass={dataTrClass} />
+	{:else}
+		<tbody>
+			{#if visible.length === 0 && empty}
+				<tr>
+					<td colspan={columns.length + 1}>{@render empty()}</td>
 				</tr>
-			{/each}
-		{:else if visible.length === 0 && empty}
-			<tr>
-				<td colspan={columns.length + 1}>{@render empty()}</td>
-			</tr>
-		{:else}
-			{#each visible as row (rowKey(row))}
-				<tr class={cn(dataTrClass, "group", opens && "relative cursor-pointer")}>
-					<td class={cn(dataTdClass, "py-3")}>
-						{#if rowHref}
-							<a href={rowHref(row)} class={stretch}>{@render lead(row)}</a>
-						{:else if onRowClick}
-							<button type="button" class={stretch} onclick={() => onRowClick(row)}>
-								{@render lead(row)}
-							</button>
-						{:else}
-							{@render lead(row)}
-						{/if}
-					</td>
-					{#each columns as column (column.key)}
-						<td
-							class={cn(
-								dataTdNumClass,
-								columnClass(column),
-								"align-middle whitespace-nowrap",
-								column.strong && "font-medium",
-								isMuted(column, row) && "text-muted-foreground",
-								column.negative?.(row) && "text-destructive-ink",
-							)}
-							title={column.title?.(row)}
-						>
-							{#if column.cell}
-								{@render column.cell(row)}
-							{:else if column.rating}
-								{@const rating = column.rating(row)}
-								{#if rating}
-									<RatingChip grade={rating.grade} hint={rating.hint} />
-								{:else}
-									<span class="text-muted-foreground">{emptyLabel}</span>
-								{/if}
+			{:else}
+				{#each visible as row (rowKey(row))}
+					<tr class={cn(dataTrClass, "group", opens && "relative cursor-pointer")}>
+						<td class={cn(dataTdClass, "py-3")}>
+							{#if rowHref}
+								<a href={rowHref(row)} class={stretch}>{@render lead(row)}</a>
+							{:else if onRowClick}
+								<button type="button" class={stretch} onclick={() => onRowClick(row)}>
+									{@render lead(row)}
+								</button>
 							{:else}
-								{@const value = column.value?.(row) ?? null}
-								{#if value === null}
-									<span class="text-muted-foreground">{emptyLabel}</span>
-								{:else if column.bar}
-									<span class="flex items-center justify-end gap-3">
-										<span class="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
-											<span
-												class="block h-full origin-left rounded-full bg-primary/70"
-												style:transform="scaleX({Math.min(1, Math.max(0, column.bar(row)))})"
-											></span>
-										</span>
-										<span>{value}</span>
-									</span>
-								{:else}
-									{value}
-								{/if}
+								{@render lead(row)}
 							{/if}
 						</td>
-					{/each}
-				</tr>
-			{/each}
-		{/if}
-	</tbody>
+						{#each columns as column (column.key)}
+							<td
+								class={cn(
+									dataTdNumClass,
+									columnClass(column),
+									"align-middle whitespace-nowrap",
+									column.strong && "font-medium",
+									isMuted(column, row) && "text-muted-foreground",
+									column.negative?.(row) && "text-destructive-ink",
+								)}
+							>
+								<Hint text={column.title?.(row)} class="block">
+									{#if column.cell}
+										{@render column.cell(row)}
+									{:else if column.rating}
+										{@const rating = column.rating(row)}
+										{#if rating}
+											<RatingChip grade={rating.grade} hint={rating.hint} />
+										{:else}
+											<span class="text-muted-foreground">{emptyLabel}</span>
+										{/if}
+									{:else}
+										{@const value = column.value?.(row) ?? null}
+										{#if value === null}
+											<span class="text-muted-foreground">{emptyLabel}</span>
+										{:else if column.bar}
+											<span class="flex items-center justify-end gap-3">
+												<span class="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
+													<span
+														class="block h-full origin-left rounded-full bg-primary/70"
+														style:transform="scaleX({Math.min(1, Math.max(0, column.bar(row)))})"
+													></span>
+												</span>
+												<span>{value}</span>
+											</span>
+										{:else}
+											{value}
+										{/if}
+									{/if}
+								</Hint>
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	{/if}
 </table>
 {#if pageSize && !loading}
 	<Pagination {page} {pageSize} total={sorted.length} onPageChange={(next) => (page = next)} />

package/src/charts/dashboard/hint.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	// A span whose `text` shows as a tooltip on hover and on focus. A native title never
+	// showed on focus, so the keyboard never reached it.
+	import type { Snippet } from "svelte";
+	import * as Tooltip from "../../shadcn/tooltip/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	interface Props {
+		/** Left out, the span is plain and takes no focus. */
+		text?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { text, class: className, children }: Props = $props();
+</script>
+
+{#if text}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				<span
+					{...props}
+					class={cn("rounded-xs outline-none focus-visible:shadow-(--ring-focus)", className)}
+				>
+					{@render children()}
+				</span>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content>{text}</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	<span class={className}>{@render children()}</span>
+{/if}

package/src/charts/dashboard/hint.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Left out, the span is plain and takes no focus. */
+    text?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/dashboard/rating-chip.svelte

@@ -2,6 +2,7 @@
 	// One A to E grade on the shared tone scale, so a C means one thing everywhere.
 	import { TONE_TINT, type Tone } from "../../lib/tone.js";
 	import { cn } from "../../lib/utils.js";
+	import Hint from "./hint.svelte";
 
 	interface Props {
 		grade: string;
@@ -21,13 +22,13 @@
 	};
 </script>
 
-<span
+<Hint
+	text={hint}
 	class={cn(
 		"inline-flex h-6 min-w-6 items-center justify-center rounded-md px-1.5 text-xs font-semibold tabular-nums",
 		TONE_TINT[GRADE_TONE[grade] ?? "neutral"],
 		className,
 	)}
-	title={hint}
 >
 	{grade}
-</span>
+</Hint>

package/src/charts/dual-axis.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vite-plus/test";
+import { dualAxis, niceStep } from "./dual-axis.js";
+
+describe("niceStep", () => {
+  it("rounds up to 1, 2, 2.5 or 5 times a power of ten", () => {
+    expect(niceStep(40)).toBe(50);
+    expect(niceStep(1500)).toBe(2000);
+    expect(niceStep(2100)).toBe(2500);
+    expect(niceStep(0.3)).toBeCloseTo(0.5);
+    expect(niceStep(0)).toBe(1);
+  });
+});
+
+describe("dualAxis", () => {
+  it("gives clicks and impressions the same number of grid lines", () => {
+    const { left, right } = dualAxis(160, 6000);
+    expect(left).toEqual({ max: 200, ticks: [0, 50, 100, 150, 200] });
+    expect(right).toEqual({ max: 8000, ticks: [0, 2000, 4000, 6000, 8000] });
+  });
+
+  it("keeps every point inside both domains", () => {
+    for (const [l, r] of [
+      [7, 9_999],
+      [123_456, 3],
+      [1, 1],
+      [0.42, 87],
+    ]) {
+      const { left, right } = dualAxis(l, r);
+      expect(left.max).toBeGreaterThanOrEqual(l);
+      expect(right.max).toBeGreaterThanOrEqual(r);
+      expect(left.ticks.length).toBe(right.ticks.length);
+    }
+  });
+
+  it("draws one interval for an empty series instead of dividing by zero", () => {
+    const { left, right } = dualAxis(0, 0);
+    expect(left.ticks).toEqual([0, 1]);
+    expect(right.ticks).toEqual([0, 1]);
+  });
+});

package/src/charts/dual-axis.ts

@@ -0,0 +1,43 @@
+/**
+ * Two value axes that share one set of grid lines.
+ *
+ * A right axis with its own nice ticks lands its labels between the left axis's grid lines, so a
+ * reader can't trace either. Both axes here get the same number of intervals: the left picks a nice
+ * step for its data, and the right picks the smallest nice step that fits its data in that many.
+ */
+
+export type AxisScale = { max: number; ticks: number[] };
+
+const NICE = [1, 2, 2.5, 5, 10];
+
+/** The smallest 1, 2, 2.5 or 5 times a power of ten that is at least `raw`. */
+export function niceStep(raw: number): number {
+  if (!(raw > 0) || !Number.isFinite(raw)) return 1;
+  const power = 10 ** Math.floor(Math.log10(raw));
+  // WHY the epsilon: 0.3 / 0.1 is 2.9999999999999996, which would skip 3 x 0.1 for the next step.
+  const multiple = NICE.find((m) => m * power >= raw * (1 - 1e-9)) ?? 10;
+  return multiple * power;
+}
+
+function ticksOf(step: number, count: number): number[] {
+  // Rounded so 0.1 x 3 reads 0.3 on the axis, not 0.30000000000000004.
+  return Array.from({ length: count + 1 }, (_, i) => Number((i * step).toPrecision(12)));
+}
+
+/**
+ * Left and right domains from 0, with the same tick count so both axes sit on one grid.
+ * `target` is the number of intervals wanted; the left data may round it to one more or less.
+ */
+export function dualAxis(
+  leftMax: number,
+  rightMax: number,
+  target = 4,
+): { left: AxisScale; right: AxisScale } {
+  const leftStep = niceStep(Math.max(0, leftMax) / target);
+  const count = Math.max(1, Math.ceil(Math.max(0, leftMax) / leftStep - 1e-9));
+  const rightStep = niceStep(Math.max(0, rightMax) / count);
+  return {
+    left: { max: leftStep * count, ticks: ticksOf(leftStep, count) },
+    right: { max: rightStep * count, ticks: ticksOf(rightStep, count) },
+  };
+}

package/src/charts/legend.css

@@ -39,13 +39,10 @@
     align-items: center;
     gap: 0.5rem 0.625rem;
     padding: 0.375rem 0.5rem;
-    border: 0;
     border-radius: 0.5rem;
     background: transparent;
-    font: inherit;
     color: var(--foreground);
     text-align: left;
-    cursor: pointer;
     transition:
       background 160ms ease,
       opacity 160ms ease;
@@ -57,11 +54,6 @@
     padding: 0.25rem 0.375rem;
   }
 
-  .hr-legend-item:focus-visible {
-    background: var(--muted);
-    outline: none;
-  }
-
   @media (hover: hover) and (pointer: fine) {
     .hr-legend-item:hover {
       background: var(--muted);