@heyramzi/ui 2.23.0 → 3.0.0

package/src/charts/sparkline.svelte

@@ -4,7 +4,19 @@
 	// =========================
 	import "./chart-tokens.css";
 	import "./sparkline.css";
-	import { Area, Chart, Highlight, LinearGradient, Points, Spline, Svg, Tooltip } from "layerchart";
+	import {
+		Area,
+		Chart,
+		Highlight,
+		LinearGradient,
+		Points,
+		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 Reveal from "./reveal.svelte";
 	import {
@@ -44,6 +56,8 @@
 		formatX?: (v: unknown) => string;
 		/** Smooths the drawn line by the window shown, so a year doesn't draw as a barcode. */
 		smoothing?: Smoothing;
+		/** The accessible name. Its range and values are read after it. Unused when bare. */
+		label?: string;
 		class?: string;
 	}
 
@@ -63,6 +77,7 @@
 		formatValue = (v) => v.toLocaleString(),
 		formatX = (v) => String(v),
 		smoothing,
+		label = "Sparkline",
 		class: className,
 	}: Props = $props();
 
@@ -70,6 +85,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.
 
@@ -78,10 +94,23 @@
 		queueMicrotask(() => {
 			active = d;
 		});
+		return pointLabel(d);
+	}
+
+	function pointLabel(d: TData): string {
 		const x = formatX(d[xKey]);
 		return mode === "weekly" ? weekOf(x) : mode === "rolling" ? averageTo(x, smoothed.window) : x;
 	}
 
+	function step(i: number | null) {
+		if (i === null) {
+			context?.tooltip.hide();
+			active = null;
+			return;
+		}
+		context?.tooltip.show({ data: data[i] });
+	}
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -94,6 +123,18 @@
 	const data = $derived(smoothed.points);
 	const mode = $derived(smoothed.mode);
 	const valueLabel = $derived(mode === "rolling" ? averageLabel(smoothed.window) : String(yKey));
+	const table = $derived(
+		chartTable(
+			data,
+			pointLabel,
+			[{ label: valueLabel, value: (d: TData) => d[yKey] }],
+			formatValue,
+			{
+				xLabel: xKey,
+				empty: NO_DATA,
+			},
+		),
+	);
 	const curve = $derived(smooth ? curveMonotoneX : undefined);
 	// The newest measured point: a gap at the end has no height for the dot to sit at.
 	const last = $derived(data.findLast((d) => d[yKey] != null) ?? null);
@@ -112,21 +153,24 @@
 <!-- =========================== -->
 <!-- SPARKLINE -->
 <!-- =========================== -->
