@heyramzi/ui 2.23.0 → 3.0.0

package/src/charts/line-chart.svelte

@@ -14,7 +14,10 @@
 		Spline,
 		Svg,
 		Tooltip,
+		type ChartState,
 	} from "layerchart";
+	import { chartTable } from "./chart-a11y.js";
+	import ChartPlot from "./chart-plot.svelte";
 	import { curveMonotoneX } from "d3-shape";
 	import Crosshair from "./crosshair.svelte";
 	import EdgeFade from "./edge-fade.svelte";
@@ -22,6 +25,7 @@
 	import Figure from "./figure.svelte";
 	import HoverFocus from "./hover-focus.svelte";
 	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import { valueTick } from "./primitives/chart-utils.js";
 	import Reveal from "./reveal.svelte";
 
 	// =========================
@@ -57,6 +61,8 @@
 		dashArray?: string;
 		formatValue?: (v: number) => string;
 		formatX?: (v: unknown) => string;
+		/** The chart's accessible name. Its data range and values are read after it. */
+		label?: string;
 		class?: string;
 	}
 
@@ -77,6 +83,7 @@
 		dashArray = "5 4",
 		formatValue = (v) => v.toLocaleString(),
 		formatX = (v) => String(v),
+		label = "Line chart",
 		class: className,
 	}: Props = $props();
 
@@ -84,6 +91,7 @@
 	// STATE
 	// =========================
 	let active = $state<TData | null>(null);
+	let context = $state<ChartState<TData>>();
 
 	// ========================= FUNCTIONS ========================= WHY: called from the tooltip header's value expression so it re-runs on every active-point change; an unread {@const} side effect only evaluates once.
 
@@ -95,6 +103,15 @@
 		return formatX(d[xKey]);
 	}
 
+	function step(i: number | null) {
+		if (i === null) {
+			context?.tooltip.hide();
+			active = null;
+			return;
+		}
+		context?.tooltip.show({ data: data[i] });
+	}
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -119,15 +136,7 @@
 	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
 	const display = $derived(active ?? fallback);
 
-	// A long tick label ("1,000,000") falls back to "1M" so the left gutter holds it.
-	const compact = new Intl.NumberFormat(undefined, {
-		notation: "compact",
-		maximumFractionDigits: 1,
-	});
-	function valueTick(v: number): string {
-		const full = formatValue(v);
-		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
-	}
+	const tick = $derived(valueTick(formatValue));
 	// WHY: a dashed tail is two splines sharing the boundary point so the solid
 	// and dashed segments meet without a gap.
 	const hasTail = $derived(
@@ -140,52 +149,59 @@
 			? series.map((s) => ({ value: Number(display[s.key]), label: s.label, color: s.color }))
 			: null,
 	);
+	const table = $derived(
+		chartTable(
+			data,
+			(d) => formatX(d[xKey]),
+			series.map((s) => ({ label: s.label, value: (d: TData) => d[s.key] })),
+			formatValue,
+			{ xLabel: xKey },
+		),
+	);
 </script>
 
 <!-- =========================== -->
 <!-- LINE CHART -->
 <!-- =========================== -->
