iryx-ui 0.15.0 → 0.16.0

package/dist/components/LineChart.vue_vue_type_script_setup_true_lang.js

@@ -1,31 +1,37 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { useElementSize as t } from "../composables/element-size.js";
 import { cartesianLayout as n, clampTooltip as r, seriesColor as i, slotOf as a, warnOnSlotOverflow as o } from "../composables/cartesian.js";
-import s from "./ChartLegend.js";
-import { lineChartTheme as c } from "../theme/line-chart.js";
-import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, defineComponent as h, guardReactiveProps as g, normalizeClass as _, normalizeProps as v, normalizeStyle as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useId as ee } from "vue";
+import { useChartAnimation as s, useChartReveal as c } from "../composables/chart-reveal.js";
+import l from "./ChartLegend.js";
+import { lineChartTheme as u } from "../theme/line-chart.js";
+import { Fragment as d, computed as f, createBlock as ee, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as D } from "vue";
 //#region src/components/LineChart.vue?vue&type=script&setup=true&lang.ts
 var te = ["role", "aria-label"], ne = [
 	"width",
 	"height",
 	"viewBox"
-], re = [
+], O = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], ie = ["x", "y"], ae = { key: 1 }, oe = ["d", "fill"], se = [
+], re = ["x", "y"], ie = { key: 1 }, ae = [
+	"x",
+	"y",
+	"width",
+	"height"
+], oe = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], ce = ["d"], le = ["cx", "cy"], ue = ["cx", "cy"], E = ["x", "y"], D = [
+], se = ["clip-path"], ce = ["d", "fill"], le = ["d"], ue = ["cx", "cy"], de = ["cx", "cy"], fe = ["x", "y"], pe = [
 	"x",
 	"y",
 	"width",
 	"height",
 	"onPointerenter"
-], O = { scope: "row" }, k = /*@__PURE__*/ h({
+], me = { scope: "row" }, k = /*@__PURE__*/ g({
 	__name: "LineChart",
 	props: {
 		data: { default: () => [] },
@@ -42,6 +48,10 @@ var te = ["role", "aria-label"], ne = [
 			type: Boolean,
 			default: !0
 		},
+		animate: {
+			type: [Boolean, Object],
+			default: !0
+		},
 		legend: {
 			type: Boolean,
 			default: !0
@@ -60,44 +70,44 @@ var te = ["role", "aria-label"], ne = [
 		class: {},
 		ui: {}
 	},
-	setup(h) {
-		let k = h, A = e(), j = u(() => k.unstyled ?? A.unstyled), M = x(), { width: N } = t(M), P = u(() => new Intl.NumberFormat(k.locale, k.format));
-		function F(e) {
-			return P.value.format(e);
+	setup(g) {
+		let k = g, he = e(), A = f(() => k.unstyled ?? he.unstyled), j = S(), { width: M } = t(j), ge = f(() => new Intl.NumberFormat(k.locale, k.format));
+		function N(e) {
+			return ge.value.format(e);
 		}
-		let I = u(() => {
+		let P = f(() => {
 			let e = k.series?.length ? [...k.series] : [{ key: "value" }];
 			return o(e.length), e;
-		}), L = u(() => I.value.length > 1), de = u(() => L.value || k.legend && I.value[0].name != null);
-		function R(e, t) {
+		}), F = f(() => P.value.length > 1), _e = f(() => F.value || k.legend && P.value[0].name != null);
+		function I(e, t) {
 			let n = e[t];
 			return typeof n == "number" && Number.isFinite(n) ? n : null;
 		}
-		let z = u(() => n({
-			values: k.data.flatMap((e) => I.value.map((t) => R(e, t.key))),
+		let L = f(() => n({
+			values: k.data.flatMap((e) => P.value.map((t) => I(e, t.key))),
 			categories: k.data.length,
 			longestLabel: Math.max(...k.data.map((e) => e.label.length), 1),
-			width: N.value,
+			width: M.value,
 			height: k.height,
 			tickCount: k.ticks,
 			showAxis: k.axis,
-			formatTick: F,
+			formatTick: N,
 			includeZero: k.zero
 		}));
-		function B(e) {
+		function R(e) {
 			return Math.round(e * 100) / 100;
 		}
-		let V = u(() => N.value ? I.value.map((e, t) => {
+		let z = f(() => M.value ? P.value.map((e, t) => {
 			let n = [], r = [];
 			return k.data.forEach((t, i) => {
-				let a = R(t, e.key);
+				let a = I(t, e.key);
 				if (a == null) {
 					r.length && n.push(r), r = [];
 					return;
 				}
 				r.push({
-					x: B(z.value.pointAt(i)),
-					y: B(z.value.y(a)),
+					x: R(L.value.pointAt(i)),
+					y: R(L.value.y(a)),
 					index: i
 				});
 			}), r.length && n.push(r), {
@@ -105,205 +115,214 @@ var te = ["role", "aria-label"], ne = [
 				color: i(a(e, t)),
 				seriesIndex: t
 			};
-		}) : []), H = u(() => k.variant === "area" && !L.value && V.value.length > 0), U = u(() => {
+		}) : []), B = f(() => k.variant === "area" && !F.value && z.value.length > 0), V = f(() => {
 			let e = k.data?.length ?? 0;
 			return {
-				first: e ? B(z.value.pointAt(0)) : 0,
-				last: e ? B(z.value.pointAt(e - 1)) : 0,
-				left: B(z.value.plot.left),
-				right: B(z.value.plot.left + z.value.plot.width)
+				first: e ? R(L.value.pointAt(0)) : 0,
+				last: e ? R(L.value.pointAt(e - 1)) : 0,
+				left: R(L.value.plot.left),
+				right: R(L.value.plot.left + L.value.plot.width)
 			};
 		});
-		function W(e) {
-			return k.flush && e.x === U.value.last ? `L${U.value.right} ${e.y}` : "";
+		function H(e) {
+			return k.flush && e.x === V.value.last ? `L${V.value.right} ${e.y}` : "";
 		}
-		let G = u(() => Math.min(Math.max(k.tension, 0), 1) / 6);
-		function K(e) {
-			let t = e[0], n = e[e.length - 1], r = k.flush && t.x === U.value.first ? `M${U.value.left} ${t.y} L${t.x} ${t.y}` : `M${t.x} ${t.y}`;
-			if (G.value === 0 || e.length < 2) return [
+		let U = f(() => Math.min(Math.max(k.tension, 0), 1) / 6);
+		function W(e) {
+			let t = e[0], n = e[e.length - 1], r = k.flush && t.x === V.value.first ? `M${V.value.left} ${t.y} L${t.x} ${t.y}` : `M${t.x} ${t.y}`;
+			if (U.value === 0 || e.length < 2) return [
 				r,
 				...e.slice(1).map((e) => `L${e.x} ${e.y}`),
-				W(n)
+				H(n)
 			].filter(Boolean).join(" ");
 			let i = (e, t, n) => Math.min(Math.max(e, Math.min(t, n)), Math.max(t, n));
 			return [
 				r,
 				...e.slice(1).map((t, n) => {
-					let r = e[n], a = e[n - 1] ?? r, o = t, s = e[n + 2] ?? o, c = r.x + (o.x - a.x) * G.value, l = i(r.y + (o.y - a.y) * G.value, r.y, o.y), u = o.x - (s.x - r.x) * G.value, d = i(o.y - (s.y - r.y) * G.value, r.y, o.y);
-					return `C${B(c)} ${B(l)}, ${B(u)} ${B(d)}, ${o.x} ${o.y}`;
+					let r = e[n], a = e[n - 1] ?? r, o = t, s = e[n + 2] ?? o, c = r.x + (o.x - a.x) * U.value, l = i(r.y + (o.y - a.y) * U.value, r.y, o.y), u = o.x - (s.x - r.x) * U.value, d = i(o.y - (s.y - r.y) * U.value, r.y, o.y);
+					return `C${R(c)} ${R(l)}, ${R(u)} ${R(d)}, ${o.x} ${o.y}`;
 				}),
-				W(n)
+				H(n)
 			].filter(Boolean).join(" ");
 		}
-		function fe(e) {
-			let t = z.value.plot.top + z.value.plot.height, n = e[0], r = e[e.length - 1], i = k.flush && n.x === U.value.first ? U.value.left : n.x, a = k.flush && r.x === U.value.last ? U.value.right : r.x;
-			return `${K(e)} L${a} ${t} L${i} ${t} Z`;
+		function ve(e) {
+			let t = L.value.plot.top + L.value.plot.height, n = e[0], r = e[e.length - 1], i = k.flush && n.x === V.value.first ? V.value.left : n.x, a = k.flush && r.x === V.value.last ? V.value.right : r.x;
+			return `${W(e)} L${a} ${t} L${i} ${t} Z`;
 		}
-		let q = `iryx-area-${ee()}`, J = x(), Y = u(() => J.value == null ? [] : V.value.flatMap((e) => {
+		let G = `iryx-area-${D()}`, K = `iryx-plot-clip-${D()}`, q = S(), J = f(() => q.value == null ? [] : z.value.flatMap((e) => {
 			for (let t of e.runs) {
-				let n = t.find((e) => e.index === J.value);
+				let n = t.find((e) => e.index === q.value);
 				if (n) return [{
 					...n,
 					color: e.color
 				}];
 			}
 			return [];
-		})), X = u(() => J.value == null ? void 0 : B(z.value.pointAt(J.value))), Z = u(() => {
-			if (J.value == null) return;
-			let e = k.data[J.value];
+		})), Y = f(() => q.value == null ? void 0 : R(L.value.pointAt(q.value))), X = f(() => {
+			if (q.value == null) return;
+			let e = k.data[q.value];
 			if (!e) return;
-			let t = I.value.map((t, n) => ({
+			let t = P.value.map((t, n) => ({
 				name: t.name ?? t.key,
 				color: i(a(t, n)),
-				value: R(e, t.key)
+				value: I(e, t.key)
 			})).filter((e) => e.value != null).map((e) => ({
 				...e,
-				value: F(e.value)
+				value: N(e.value)
 			}));
 			if (!t.length) return;
-			let n = L.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
+			let n = F.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
 			return {
 				label: e.label,
 				rows: t,
-				multi: L.value,
-				x: r(z.value.pointAt(J.value), "x".repeat(n), N.value),
-				y: Math.min(...Y.value.map((e) => e.y), z.value.plot.top + z.value.plot.height)
+				multi: F.value,
+				x: r(L.value.pointAt(q.value), "x".repeat(n), M.value),
+				y: Math.min(...J.value.map((e) => e.y), L.value.plot.top + L.value.plot.height)
 			};
-		}), Q = u(() => c());
+		}), Z = s(f(() => k.animate)), { revealed: ye } = c(f(() => !!(M.value && z.value.length)), Z), be = f(() => ({
+			transform: `scaleX(${+!!ye.value})`,
+			transformOrigin: `${L.value.plot.left}px 0px`,
+			transition: `transform ${Z.value.duration}ms ${Z.value.css}`
+		})), Q = f(() => u());
 		function $(e, t) {
 			let n = k.ui?.[e];
-			return j.value ? [n, t] : Q.value[e]({ class: [n, t] });
+			return A.value ? [n, t] : Q.value[e]({ class: [n, t] });
 		}
-		return (e, t) => (b(), p("div", {
+		return (e, t) => (x(), m("div", {
 			ref_key: "root",
-			ref: M,
+			ref: j,
 			role: k.label ? "figure" : void 0,
 			"aria-label": k.label,
-			class: _($("root", k.class))
+			class: v($("root", k.class))
 		}, [
-			de.value ? (b(), d(s, {
+			_e.value ? (x(), ee(l, {
 				key: 0,
-				series: I.value,
+				series: P.value,
 				unstyled: k.unstyled
-			}, null, 8, ["series", "unstyled"])) : f("", !0),
-			m("div", { class: _(j.value ? void 0 : Q.value.plot()) }, [(b(), p("svg", {
-				width: T(N),
+			}, null, 8, ["series", "unstyled"])) : p("", !0),
+			h("div", { class: v(A.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
+				width: E(M),
 				height: k.height,
-				viewBox: `0 0 ${T(N)} ${k.height}`,
+				viewBox: `0 0 ${E(M)} ${k.height}`,
 				"aria-hidden": "true",
-				class: _($("svg"))
+				class: v($("svg"))
 			}, [
-				k.axis ? (b(!0), p(l, { key: 0 }, S(z.value.ticks, (e) => (b(), p("g", { key: `tick-${e}` }, [m("line", {
-					x1: z.value.plot.left,
-					y1: z.value.y(e),
-					x2: z.value.plot.left + z.value.plot.width,
-					y2: z.value.y(e),
+				k.axis ? (x(!0), m(d, { key: 0 }, C(L.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
+					x1: L.value.plot.left,
+					y1: L.value.y(e),
+					x2: L.value.plot.left + L.value.plot.width,
+					y2: L.value.y(e),
 					"stroke-width": "1",
-					class: _($("grid"))
-				}, null, 10, re), m("text", {
-					x: z.value.plot.left - T(8),
-					y: z.value.y(e),
+					class: v($("grid"))
+				}, null, 10, O), h("text", {
+					x: L.value.plot.left - E(8),
+					y: L.value.y(e),
 					"text-anchor": "end",
 					"dominant-baseline": "middle",
-					class: _($("tick"))
-				}, w(F(e)), 11, ie)]))), 128)) : f("", !0),
-				C(e.$slots, "underlay", v(g(z.value))),
-				H.value ? (b(), p("defs", ae, [m("linearGradient", {
-					id: q,
+					class: v($("tick"))
+				}, T(N(e)), 11, re)]))), 128)) : p("", !0),
+				w(e.$slots, "underlay", y(_(L.value))),
+				B.value ? (x(), m("defs", ie, [h("linearGradient", {
+					id: G,
 					x1: "0",
 					y1: "0",
 					x2: "0",
 					y2: "1"
-				}, [...t[1] ||= [m("stop", {
+				}, [...t[1] ||= [h("stop", {
 					offset: "0%",
 					"stop-color": "currentColor",
 					"stop-opacity": "0.35"
-				}, null, -1), m("stop", {
+				}, null, -1), h("stop", {
 					offset: "100%",
 					"stop-color": "currentColor",
 					"stop-opacity": "0"
-				}, null, -1)]])])) : f("", !0),
-				H.value ? (b(!0), p(l, { key: 2 }, S(V.value[0].runs, (e, t) => (b(), p("path", {
-					key: `area-${t}`,
-					d: fe(e),
-					fill: `url(#${q})`,
-					style: y({ color: V.value[0].color }),
-					class: _($("area"))
-				}, null, 14, oe))), 128)) : f("", !0),
-				X.value == null ? f("", !0) : (b(), p("line", {
-					key: 3,
-					x1: X.value,
-					y1: z.value.plot.top,
-					x2: X.value,
-					y2: z.value.plot.top + z.value.plot.height,
+				}, null, -1)]]), h("clipPath", { id: K }, [h("rect", {
+					x: L.value.plot.left,
+					y: L.value.plot.top,
+					width: L.value.plot.width,
+					height: L.value.plot.height,
+					style: b(be.value)
+				}, null, 12, ae)])])) : p("", !0),
+				Y.value == null ? p("", !0) : (x(), m("line", {
+					key: 2,
+					x1: Y.value,
+					y1: L.value.plot.top,
+					x2: Y.value,
+					y2: L.value.plot.top + L.value.plot.height,
 					"stroke-width": "1",
-					class: _($("crosshair"))
-				}, null, 10, se)),
-				(b(!0), p(l, null, S(V.value, (e) => (b(), p(l, { key: `series-${e.seriesIndex}` }, [(b(!0), p(l, null, S(e.runs, (t, n) => (b(), p("path", {
+					class: v($("crosshair"))
+				}, null, 10, oe)),
+				h("g", { "clip-path": `url(#${K})` }, [(x(!0), m(d, null, C(B.value ? z.value[0].runs : [], (e, t) => (x(), m("path", {
+					key: `area-${t}`,
+					d: ve(e),
+					fill: `url(#${G})`,
+					style: b({ color: z.value[0].color }),
+					class: v($("area"))
+				}, null, 14, ce))), 128)), (x(!0), m(d, null, C(z.value, (e) => (x(), m(d, { key: `series-${e.seriesIndex}` }, [(x(!0), m(d, null, C(e.runs, (t, n) => (x(), m("path", {
 					key: `line-${e.seriesIndex}-${n}`,
-					d: K(t),
-					style: y({ stroke: e.color }),
-					class: _($("line"))
-				}, null, 14, ce))), 128))], 64))), 128)),
-				(b(!0), p(l, null, S(Y.value, (e, t) => (b(), p(l, { key: `marker-${t}` }, [m("circle", {
+					d: W(t),
+					style: b({ stroke: e.color }),
+					class: v($("line"))
+				}, null, 14, le))), 128))], 64))), 128))], 8, se),
+				(x(!0), m(d, null, C(J.value, (e, t) => (x(), m(d, { key: `marker-${t}` }, [h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "6",
-					class: _($("markerRing"))
-				}, null, 10, le), m("circle", {
+					class: v($("markerRing"))
+				}, null, 10, ue), h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "4",
-					style: y({ fill: e.color }),
-					class: _($("marker"))
-				}, null, 14, ue)], 64))), 128)),
-				(b(!0), p(l, null, S(k.data, (e, t) => (b(), p(l, { key: `label-${e.label}-${t}` }, [t % z.value.labelStep === 0 ? (b(), p("text", {
+					style: b({ fill: e.color }),
+					class: v($("marker"))
+				}, null, 14, de)], 64))), 128)),
+				(x(!0), m(d, null, C(k.data, (e, t) => (x(), m(d, { key: `label-${e.label}-${t}` }, [t % L.value.labelStep === 0 ? (x(), m("text", {
 					key: 0,
-					x: z.value.pointAt(t),
-					y: z.value.plot.top + z.value.plot.height + 14,
+					x: L.value.pointAt(t),
+					y: L.value.plot.top + L.value.plot.height + 14,
 					"text-anchor": "middle",
-					class: _($("category"))
-				}, w(e.label), 11, E)) : f("", !0)], 64))), 128)),
-				C(e.$slots, "overlay", v(g(z.value))),
-				(b(!0), p(l, null, S(k.data, (e, n) => (b(), p("rect", {
+					class: v($("category"))
+				}, T(e.label), 11, fe)) : p("", !0)], 64))), 128)),
+				w(e.$slots, "overlay", y(_(L.value))),
+				(x(!0), m(d, null, C(k.data, (e, n) => (x(), m("rect", {
 					key: `hit-${e.label}-${n}`,
-					x: z.value.plot.left + z.value.bandWidth * n,
-					y: z.value.plot.top,
-					width: z.value.bandWidth,
-					height: z.value.plot.height,
-					class: _(j.value ? void 0 : Q.value.hit()),
-					onPointerenter: (e) => J.value = n,
-					onPointerleave: t[0] ||= (e) => J.value = void 0
-				}, null, 42, D))), 128))
-			], 10, ne)), Z.value ? (b(), p("div", {
+					x: L.value.plot.left + L.value.bandWidth * n,
+					y: L.value.plot.top,
+					width: L.value.bandWidth,
+					height: L.value.plot.height,
+					class: v(A.value ? void 0 : Q.value.hit()),
+					onPointerenter: (e) => q.value = n,
+					onPointerleave: t[0] ||= (e) => q.value = void 0
+				}, null, 42, pe))), 128))
+			], 10, ne)), X.value ? (x(), m("div", {
 				key: 0,
-				class: _($("tooltip", Z.value.multi ? "flex-col items-start gap-1" : void 0)),
-				style: y({
-					left: `${Z.value.x}px`,
-					top: `${Z.value.y}px`,
+				class: v($("tooltip", X.value.multi ? "flex-col items-start gap-1" : void 0)),
+				style: b({
+					left: `${X.value.x}px`,
+					top: `${X.value.y}px`,
 					transform: "translate(-50%, -100%) translateY(-12px)"
 				})
-			}, [m("span", { class: _($("tooltipLabel")) }, w(Z.value.label), 3), Z.value.multi ? (b(!0), p(l, { key: 0 }, S(Z.value.rows, (e) => (b(), p("span", {
+			}, [h("span", { class: v($("tooltipLabel")) }, T(X.value.label), 3), X.value.multi ? (x(!0), m(d, { key: 0 }, C(X.value.rows, (e) => (x(), m("span", {
 				key: e.name,
 				class: "flex items-center gap-1.5"
 			}, [
-				m("span", {
+				h("span", {
 					class: "size-2 shrink-0 rounded-full",
-					style: y({ background: e.color })
+					style: b({ background: e.color })
 				}, null, 4),
-				m("span", { class: _($("tooltipLabel")) }, w(e.name), 3),
-				m("span", { class: _($("tooltipValue")) }, w(e.value), 3)
-			]))), 128)) : (b(), p("span", {
+				h("span", { class: v($("tooltipLabel")) }, T(e.name), 3),
+				h("span", { class: v($("tooltipValue")) }, T(e.value), 3)
+			]))), 128)) : (x(), m("span", {
 				key: 1,
-				class: _($("tooltipValue"))
-			}, w(Z.value.rows[0].value), 3))], 6)) : f("", !0)], 2),
-			m("div", { class: _($("table")) }, [m("table", null, [
-				m("caption", null, w(k.label), 1),
-				m("thead", null, [m("tr", null, [t[2] ||= m("th", { scope: "col" }, " Category ", -1), (b(!0), p(l, null, S(I.value, (e) => (b(), p("th", {
+				class: v($("tooltipValue"))
+			}, T(X.value.rows[0].value), 3))], 6)) : p("", !0)], 2),
+			h("div", { class: v($("table")) }, [h("table", null, [
+				h("caption", null, T(k.label), 1),
+				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(d, null, C(P.value, (e) => (x(), m("th", {
 					key: e.key,
 					scope: "col"
-				}, w(e.name ?? "Value"), 1))), 128))])]),
-				m("tbody", null, [(b(!0), p(l, null, S(k.data, (e, t) => (b(), p("tr", { key: `row-${e.label}-${t}` }, [m("th", O, w(e.label), 1), (b(!0), p(l, null, S(I.value, (t) => (b(), p("td", { key: t.key }, w(R(e, t.key) == null ? "—" : F(R(e, t.key))), 1))), 128))]))), 128))])
+				}, T(e.name ?? "Value"), 1))), 128))])]),
+				h("tbody", null, [(x(!0), m(d, null, C(k.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", me, T(e.label), 1), (x(!0), m(d, null, C(P.value, (t) => (x(), m("td", { key: t.key }, T(I(e, t.key) == null ? "—" : N(I(e, t.key))), 1))), 128))]))), 128))])
 			])], 2)
 		], 10, te));
 	}

package/dist/components/Sparkline.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ChartAnimate } from '../composables/chart-reveal';
 import type { SparseValue } from '../composables/scale';
 export interface SparklineProps {
     /** Values, oldest first. `null` is a gap in the series, not a zero. */
@@ -21,6 +22,13 @@ export interface SparklineProps {
     label?: string;
     /** Rendered height in px. Width always fills the container. */
     height?: number;
+    /**
+     * Draw the line on across the box on the first paint. Off by default here,
+     * unlike the full-size charts: a sparkline usually sits inside a stat tile
+     * or a table row, and a page of them animating at once is a distraction
+     * rather than an arrival.
+     */
+    animate?: ChartAnimate;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;
@@ -31,6 +39,7 @@ declare const __VLS_export: import("vue").DefineComponent<SparklineProps, {}, {}
     variant: "line" | "area";
     unstyled: boolean;
     data: readonly SparseValue[];
+    animate: ChartAnimate;
     height: number;
     baseline: "min" | "zero";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;