@heyramzi/ui 2.24.0 → 3.1.0

package/src/charts/chart-plot.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./chart-a11y.css";
+	import type { Snippet } from "svelte";
+	import { cn } from "../lib/utils.js";
+	import { nextPoint, rowSummary, type ChartTable } from "./chart-a11y.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** The plot's accessible name and the hidden table's caption. */
+		label: string;
+		/** From chartTable(): the summary read after the name, and one row per point. */
+		table: ChartTable;
+		/** Shows point `i`'s tooltip, or clears it on `null`. */
+		onStep?: (i: number | null) => void;
+		/** Any CSS length. */
+		height?: string | null;
+		class?: string;
+		children: Snippet;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { label, table, onStep, height, class: className, children }: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	const uid = $props.id();
+	let at = $state(-1);
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function onkeydown(e: KeyboardEvent) {
+		const next = nextPoint(e.key, at, count);
+		if (next === undefined) return;
+		e.preventDefault();
+		at = next ?? -1;
+		onStep?.(next);
+	}
+
+	function onfocusout() {
+		if (at < 0) return;
+		at = -1;
+		onStep?.(null);
+	}
+
+	// =========================
+	// DERIVED
+	// =========================
+	const count = $derived(onStep ? table.rows.length : 0);
+	const shown = $derived(table.rows.length > 0);
+	const announce = $derived(at >= 0 ? rowSummary(table, at) : "");
+</script>
+
+<!-- =========================== -->
+<!-- CHART PLOT -->
+<!-- =========================== -->
+<!-- WHY application: a screen reader in browse mode keeps the arrow keys for itself on an img. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	class={cn("hr-chart-plot", className)}
+	style:height
+	role={shown ? (count > 0 ? "application" : "img") : undefined}
+	aria-roledescription={count > 0 ? "chart" : undefined}
+	aria-label={shown ? label : undefined}
+	aria-describedby={shown ? `${uid}-summary` : undefined}
+	tabindex={count > 0 ? 0 : undefined}
+	{onkeydown}
+	{onfocusout}
+>
+	{@render children()}
+</div>
+{#if shown}
+	<p id="{uid}-summary" class="hr-sr-only">{table.summary}</p>
+	{#if count > 0}
+		<p class="hr-sr-only" aria-live="polite">{announce}</p>
+	{/if}
+	<table class="hr-sr-only">
+		<caption>{label}</caption>
+		<thead>
+			<tr>
+				<th scope="col">{table.xLabel}</th>
+				{#each table.columns as column, j (j)}
+					<th scope="col">{column}</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each table.rows as row, i (i)}
+				<tr>
+					<th scope="row">{row.x}</th>
+					{#each row.cells as cell, j (j)}
+						<td>{cell}</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+{/if}

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

@@ -0,0 +1,18 @@
+import "./chart-a11y.css";
+import type { Snippet } from "svelte";
+import { type ChartTable } from "./chart-a11y.js";
+interface Props {
+    /** The plot's accessible name and the hidden table's caption. */
+    label: string;
+    /** From chartTable(): the summary read after the name, and one row per point. */
+    table: ChartTable;
+    /** Shows point `i`'s tooltip, or clears it on `null`. */
+    onStep?: (i: number | null) => void;
+    /** Any CSS length. */
+    height?: string | null;
+    class?: string;
+    children: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/chart-tokens.css

@@ -1,55 +1,57 @@
+@layer theme, base, components, utilities;
+
 /* Each chart imports these beside its own stylesheet, so a deep import such as
    `@heyramzi/ui/charts/dashboard` keeps its card edge without the barrel. */
 
-/* Shared chart tokens, held at zero specificity by `:where()`. The reveal pair
-   is the entrance every chart shares; motion.ts mirrors its duration. */
-:where(
-  .hr-area-chart,
-  .hr-bar-chart,
-  .hr-line-chart,
-  .hr-sparkline,
-  .hr-number-chart,
-  .hr-stat-card,
-  .hr-legend,
-  .hr-ts-chart,
-  .hr-donut-chart,
-  .hr-ring,
-  .hr-gauge
-) {
-  /* The categorical series palette. The brand leads, then hues spaced round the
-     wheel so neighbours never share a family (blue and orange first, the pair that
-     survives colour blindness). Each hue is a cat token pulled 15% toward the text
-     colour: darker on a light card, lighter on a dark one, so every series clears
-     3:1 against the card in both themes (lowest: teal, 3.6:1 light, 6.2:1 dark). */
-  --chart-series-1: var(--color-brand, oklch(0.28 0 0));
-  --chart-series-2: color-mix(in oklab, var(--color-cat-blue) 85%, var(--color-foreground));
-  --chart-series-3: color-mix(in oklab, var(--color-cat-orange) 85%, var(--color-foreground));
-  --chart-series-4: color-mix(in oklab, var(--color-cat-green) 85%, var(--color-foreground));
-  --chart-series-5: color-mix(in oklab, var(--color-cat-pink) 85%, var(--color-foreground));
-  --chart-series-6: color-mix(in oklab, var(--color-cat-teal) 85%, var(--color-foreground));
-  /* The palette's `--chart-N` names point here inside a chart, so a series passed as
-     `var(--chart-3)` gets a hue, not the brand's grey highlight. */
-  --chart-1: var(--chart-series-1);
-  --chart-2: var(--chart-series-2);
-  --chart-3: var(--chart-series-3);
-  --chart-4: var(--chart-series-4);
-  --chart-5: var(--chart-series-5);
-  --chart-6: var(--chart-series-6);
-  --chart-label: var(--muted-foreground, oklch(0.5 0.01 286));
-  --chart-grid: color-mix(in srgb, var(--border, oklch(0.5 0.01 286)) 50%, transparent);
-  --chart-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --chart-motion-fast: var(--duration-quick, 150ms);
-  --chart-motion: var(--duration-fast, 250ms);
-  --chart-motion-slow: 800ms;
-  --chart-motion-reveal: 1100ms;
-  --chart-ease-reveal: cubic-bezier(0.85, 0, 0.15, 1);
-  --chart-stagger: 30ms;
-  --chart-crosshair: color-mix(
-    in srgb,
-    var(--muted-foreground, oklch(0.5 0.01 286)) 60%,
-    transparent
-  );
-  /* The card step draws its own hairline, so a chart card carries no border of its own. */
-  --chart-card-shadow: var(--elev-card);
-  --chart-card-shadow-hover: var(--elev-card-hover);
+@layer components {
+  /* 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,
+    .hr-line-chart,
+    .hr-sparkline,
+    .hr-number-chart,
+    .hr-stat-card,
+    .hr-legend,
+    .hr-ts-chart,
+    .hr-donut-chart,
+    .hr-ring,
+    .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. */
+    --chart-series-1: var(--color-brand, oklch(0.28 0 0));
+    --chart-series-2: color-mix(in oklab, var(--color-cat-blue) 85%, var(--color-foreground));
+    --chart-series-3: color-mix(in oklab, var(--color-cat-orange) 85%, var(--color-foreground));
+    --chart-series-4: color-mix(in oklab, var(--color-cat-green) 85%, var(--color-foreground));
+    --chart-series-5: color-mix(in oklab, var(--color-cat-pink) 85%, var(--color-foreground));
+    --chart-series-6: color-mix(in oklab, var(--color-cat-teal) 85%, var(--color-foreground));
+    /* The palette's `--chart-N` names point here inside a chart, so a series passed as
+       `var(--chart-3)` gets a hue, not the brand's grey highlight. */
+    --chart-1: var(--chart-series-1);
+    --chart-2: var(--chart-series-2);
+    --chart-3: var(--chart-series-3);
+    --chart-4: var(--chart-series-4);
+    --chart-5: var(--chart-series-5);
+    --chart-6: var(--chart-series-6);
+    --chart-label: var(--muted-foreground, oklch(0.5 0.01 286));
+    --chart-grid: color-mix(in srgb, var(--border, oklch(0.5 0.01 286)) 50%, transparent);
+    --chart-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --chart-motion-fast: var(--duration-quick, 150ms);
+    --chart-motion: var(--duration-fast, 250ms);
+    --chart-motion-slow: 800ms;
+    --chart-motion-reveal: 1100ms;
+    --chart-ease-reveal: cubic-bezier(0.85, 0, 0.15, 1);
+    --chart-stagger: 30ms;
+    --chart-crosshair: color-mix(
+      in srgb,
+      var(--muted-foreground, oklch(0.5 0.01 286)) 60%,
+      transparent
+    );
+    /* The card step draws its own hairline, so a chart card carries no border of its own. */
+    --chart-card-shadow: var(--elev-card);
+    --chart-card-shadow-hover: var(--elev-card-hover);
+  }
 }

package/src/charts/charts.css

@@ -1,156 +1,168 @@
-/* Layerchart's tooltip falls back to translucent white on a dark page without
-   `--color-surface-*`, so these unlayered rules repaint it with `--popover`,
-   beating its `@layer component` defaults. */
-
-.lc-tooltip-container[data-variant="default"] {
-  color: var(--popover-foreground, var(--foreground));
-  background-color: var(--popover, #fff);
-  border: 0;
-  border-radius: var(--radius-lg);
-  padding: 0.625rem 0.75rem;
-  min-width: 8.75rem;
-  backdrop-filter: none;
-  box-shadow: var(--elev-hairline), var(--elev-raised);
-  /* WHY: opacity only; the container's transform is inline positioning, so
-	   animating transform here would fight it and make the tooltip jump. */
-  transform-origin: top left;
-  animation: hr-tooltip-in var(--duration-fast, 250ms) var(--ease-smooth-out) both;
-}
+@layer theme, base, components, utilities;
 
-/* WHY `scale` and `translate`, not `transform`: the container's inline transform is
-   its position, and the individual properties compose with it instead of fighting. */
-@keyframes hr-tooltip-in {
-  from {
-    opacity: 0;
-    scale: var(--scale-large, 0.96);
-    translate: calc(var(--distance-small, 6px) * -1) 0;
-  }
-}
+/* Layerchart's tooltip falls back to translucent white without `--color-surface-*`, so these
+   repaint it with `--popover`. Its rules share this layer, so each selector here outweighs theirs. */
 
-@media (prefers-reduced-motion: reduce) {
+@layer components {
   .lc-tooltip-container[data-variant="default"] {
-    animation: none;
+    color: var(--popover-foreground, var(--foreground));
+    background-color: var(--popover, #fff);
+    border: 0;
+    border-radius: var(--radius-lg);
+    padding: 0.625rem 0.75rem;
+    min-width: 8.75rem;
+    backdrop-filter: none;
+    box-shadow: var(--elev-hairline), var(--elev-raised);
+    /* WHY: opacity only; the container's transform is inline positioning, so
+  	   animating transform here would fight it and make the tooltip jump. */
+    transform-origin: top left;
+    animation: hr-tooltip-in var(--duration-fast, 250ms) var(--ease-smooth-out) both;
   }
-}
 
-/* bklit-ui's panel: a small title with no rule under it, and a dot on every row. */
-.lc-tooltip-header {
-  color: var(--popover-foreground, var(--foreground));
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-bottom: none;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0;
-}
+  @media (prefers-reduced-motion: reduce) {
+    .lc-tooltip-container[data-variant="default"] {
+      animation: none;
+    }
+  }
 
-.lc-tooltip-list {
-  gap: 0.375rem 1rem;
-  font-size: 0.8125rem;
-}
+  /* bklit-ui's panel: a small title with no rule under it, and a dot on every row. */
+  .lc-tooltip-header {
+    color: var(--popover-foreground, var(--foreground));
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-bottom: none;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0;
+  }
 
-.lc-tooltip-item-color {
-  width: 0.625rem;
-  height: 0.625rem;
-}
+  .lc-tooltip-list {
+    gap: 0.375rem 1rem;
+    font-size: 0.8125rem;
+  }
 
-.lc-tooltip-item-label,
-.lc-tooltip-container .label {
-  color: var(--muted-foreground);
-}
+  .lc-tooltip-item-color {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
 
-.lc-tooltip-item-value,
-.lc-tooltip-container .value {
-  color: var(--popover-foreground, var(--foreground));
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
+  /* `[data-variant]` outweighs Layerchart's `[data-variant="default"] .label` under `:where()`. */
+  .lc-tooltip-item-label,
+  .lc-tooltip-container[data-variant] .label {
+    color: var(--muted-foreground);
+  }
 
-/* Axis labels, grid rules and hover highlights for every chart, defined once.
-   `:where()` keeps specificity at 0 so a component can still override them. */
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-axis-tick-label {
-  fill: var(--chart-label);
-  font-size: 11px;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-axis-tick {
-  stroke: transparent;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  :is(.lc-grid-x-rule, .lc-grid-y-rule) {
-  stroke: var(--chart-grid);
-  stroke-dasharray: 4 4;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-highlight-point {
-  stroke: var(--background, white);
-  stroke-width: 2;
-}
-:where(
-    .hr-area-chart,
-    .hr-bar-chart,
-    .hr-line-chart,
-    .hr-scatter-chart,
-    .hr-live-line-chart,
-    .hr-sparkline,
-    .hr-stat-card,
-    .hr-donut-chart
-  )
-  .lc-highlight-line {
-  stroke: var(--chart-grid);
-  stroke-width: 1;
-  stroke-dasharray: none;
-}
-/* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
-   stretch around the point at full strength. */
-.hr-hover-dim {
-  transition: opacity var(--duration-slow, 300ms)
-    var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
-}
-.hr-hover-dim.hr-hover-dimmed {
-  opacity: 0.3;
-}
-@media (prefers-reduced-motion: reduce) {
+  .lc-tooltip-item-value,
+  .lc-tooltip-container .value {
+    color: var(--popover-foreground, var(--foreground));
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Axis labels, grid rules and hover highlights for every chart, defined once.
+     `:where()` keeps specificity at 0 so a component can still override them. */
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-axis-tick-label {
+    fill: var(--chart-label);
+    font-size: 11px;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-axis-tick {
+    stroke: transparent;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    :is(.lc-grid-x-rule, .lc-grid-y-rule) {
+    stroke: var(--chart-grid);
+    stroke-dasharray: 4 4;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-highlight-point {
+    stroke: var(--background, white);
+    stroke-width: 2;
+  }
+
+  :where(
+      .hr-area-chart,
+      .hr-bar-chart,
+      .hr-line-chart,
+      .hr-scatter-chart,
+      .hr-live-line-chart,
+      .hr-sparkline,
+      .hr-stat-card,
+      .hr-donut-chart
+    )
+    .lc-highlight-line {
+    stroke: var(--chart-grid);
+    stroke-width: 1;
+    stroke-dasharray: none;
+  }
+
+  /* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
+     stretch around the point at full strength. */
   .hr-hover-dim {
-    transition: none;
+    transition: opacity var(--duration-slow, 300ms)
+      var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
+  }
+
+  .hr-hover-dim.hr-hover-dimmed {
+    opacity: 0.3;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-hover-dim {
+      transition: none;
+    }
+  }
+
+  .hr-crosshair-stop {
+    stop-color: var(--chart-crosshair);
   }
 }
-.hr-crosshair-stop {
-  stop-color: var(--chart-crosshair);
+
+/* WHY `scale` and `translate`, not `transform`: the container's inline transform is
+   its position, and the individual properties compose with it instead of fighting. */
+@keyframes hr-tooltip-in {
+  from {
+    opacity: 0;
+    scale: var(--scale-large, 0.96);
+    translate: calc(var(--distance-small, 6px) * -1) 0;
+  }
 }

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

@@ -0,0 +1,7 @@
+interface Props {
+    /** Gradient id. Paint the highlight line with `stroke: url(#id)`. */
+    id: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/dashboard/dashboard-section.svelte

@@ -17,6 +17,8 @@
 		href?: string;
 		/** The link's wording. Translated at the call site. */
 		openLabel?: string;
+		/** Controls that scope the whole area, like a period filter. Pinned right, after the note. */
+		actions?: Snippet;
 		children: Snippet;
 		class?: string;
 	}
@@ -24,7 +26,15 @@
 	// =========================
 	// PROPS
 	// =========================
-	let { title, note, href, openLabel = "Open", children, class: className }: Props = $props();
+	let {
+		title,
+		note,
+		href,
+		openLabel = "Open",
+		actions,
+		children,
+		class: className,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->
@@ -33,9 +43,11 @@
 <!-- An area of a dashboard, named, then its numbers. No box of its own: its
      cards are the containers, and a card in a card is never right. -->
 <section class={cn("flex flex-col gap-4", className)}>
-	<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+	<!-- Centred, not baseline: a filter control is taller than the title, and a baseline row
+	     hangs the title off its bottom edge. -->
+	<div class="flex min-h-8 flex-wrap items-center justify-between gap-x-4 gap-y-2">
 		<h2 class="text-base font-semibold tracking-tight">{title}</h2>
-		<div class="flex items-baseline gap-3">
+		<div class="flex items-center gap-3">
 			{#if note}
 				<p class="text-xs text-muted-foreground">{note}</p>
 			{/if}
@@ -46,11 +58,15 @@
 				>
 					{openLabel}
 					<ArrowRight
+						aria-hidden="true"
 						size={12}
 						class="shrink-0 transition-transform duration-[var(--duration-quick)] ease-out group-hover:translate-x-0.5"
 					/>
 				</a>
 			{/if}
+			{#if actions}
+				{@render actions()}
+			{/if}
 		</div>
 	</div>
 

package/src/charts/dashboard/dashboard-section.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    /** One line on the right: a window, a provenance, a count. Never a sentence. */
+    note?: string;
+    /** The page that owns this area, when one page does. */
+    href?: string;
+    /** The link's wording. Translated at the call site. */
+    openLabel?: string;
+    /** Controls that scope the whole area, like a period filter. Pinned right, after the note. */
+    actions?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -235,7 +235,7 @@
 								"align-middle whitespace-nowrap",
 								column.strong && "font-medium",
 								isMuted(column, row) && "text-muted-foreground",
-								column.negative?.(row) && "text-destructive",
+								column.negative?.(row) && "text-destructive-ink",
 							)}
 							title={column.title?.(row)}
 						>