-<div
-	class="hr-line-chart {className ?? ''}"
-	role="img"
-	aria-label="Line chart"
-	onpointerleave={() => (active = null)}
->
+<!-- WHY: leaving only resets the hover readout; the keyboard path is ChartPlot's. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="hr-line-chart {className ?? ''}" onpointerleave={() => (active = null)}>
 	{#if figureRows && display}
 		<Figure series={figureRows} eyebrow={formatX(display[xKey])} format={formatValue} size="md" />
 	{:else}
 		<Figure value="—" eyebrow="Latest" size="md" />
 	{/if}
 
-	<div class="hr-chart-body" style:height="{height}px">
-		{#snippet strokes(s: (typeof series)[number])}
-			{#if hasTail}
-				<Spline
-					data={solidData}
-					y={s.key}
-					{curve}
-					style="stroke: {s.color}; fill: none"
-					stroke-width="2"
-					stroke-linecap="round"
-				/>
-				<Spline
-					data={tailData}
-					y={s.key}
-					{curve}
-					style="stroke: {s.color}; fill: none"
-					stroke-width="2"
-					stroke-dasharray={dashArray}
-				/>
-			{:else}
-				<Spline
-					y={s.key}
-					{curve}
-					style="stroke: {s.color}; fill: none"
-					stroke-width="2"
-					stroke-linecap="round"
-				/>
-			{/if}
-		{/snippet}
+	{#snippet strokes(s: (typeof series)[number])}
+		{#if hasTail}
+			<Spline
+				data={solidData}
+				y={s.key}
+				{curve}
+				style="stroke: {s.color}; fill: none"
+				stroke-width="2"
+				stroke-linecap="round"
+			/>
+			<Spline
+				data={tailData}
+				y={s.key}
+				{curve}
+				style="stroke: {s.color}; fill: none"
+				stroke-width="2"
+				stroke-dasharray={dashArray}
+			/>
+		{:else}
+			<Spline
+				y={s.key}
+				{curve}
+				style="stroke: {s.color}; fill: none"
+				stroke-width="2"
+				stroke-linecap="round"
+			/>
+		{/if}
+	{/snippet}
+
+	<ChartPlot class="hr-chart-body" height="{height}px" {label} {table} onStep={step}>
 		{#if data.length === 0}
 			<div class="empty"><p>No data</p></div>
 		{:else}
@@ -198,9 +214,10 @@
 				padding={{ left: 48, bottom: 28, top: 8, right: 12 }}
 				tooltipContext={{ mode: "bisect-x" }}
 				motion={DOMAIN_MOTION}
+				bind:context
 			>
-				<Svg>
-					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
+				<Svg aria-hidden="true">
+					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} />
 					<g class="hr-line-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />
@@ -263,5 +280,5 @@
 				</Tooltip.Root>
 			</Chart>
 		{/if}
-	</div>
+	</ChartPlot>
 </div>

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

@@ -0,0 +1,53 @@
+import "./chart-tokens.css";
+import "./line-chart.css";
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        data: TData[];
+        xKey: keyof TData & string;
+        yKey?: keyof TData & string;
+        series?: {
+            key: keyof TData & string;
+            label?: string;
+            color?: string;
+        }[];
+        color?: string;
+        height?: number;
+        smooth?: boolean;
+        /**
+         * Softens the left and right ends of the gradient fill instead of cutting them off at the plot edge.
+         */
+        edgeFade?: boolean | number;
+        /** Draw a ring marker at every data point. */
+        showMarkers?: boolean;
+        /** Inclusive index where a dashed "in progress" tail begins (e.g. the latest, still-open period). */
+        dashFromIndex?: number;
+        /** Dash pattern for the tail segment. */
+        dashArray?: string;
+        formatValue?: (v: number) => string;
+        formatX?: (v: unknown) => string;
+        /** The chart's accessible name. Its data range and values are read after it. */
+        label?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<TData extends Record<string, unknown>> = InstanceType<typeof $$Component<TData>>;
+export default $$Component;

package/src/charts/number-chart.css

@@ -1,180 +1,202 @@
+@layer theme, base, components, utilities;
+
 /* Styles for NumberChart. Plain stylesheet (see area-chart.css for why). All
    selectors are already namespaced under `.hr-number-chart`. */
 
-.hr-number-chart {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  min-width: 0;
-  padding: 1rem 1.25rem;
-  border: 0;
-  border-radius: var(--radius-xl);
-  background: var(--card, white);
-  box-shadow: var(--chart-card-shadow);
-  transition: box-shadow var(--chart-motion) var(--chart-ease-out);
-}
-@media (hover: hover) and (pointer: fine) {
-  .hr-number-chart:hover {
-    box-shadow: var(--chart-card-shadow-hover);
+@layer components {
+  .hr-number-chart {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    min-width: 0;
+    padding: 1rem 1.25rem;
+    border: 0;
+    border-radius: var(--radius-xl);
+    background: var(--card, white);
+    box-shadow: var(--chart-card-shadow);
+    transition: box-shadow var(--chart-motion) var(--chart-ease-out);
   }
-}
-/* A band is one panel with hairlines through it, so a figure inside it must bring no
-   edge of its own. */
-.hr-number-chart[data-bare] {
-  padding: 1rem;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-@media (hover: hover) and (pointer: fine) {
-  .hr-number-chart[data-bare]:hover {
+
+  @media (hover: hover) and (pointer: fine) {
+    .hr-number-chart:hover {
+      box-shadow: var(--chart-card-shadow-hover);
+    }
+  }
+
+  /* A band is one panel with hairlines through it, so a figure inside it must bring no
+     edge of its own. */
+  .hr-number-chart[data-bare] {
+    padding: 1rem;
+    border: 0;
+    border-radius: 0;
     box-shadow: none;
   }
-}
 
-.hr-number-label {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin: 0;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.4;
-  color: var(--muted-foreground, oklch(0.5 0.01 286));
-}
-.hr-number-label-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.hr-number-icon {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-}
-/* One label line tall, so a chip on one tile never drops its value below the next tile's. */
-.hr-number-trailing {
-  display: flex;
-  align-items: center;
-  height: 1lh;
-  margin-left: auto;
-  flex: none;
-  font-size: 0.625rem;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .hr-number-chart[data-bare]:hover {
+      box-shadow: none;
+    }
+  }
 
-/* Baseline-aligned and top-anchored, so values sit on one line even when only some
-   figures carry a caption. A delta that doesn't fit drops under the value, never onto it. */
-.hr-number-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.125rem 0.5rem;
-}
+  .hr-number-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--muted-foreground, oklch(0.5 0.01 286));
+  }
 
-/* WHY the heading family and not the body one: a figure is structure, not
-   prose, and tabular digits are what makes a column of them scannable. */
-.hr-number-value {
-  font-family: var(--font-heading, inherit);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.15;
-  letter-spacing: -0.015em;
-  color: var(--foreground, oklch(0.2 0.01 286));
-  min-width: 0;
-}
-.hr-number-chart[data-size="md"] .hr-number-value {
-  font-size: 1.25rem;
-}
-/* WHY the lead figure is size and not colour: the accent is spent on actions,
-   active states, marks and links. A number is none of those. */
-.hr-number-chart[data-size="lg"] .hr-number-value {
-  font-size: 1.5rem;
-}
-/* A loss is the one case where the figure itself carries colour. */
-.hr-number-chart[data-negative] .hr-number-value {
-  color: var(--destructive);
-}
+  .hr-number-label-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.hr-number-delta {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.125rem;
-  flex: none;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--muted-foreground, oklch(0.5 0.01 286));
-}
-.hr-number-delta-text {
-  font-variant-numeric: tabular-nums;
-}
-/* A trend hue measures about 3.5:1 as 12px text, so it's mixed toward the foreground,
-   which works in both themes. */
-.hr-number-delta[data-tone="up"] {
-  color: color-mix(
-    in oklab,
-    var(--stat-up, var(--success, oklch(0.6 0.13 163))) 72%,
-    var(--foreground, oklch(0.2 0.01 286))
-  );
-}
-.hr-number-delta[data-tone="down"] {
-  color: color-mix(
-    in oklab,
-    var(--stat-down, var(--destructive, oklch(0.58 0.22 25))) 72%,
-    var(--foreground, oklch(0.2 0.01 286))
-  );
-}
-.hr-number-delta[data-tone="none"] {
-  color: color-mix(in srgb, var(--muted-foreground, oklch(0.5 0.01 286)) 40%, transparent);
-}
-.hr-number-chart .hr-number-arrow {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex: none;
-}
+  .hr-number-icon {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+  }
 
-.hr-number-track {
-  height: 0.25rem;
-  border-radius: 999px;
-  overflow: hidden;
-  background: color-mix(in srgb, var(--border, oklch(0.92 0.004 286)) 80%, transparent);
-}
-.hr-number-fill {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  /* The share is a scale, not a width, so a change never reflows the card. */
-  transform: scaleX(var(--hr-number-share, 0));
-  transform-origin: left center;
-  /* backwards, not both: once the fill-in ends, the transition owns transform. */
-  animation: hr-number-fill-in var(--chart-motion-slow, 800ms) var(--chart-ease-out, ease) backwards;
-  transition: transform var(--chart-motion, 250ms) var(--chart-ease-out, ease);
-}
-@keyframes hr-number-fill-in {
-  from {
-    transform: scaleX(0);
+  /* One label line tall, so a chip on one tile never drops its value below the next tile's. */
+  .hr-number-trailing {
+    display: flex;
+    align-items: center;
+    height: 1lh;
+    margin-left: auto;
+    flex: none;
+    font-size: 0.625rem;
   }
-}
 
-.hr-number-caption {
-  margin: 0;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  color: var(--muted-foreground, oklch(0.5 0.01 286));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.hr-number-share {
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  color: var(--foreground, oklch(0.2 0.01 286));
-}
+  /* Baseline-aligned and top-anchored, so values sit on one line even when only some
+     figures carry a caption. A delta that doesn't fit drops under the value, never onto it. */
+  .hr-number-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.125rem 0.5rem;
+  }
+
+  /* WHY the heading family and not the body one: a figure is structure, not
+     prose, and tabular digits are what makes a column of them scannable. */
+  .hr-number-value {
+    font-family: var(--font-heading, inherit);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.15;
+    letter-spacing: -0.015em;
+    color: var(--foreground, oklch(0.2 0.01 286));
+    min-width: 0;
+  }
+
+  .hr-number-chart[data-size="md"] .hr-number-value {
+    font-size: 1.25rem;
+  }
+
+  /* WHY the lead figure is size and not colour: the accent is spent on actions,
+     active states, marks and links. A number is none of those. */
+  .hr-number-chart[data-size="lg"] .hr-number-value {
+    font-size: 1.5rem;
+  }
+
+  /* A loss is the one case where the figure itself carries colour. */
+  .hr-number-chart[data-negative] .hr-number-value {
+    color: var(--destructive);
+  }
+
+  .hr-number-delta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    flex: none;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.2;
+    color: var(--muted-foreground, oklch(0.5 0.01 286));
+  }
+
+  .hr-number-delta-text {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A trend hue measures about 3.5:1 as 12px text, so it's mixed toward the foreground,
+     which works in both themes. */
+  .hr-number-delta[data-tone="up"] {
+    color: color-mix(
+      in oklab,
+      var(--stat-up, var(--success, oklch(0.6 0.13 163))) 72%,
+      var(--foreground, oklch(0.2 0.01 286))
+    );
+  }
+
+  .hr-number-delta[data-tone="down"] {
+    color: color-mix(
+      in oklab,
+      var(--stat-down, var(--destructive, oklch(0.58 0.22 25))) 72%,
+      var(--foreground, oklch(0.2 0.01 286))
+    );
+  }
+
+  .hr-number-delta[data-tone="none"] {
+    color: color-mix(in srgb, var(--muted-foreground, oklch(0.5 0.01 286)) 40%, transparent);
+  }
+
+  .hr-number-chart .hr-number-arrow {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex: none;
+  }
+
+  .hr-number-track {
+    height: 0.25rem;
+    border-radius: 999px;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--border, oklch(0.92 0.004 286)) 80%, transparent);
+  }
 
-@media (prefers-reduced-motion: reduce) {
   .hr-number-fill {
-    animation: none;
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    /* The share is a scale, not a width, so a change never reflows the card. */
+    transform: scaleX(var(--hr-number-share, 0));
+    transform-origin: left center;
+    /* backwards, not both: once the fill-in ends, the transition owns transform. */
+    animation: hr-number-fill-in var(--chart-motion-slow, 800ms) var(--chart-ease-out, ease)
+      backwards;
+    transition: transform var(--chart-motion, 250ms) var(--chart-ease-out, ease);
+  }
+
+  .hr-number-caption {
+    margin: 0;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: var(--muted-foreground, oklch(0.5 0.01 286));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .hr-number-share {
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    color: var(--foreground, oklch(0.2 0.01 286));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-number-fill {
+      animation: none;
+    }
+  }
+}
+
+@keyframes hr-number-fill-in {
+  from {
+    transform: scaleX(0);
   }
 }

package/src/charts/number-chart.svelte

@@ -15,6 +15,7 @@
 	// =========================
 	import "./chart-tokens.css";
 	import "./number-chart.css";
+	import "./chart-a11y.css";
 	import { Minus, TrendDown, TrendUp } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
 	import type { Snippet } from "svelte";
@@ -151,15 +152,18 @@
 		{#if move != null}
 			<span class="hr-number-delta" data-tone={tone}>
 				{#if move > 0}
-					<TrendUp class="hr-number-arrow" weight="bold" />
+					<TrendUp aria-hidden="true" class="hr-number-arrow" weight="bold" />
 				{:else}
-					<TrendDown class="hr-number-arrow" weight="bold" />
+					<TrendDown aria-hidden="true" class="hr-number-arrow" weight="bold" />
 				{/if}
-				<span class="hr-number-delta-text">{Math.abs(move).toFixed(0)}%</span>
+				<span class="hr-number-delta-text">
+					<span class="hr-sr-only">{move > 0 ? "up" : "down"}</span>
+					{Math.abs(move).toFixed(0)}%
+				</span>
 			</span>
 		{:else}
 			<span class="hr-number-delta" data-tone="none" aria-hidden="true">
-				<Minus class="hr-number-arrow" />
+				<Minus aria-hidden="true" class="hr-number-arrow" />
 			</span>
 		{/if}
 	</div>