+<!-- WHY: leaving only resets the hover readout; the keyboard path is ChartPlot's. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="hr-sparkline {className ?? ''}"
-	role={bare ? undefined : "img"}
-	aria-label={bare ? undefined : "Sparkline"}
 	aria-hidden={bare ? "true" : undefined}
 	data-bare={bare ? "" : undefined}
 	onpointerleave={() => (active = null)}
 >
 	{#if data.length > 0}
-		<div
+		<ChartPlot
 			class="hr-sparkline-chart"
-			style:height={typeof height === "number" ? `${height}px` : height}
+			height={typeof height === "number" ? `${height}px` : height}
+			{label}
+			{table}
+			onStep={bare ? undefined : step}
 		>
-			<Chart {data} x={xKey} y={yKey} {padding} tooltipContext={{ mode: "bisect-x" }}>
-				<Svg>
+			<Chart {data} x={xKey} y={yKey} {padding} tooltipContext={{ mode: "bisect-x" }} bind:context>
+				<Svg aria-hidden="true">
 					<LinearGradient id={uid} vertical>
 						{#snippet stopsContent()}
 							<stop offset="0%" stop-color={color} stop-opacity="0.38" />
@@ -162,7 +206,7 @@
 					</Tooltip.Root>
 				{/if}
 			</Chart>
-		</div>
+		</ChartPlot>
 		{#if showLast && display}
 			<span class="hr-sparkline-value" style:color>
 				{formatValue(Number(display[yKey]))}

package/src/charts/sparkline.svelte.d.ts

@@ -0,0 +1,51 @@
+import "./chart-tokens.css";
+import "./sparkline.css";
+import { type Smoothing } from "./smoothing.js";
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        data: TData[];
+        xKey: keyof TData & string;
+        yKey: keyof TData & string;
+        color?: string;
+        /** Pixels, or any CSS length such as `calc(30px * var(--scale))`. */
+        height?: number | string;
+        smooth?: boolean;
+        /** Show a dot at the latest point */
+        endCap?: boolean;
+        /** Show the latest value as inline text */
+        showLast?: boolean;
+        /**
+         * Ornament mode: no tooltip, no highlight, no end cap, and the plot runs to the edges of its box.
+         */
+        bare?: boolean;
+        formatValue?: (v: number) => string;
+        /** The tooltip's date. */
+        formatX?: (v: unknown) => string;
+        /** Smooths the drawn line by the window shown, so a year doesn't draw as a barcode. */
+        smoothing?: Smoothing;
+        /** The accessible name. Its range and values are read after it. Unused when bare. */
+        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/stat-card.css

@@ -1,105 +1,123 @@
+@layer theme, base, components, utilities;
+
 /* Styles for StatCard. Plain stylesheet (see area-chart.css for why). All
    selectors are already namespaced under `.hr-stat-card`. */
 
-.hr-stat-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding: 1.25rem 1.5rem;
-  border: 0;
-  border-radius: var(--radius-xl);
-  background: var(--card, white);
-  box-shadow: var(--chart-card-shadow);
-  min-width: 0;
-  /* WHY: clips the edge-to-edge chart to the card's rounded corners. */
-  overflow: hidden;
-  transition: box-shadow var(--chart-motion) var(--chart-ease-out);
-}
-@media (hover: hover) and (pointer: fine) {
-  .hr-stat-card:hover {
-    box-shadow: var(--chart-card-shadow-hover);
+@layer components {
+  .hr-stat-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 1.25rem 1.5rem;
+    border: 0;
+    border-radius: var(--radius-xl);
+    background: var(--card, white);
+    box-shadow: var(--chart-card-shadow);
+    min-width: 0;
+    /* WHY: clips the edge-to-edge chart to the card's rounded corners. */
+    overflow: hidden;
+    transition: box-shadow var(--chart-motion) var(--chart-ease-out);
   }
-}
-/* WHY: a bare figure, not a card. Dropping the chrome avoids a card-in-card
-   when the figure is placed inside another surface, and lets the chart be the
-   whole element. */
-.hr-stat-figure-only {
-  padding: 0;
-  gap: 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-}
 
-/* WHY: the gauge variant sits the figure and a radial gauge side by side
-   instead of bleeding a chart to the bottom edge; no negative margins here. */
-.hr-stat-gauge-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-}
-/* WHY the floor: below the width a gauge and a figure share, the row wraps the
-   gauge to its own line rather than squeezing the figure to nothing. */
-.hr-stat-gauge-row .hr-stat-gauge-figure {
-  flex: 1 1 auto;
-  min-width: 6rem;
-}
-.hr-stat-gauge-row .hr-gauge {
-  flex: 0 0 auto;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .hr-stat-card:hover {
+      box-shadow: var(--chart-card-shadow-hover);
+    }
+  }
 
-/* WHY: the chart bleeds past the card padding to the left/right/bottom edges,
-   matching bklit's edge-to-edge stat-card chart; overflow:hidden on the card
-   clips the corners to the radius. */
-.hr-stat-chart {
-  margin: 0.5rem -1.5rem -1.25rem;
-  width: auto;
-}
-.hr-stat-figure-only .hr-stat-chart {
-  margin: 0;
-}
+  /* WHY: a bare figure, not a card. Dropping the chrome avoids a card-in-card
+     when the figure is placed inside another surface, and lets the chart be the
+     whole element. */
+  .hr-stat-figure-only {
+    padding: 0;
+    gap: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+  }
 
-.hr-stat-card .hr-stat-spline {
-  transition: opacity var(--chart-motion-fast, 150ms) ease;
-}
-.hr-stat-card .hr-stat-bars {
-  transform-box: fill-box;
-  transform-origin: bottom;
-  animation: hr-stat-grow var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(2) {
-  animation-delay: var(--chart-stagger, 30ms);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(3) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 2);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(4) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 3);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(5) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 4);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(6) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 5);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(n + 7) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 6);
+  /* WHY: the gauge variant sits the figure and a radial gauge side by side
+     instead of bleeding a chart to the bottom edge; no negative margins here. */
+  .hr-stat-gauge-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  /* WHY the floor: below the width a gauge and a figure share, the row wraps the
+     gauge to its own line rather than squeezing the figure to nothing. */
+  .hr-stat-gauge-row .hr-stat-gauge-figure {
+    flex: 1 1 auto;
+    min-width: 6rem;
+  }
+
+  .hr-stat-gauge-row .hr-gauge {
+    flex: 0 0 auto;
+  }
+
+  /* WHY: the chart bleeds past the card padding to the left/right/bottom edges,
+     matching bklit's edge-to-edge stat-card chart; overflow:hidden on the card
+     clips the corners to the radius. */
+  .hr-stat-chart {
+    margin: 0.5rem -1.5rem -1.25rem;
+    width: auto;
+  }
+
+  .hr-stat-figure-only .hr-stat-chart {
+    margin: 0;
+  }
+
+  .hr-stat-card .hr-stat-spline {
+    transition: opacity var(--chart-motion-fast, 150ms) ease;
+  }
+
+  .hr-stat-card .hr-stat-bars {
+    transform-box: fill-box;
+    transform-origin: bottom;
+    animation: hr-stat-grow var(--chart-motion-reveal, 1100ms)
+      var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(2) {
+    animation-delay: var(--chart-stagger, 30ms);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(3) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 2);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(4) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 3);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(5) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 4);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(6) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 5);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(n + 7) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 6);
+  }
+
+  .hr-stat-card .hr-stat-bar-active {
+    filter: brightness(1.08);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-stat-card .hr-stat-bars {
+      animation: none;
+    }
+  }
 }
