@heyramzi/ui 2.19.0 → 2.19.2

package/dist/charts/index.js

@@ -1,3 +1,4 @@
+import "../../src/charts/chart-tokens.css";
 import "../../src/charts/charts.css";
 export { default as BarChart } from "../../src/charts/bar-chart.svelte";
 export { default as AreaChart } from "../../src/charts/area-chart.svelte";

package/dist/charts/motion.js

@@ -1,5 +1,5 @@
 import { cubicInOut } from "svelte/easing";
-/** Mirrors `--chart-motion-reveal` in charts.css, for when no element is mounted to read it from. */
+/** Mirrors `--chart-motion-reveal` in chart-tokens.css, for when no element is mounted to read it from. */
 export const REVEAL_MS = 1100;
 /** Rescales the axes when the data changes; the first render never animates. */
 export const DOMAIN_MOTION = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/charts/area-chart.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./area-chart.css";
 	import { Area, Axis, Chart, Highlight, LinearGradient, Spline, Svg, Tooltip } from "layerchart";
 	import { curveMonotoneX } from "d3-shape";

package/src/charts/bar-chart.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./bar-chart.css";
 	import { Axis, Bars, Chart, Highlight, Svg, Tooltip } from "layerchart";
 	import { scaleBand } from "d3-scale";

package/src/charts/chart-tokens.css

@@ -0,0 +1,36 @@
+/* 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
+) {
+  --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

@@ -67,38 +67,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* 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
-) {
-  --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)) 65%, transparent);
-  --chart-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
-  --chart-motion-fast: 150ms;
-  --chart-motion: 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
-  );
-  --chart-card-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 1px 3px 0 oklch(0 0 0 / 0.06);
-}
-
 /* 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(

package/src/charts/donut-chart.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./donut-chart.css";
 	import { Arc, Chart, Group, Pie, Svg, Text } from "layerchart";
 	import { scaleOrdinal } from "d3-scale";

package/src/charts/figure.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./figure.css";
 	import { cn } from "../lib/utils.js";
 	import type { Snippet } from "svelte";

package/src/charts/gauge-chart.svelte

@@ -8,6 +8,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./gauge-chart.css";
 	import { cn } from "../lib/utils.js";
 	import AnimatedValue from "./animated-value.svelte";

package/src/charts/index.ts

@@ -1,3 +1,4 @@
+import "./chart-tokens.css";
 import "./charts.css";
 
 export { default as BarChart } from "./bar-chart.svelte";

package/src/charts/legend.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./legend.css";
 	import { cn } from "../lib/utils.js";
 

package/src/charts/line-chart.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./line-chart.css";
 	import {
 		Area,

package/src/charts/motion.ts

@@ -1,6 +1,6 @@
 import { cubicInOut } from "svelte/easing";
 
-/** Mirrors `--chart-motion-reveal` in charts.css, for when no element is mounted to read it from. */
+/** Mirrors `--chart-motion-reveal` in chart-tokens.css, for when no element is mounted to read it from. */
 export const REVEAL_MS = 1100;
 
 /** Rescales the axes when the data changes; the first render never animates. */

package/src/charts/number-chart.svelte

@@ -13,6 +13,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./number-chart.css";
 	import { Minus, TrendDown, TrendUp } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";

package/src/charts/ring-chart.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./ring-chart.css";
 	import type { Snippet } from "svelte";
 	import { cn } from "../lib/utils.js";

package/src/charts/sparkline.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./sparkline.css";
 	import { Area, Chart, Highlight, LinearGradient, Points, Spline, Svg, Tooltip } from "layerchart";
 	import { curveMonotoneX } from "d3-shape";

package/src/charts/stat-card.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./stat-card.css";
 	import { Area, Bars, Chart, Highlight, LinearGradient, Spline, Svg, Tooltip } from "layerchart";
 	import { scaleBand } from "d3-scale";

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

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import "./chart-tokens.css";
 	import "./time-series-chart.css";
 	import { scaleTime } from "d3-scale";
 	import { curveMonotoneX } from "d3-shape";

package/src/record/info-list.svelte

@@ -301,8 +301,9 @@
 		{#if title}
 			<h2 class="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</h2>
 		{/if}
+		<!-- Labels size to their text, capped at 45%; the dt's min-w-20 is the 5rem floor. min() can't take max-content, so a min() template is dropped whole. -->
 		<dl
-			class="grid grid-cols-[minmax(5rem,min(max-content,45%))_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5"
+			class="grid grid-cols-[fit-content(45%)_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5"
 		>
 			{#each shown as row, index (row.divider ? `divider-${index}` : keyOf(row))}
 				{#if row.divider}
@@ -312,7 +313,7 @@
 					{@const long = row.input === "longtext"}
 					<dt
 						class={cn(
-							"flex min-h-7 min-w-0 items-center gap-2 text-sm [overflow-wrap:anywhere] text-muted-foreground",
+							"flex min-h-7 min-w-20 items-center gap-2 text-sm [overflow-wrap:anywhere] text-muted-foreground",
 							long && "col-span-2 min-h-0",
 						)}
 					>