@heyramzi/ui 2.24.0 → 3.0.0

package/src/charts/ring-chart.css

@@ -1,86 +1,101 @@
+@layer theme, base, components, utilities;
+
 /* RingChart styles, namespaced under `.hr-ring` because unscoped, the generic names
    below collide with GaugeChart's (area-chart.css says why it's plain CSS). */
 
-.hr-ring {
-  position: relative;
-  display: inline-grid;
-  place-items: center;
-  aspect-ratio: 1;
-  container-type: size;
-}
+@layer components {
+  .hr-ring {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    aspect-ratio: 1;
+    container-type: size;
+  }
 
-.hr-ring svg {
-  grid-area: 1 / 1;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
+  .hr-ring svg {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
 
-.hr-ring .track {
-  opacity: 0.14;
-}
+  .hr-ring .track {
+    opacity: 0.14;
+  }
 
-.hr-ring .fill {
-  stroke-dasharray: 100;
-  cursor: pointer;
-  outline: none;
-  transition:
-    stroke-dashoffset var(--chart-motion-slow, 1.1s)
-      var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
-    opacity 200ms ease;
-}
+  .hr-ring .fill {
+    stroke-dasharray: 100;
+    cursor: pointer;
+    outline: none;
+    transition:
+      stroke-dashoffset var(--chart-motion-slow, 1.1s)
+        var(--chart-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
+      opacity 200ms ease;
+  }
 
-.hr-ring .fill.animate {
-  animation: hr-ring-sweep var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-}
+  .hr-ring .fill.animate {
+    animation: hr-ring-sweep var(--chart-motion-reveal, 1100ms)
+      var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .hr-ring.glow .fill:hover {
-    filter: drop-shadow(0 0 5px var(--ring-color));
+  @media (hover: hover) and (pointer: fine) {
+    .hr-ring.glow .fill:hover {
+      filter: drop-shadow(0 0 5px var(--ring-color));
+    }
   }
-}
 
-@keyframes hr-ring-sweep {
-  from {
-    stroke-dashoffset: 100;
+  .hr-ring .center {
+    grid-area: 1 / 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    /* WHY: keep the readout inside the innermost ring's clear center so the
+  	   number never collides with the green ring. */
+    max-width: 40cqmin;
+    pointer-events: none;
+    text-align: center;
   }
-}
 
-.hr-ring .center {
-  grid-area: 1 / 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  /* WHY: keep the readout inside the innermost ring's clear center so the
-	   number never collides with the green ring. */
-  max-width: 40cqmin;
-  pointer-events: none;
-  text-align: center;
-}
+  /* WHY: a custom center fills the innermost ring's clear area instead of the
+     readout's narrower cap. */
+  .hr-ring .center.custom {
+    max-width: none;
+  }
 
-/* WHY: a custom center fills the innermost ring's clear area instead of the
-   readout's narrower cap. */
-.hr-ring .center.custom {
-  max-width: none;
-}
+  .hr-ring .value {
+    font-size: max(0.75rem, 9.5cqmin);
+    font-weight: 650;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    color: var(--foreground);
+  }
 
-.hr-ring .value {
-  font-size: max(0.75rem, 9.5cqmin);
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
-  color: var(--foreground);
+  .hr-ring .label {
+    margin-top: 1.5cqmin;
+    font-size: max(0.5rem, 5cqmin);
+    font-weight: 500;
+    color: var(--muted-foreground);
+    animation: hr-ring-label-in 180ms ease-out both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-ring .fill,
+    .hr-ring .fill.animate {
+      transition: opacity 120ms ease;
+      animation: none;
+    }
+    .hr-ring .label {
+      animation: none;
+    }
+  }
 }
 
-.hr-ring .label {
-  margin-top: 1.5cqmin;
-  font-size: max(0.5rem, 5cqmin);
-  font-weight: 500;
-  color: var(--muted-foreground);
-  animation: hr-ring-label-in 180ms ease-out both;
+@keyframes hr-ring-sweep {
+  from {
+    stroke-dashoffset: 100;
+  }
 }
 
 @keyframes hr-ring-label-in {
@@ -89,14 +104,3 @@
     transform: translateY(2px);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-ring .fill,
-  .hr-ring .fill.animate {
-    transition: opacity 120ms ease;
-    animation: none;
-  }
-  .hr-ring .label {
-    animation: none;
-  }
-}

package/src/charts/ring-chart.svelte

@@ -40,7 +40,7 @@
 		showGlow?: boolean;
 		/** Hovered ring index, bindable for legend hover-sync. */
 		hoveredIndex?: number | null;
-		onHoverChange?: (index: number | null) => void;
+		onHoveredIndexChange?: (index: number | null) => void;
 		minWidth?: number;
 		ariaLabel?: string;
 		/** Replaces the center readout, for a number that isn't the ring's own value. */
@@ -63,7 +63,7 @@
 		animate = true,
 		showGlow = true,
 		hoveredIndex = $bindable(null),
-		onHoverChange,
+		onHoveredIndexChange,
 		minWidth = 170,
 		ariaLabel,
 		children,
@@ -99,7 +99,7 @@
 	// =========================
 	function setHover(index: number | null) {
 		hoveredIndex = index;
-		onHoverChange?.(index);
+		onHoveredIndexChange?.(index);
 	}
 </script>
 

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

@@ -0,0 +1,41 @@
+import "./chart-tokens.css";
+import "./ring-chart.css";
+import type { Snippet } from "svelte";
+type RingData = {
+    label: string;
+    value: number;
+    /** Denominator for the progress arc. */
+    maxValue: number;
+    /** CSS color or var. Falls back to --chart-series-1..6. */
+    color?: string;
+};
+interface Props {
+    data: RingData[];
+    /** Fixed square size in px. Omit to fill the parent (responsive). */
+    size?: number;
+    /** Ring thickness in viewBox units. */
+    strokeWidth?: number;
+    /** Gap between concentric rings in viewBox units. */
+    ringGap?: number;
+    /** Inner radius of the innermost ring in viewBox units. */
+    baseInnerRadius?: number;
+    lineCap?: "round" | "butt";
+    /** Center label when nothing is hovered. */
+    defaultLabel?: string;
+    formatValue?: (v: number) => string;
+    /** Animate arcs on mount. */
+    animate?: boolean;
+    /** Glow the hovered ring. */
+    showGlow?: boolean;
+    /** Hovered ring index, bindable for legend hover-sync. */
+    hoveredIndex?: number | null;
+    onHoveredIndexChange?: (index: number | null) => void;
+    minWidth?: number;
+    ariaLabel?: string;
+    /** Replaces the center readout, for a number that isn't the ring's own value. */
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "hoveredIndex">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/sparkline.css

@@ -1,45 +1,54 @@
+@layer theme, base, components, utilities;
+
 /* Styles for Sparkline. Plain stylesheet (see area-chart.css for why).
    Selectors are namespaced under `.hr-sparkline`. */
 
-.hr-sparkline {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-}
-.hr-sparkline-chart {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-/* Bare is an ornament inside another control: no inline value, so no gap. */
-.hr-sparkline[data-bare] {
-  gap: 0;
-}
-.hr-sparkline-value {
-  flex-shrink: 0;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  font-feature-settings: "tnum";
-  font-family: ui-monospace, SFMono-Regular, monospace;
-}
+@layer components {
+  .hr-sparkline {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    width: 100%;
+  }
+
+  .hr-sparkline-chart {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* Bare is an ornament inside another control: no inline value, so no gap. */
+  .hr-sparkline[data-bare] {
+    gap: 0;
+  }
 
-.hr-sparkline .hr-sparkline-end {
-  filter: drop-shadow(0 0 3px currentColor);
-  opacity: 0.9;
-  transform-box: fill-box;
-  transform-origin: center;
-  /* WHY: the dot lands as the reveal reaches the end of the line. */
-  animation: hr-sparkline-pop var(--duration-fast, 250ms) var(--ease-smooth-out)
-    calc(var(--chart-motion-reveal, 1100ms) * 0.85) both;
+  .hr-sparkline-value {
+    flex-shrink: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    font-family: ui-monospace, SFMono-Regular, monospace;
+  }
+
+  .hr-sparkline .hr-sparkline-end {
+    filter: drop-shadow(0 0 3px currentColor);
+    opacity: 0.9;
+    transform-box: fill-box;
+    transform-origin: center;
+    /* WHY: the dot lands as the reveal reaches the end of the line. */
+    animation: hr-sparkline-pop var(--duration-fast, 250ms) var(--ease-smooth-out)
+      calc(var(--chart-motion-reveal, 1100ms) * 0.85) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-sparkline .hr-sparkline-end {
+      animation: none;
+    }
+  }
 }
+
 @keyframes hr-sparkline-pop {
   from {
     opacity: 0;
     transform: scale(0.9);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .hr-sparkline .hr-sparkline-end {
-    animation: none;
-  }
-}

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;