+
 @keyframes hr-stat-grow {
   from {
     transform: scaleY(0);
   }
 }
-.hr-stat-card .hr-stat-bar-active {
-  filter: brightness(1.08);
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-stat-card .hr-stat-bars {
-    animation: none;
-  }
-}

package/src/charts/stat-card.svelte.d.ts

@@ -0,0 +1,65 @@
+import "./chart-tokens.css";
+import "./stat-card.css";
+import type { Snippet } from "svelte";
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        /** Series for the line/area/bar variants. Unused by the gauge variant. */
+        data?: TData[];
+        xKey?: keyof TData & string;
+        yKey?: keyof TData & string;
+        /** Chart kind. "gauge" puts a radial gauge to the right of the figure. */
+        variant?: "line" | "area" | "bar" | "gauge";
+        /** Arc fill 0-100 for variant="gauge". Falls back to `value` when numeric. */
+        gaugeValue?: number;
+        /** Label under the gauge percentage. */
+        gaugeLabel?: string;
+        /** Metric name shown top-left. Omit (or set `figureOnly`) for a bare chart. */
+        label?: string;
+        /** Headline number; counts up on mount. */
+        value?: number;
+        /** Percentage change. Its sign drives the trend color/arrow unless `trend` is set. */
+        delta?: number;
+        /** Force the trend direction independent of `delta`'s sign. */
+        trend?: "neutral" | "up" | "down";
+        /** Caption under the value, e.g. "Avg" or "vs last month". */
+        caption?: string;
+        /** Render only the edge-to-edge chart, no header/value/caption. */
+        figureOnly?: boolean;
+        color?: string;
+        /** Chart height in px. */
+        height?: number;
+        smooth?: boolean;
+        /**
+         * Softens the left and right ends of the line and the area fill instead of cutting them off at the card edge.
+         */
+        edgeFade?: boolean | number;
+        /** Format for the headline value. */
+        formatValue?: (v: number) => string;
+        /** Format for the x value shown as the tooltip header (e.g. a date/period). */
+        formatX?: (v: unknown) => string;
+        /** Leading icon next to the label. */
+        icon?: Snippet;
+        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/time-series-chart.css

@@ -1,25 +1,30 @@
+@layer theme, base, components, utilities;
+
 /* A plain stylesheet, not a `<style>` block, because Tailwind v4's Vite plugin mis-parses that
    virtual module when this package is consumed from node_modules (tailwindcss#20000). */
 
-.hr-ts-chart {
-  width: 100%;
-  overflow: hidden;
-}
+@layer components {
+  .hr-ts-chart {
+    width: 100%;
+    overflow: hidden;
+  }
 
-.hr-ts-chart .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
-  border-radius: 0.5rem;
-}
-.hr-ts-chart .empty p {
-  font-size: 0.875rem;
-  color: var(--chart-label, oklch(0.5 0.01 286));
-  margin: 0;
-}
+  .hr-ts-chart .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+    border-radius: 0.5rem;
+  }
+
+  .hr-ts-chart .empty p {
+    font-size: 0.875rem;
+    color: var(--chart-label, oklch(0.5 0.01 286));
+    margin: 0;
+  }
 
-.hr-ts-chart .hr-ts-grid {
-  stroke: var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+  .hr-ts-chart .hr-ts-grid {
+    stroke: var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+  }
 }

package/src/charts/time-series-chart.svelte

@@ -16,7 +16,10 @@
 		Spline,
 		Svg,
 		Tooltip,
+		type ChartState,
 	} from "layerchart";
+	import { chartTable } from "./chart-a11y.js";
+	import ChartPlot from "./chart-plot.svelte";
 	import Crosshair from "./crosshair.svelte";
 	import EdgeFade from "./edge-fade.svelte";
 	import { resolveEdgeFade } from "./edge-fade.js";
@@ -53,6 +56,8 @@
 		 * `true` fades 8% of the width per side, a number sets the fraction (0-0.45), `false` keeps the hard edges.
 		 */
 		edgeFade?: boolean | number;
+		/** The chart's accessible name. Its date range and values are read after it. */
+		ariaLabel?: string;
 	}
 
 	// =========================
@@ -63,15 +68,33 @@
 		label = "Value",
 		label2,
 		color = "var(--chart-series-1)",
-		color2 = "var(--muted-foreground)",
+		color2 = "var(--chart-series-2)",
 		formatValue = (v) => v.toLocaleString(),
 		formatValue2,
 		height = 280,
 		softMax = false,
 		yMin = 0,
 		edgeFade = true,
+		ariaLabel = label,
 	}: Props = $props();
 
+	// =========================
+	// STATE
+	// =========================
+	let context = $state<ChartState<(typeof chartData)[number]>>();
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function day(d: Date): string {
+		return d.toLocaleDateString("en", { month: "short", day: "numeric", year: "numeric" });
+	}
+
+	function step(i: number | null) {
+		if (i === null) context?.tooltip.hide();
+		else context?.tooltip.show({ data: chartData[i] });
+	}
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -88,6 +111,21 @@
 		})),
 	);
 
+	const table = $derived(
+		chartTable(
+			chartData,
+			(d) => day(d.dateObj),
+			[
+				{ label, value: (d: DataPoint) => d.value },
+				...(label2
+					? [{ label: label2, value: (d: DataPoint) => d.value2, format: formatValue2 }]
+					: []),
+			],
+			formatValue,
+			{ xLabel: "Date" },
+		),
+	);
+
 	let yMax = $derived.by(() => {
 		const allValues = [
 			...data.map((d) => d.value),
@@ -110,7 +148,7 @@
 <!-- =========================== -->
 <!-- TIME SERIES CHART -->
 <!-- =========================== -->
-<div class="hr-ts-chart" style="height: {height}px">
+<ChartPlot class="hr-ts-chart" height="{height}px" label={ariaLabel} {table} onStep={step}>
 	{#if chartData.length === 0}
 		<div class="empty"><p>No historical data yet</p></div>
 	{:else}
@@ -124,8 +162,9 @@
 			padding={{ left: 56, bottom: 36, top: 12, right: 16 }}
 			tooltipContext={{ mode: "bisect-x" }}
 			motion={DOMAIN_MOTION}
+			bind:context
 		>
-			<Svg>
+			<Svg aria-hidden="true">
 				<Axis placement="left" format={(v) => formatValue(v)} ticks={6} />
 				<Axis
 					placement="bottom"
@@ -152,7 +191,7 @@
 						<Spline
 							y="value2"
 							curve={curveMonotoneX}
-							style="stroke: {color2}; stroke-dasharray: 4 4; stroke-width: 1; fill: none"
+							style="stroke: {color2}; stroke-dasharray: 4 4; stroke-width: 1.5; fill: none"
 						/>
 					{/if}
 				</Reveal>
@@ -160,21 +199,19 @@
 			</Svg>
 			<Tooltip.Root>
 				{#snippet children({ data: d })}
-					<Tooltip.Header
-						value={d.dateObj.toLocaleDateString("en", {
-							month: "short",
-							day: "numeric",
-							year: "numeric",
-						})}
-					/>
+					<Tooltip.Header value={day(d.dateObj)} />
 					<Tooltip.List>
-						<Tooltip.Item {label} value={formatValue(d.value)} />
+						<Tooltip.Item {label} {color} value={formatValue(d.value)} />
 						{#if label2 && d.value2 !== undefined}
-							<Tooltip.Item label={label2} value={(formatValue2 ?? formatValue)(d.value2)} />
+							<Tooltip.Item
+								label={label2}
+								color={color2}
+								value={(formatValue2 ?? formatValue)(d.value2)}
+							/>
 						{/if}
 					</Tooltip.List>
 				{/snippet}
 			</Tooltip.Root>
 		</Chart>
 	{/if}
-</div>
+</ChartPlot>

package/src/charts/time-series-chart.svelte.d.ts

@@ -0,0 +1,30 @@
+import "./chart-tokens.css";
+import "./time-series-chart.css";
+interface DataPoint {
+    date: string;
+    value: number;
+    value2?: number;
+}
+interface Props {
+    data: DataPoint[];
+    label?: string;
+    label2?: string;
+    color?: string;
+    color2?: string;
+    formatValue?: (v: number) => string;
+    formatValue2?: (v: number) => string;
+    height?: number;
+    /** Clamp Y-axis to 95th percentile so outlier spikes don't flatten normal data */
+    softMax?: boolean;
+    /** Y-axis floor. Raise above 0 to frame variation around a baseline. */
+    yMin?: number;
+    /**
+     * Softens the left and right ends of the filled area instead of cutting them off at the plot edge.
+     */
+    edgeFade?: boolean | number;
+    /** The chart's accessible name. Its date range and values are read after it. */
+    ariaLabel?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;