iryx-ui 0.14.0 → 0.16.0

package/dist/components/Sparkline.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,16 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { extent as t, linearScale as n } from "../composables/scale.js";
-import { sparklineTheme as r } from "../theme/sparkline.js";
-import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p } from "vue";
+import { useChartAnimation as r, useChartReveal as i } from "../composables/chart-reveal.js";
+import { sparklineTheme as a } from "../theme/sparkline.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, useId as g } from "vue";
 //#region src/components/Sparkline.vue?vue&type=script&setup=true&lang.ts
-var m = [
+var _ = [
 	"viewBox",
 	"height",
 	"role",
 	"aria-label",
 	"aria-hidden"
-], h = ["d"], g = ["d"], _ = ["d"], v = ["d"], y = 100, b = /*@__PURE__*/ l({
+], v = ["clip-path"], y = ["d", "fill"], b = ["d"], x = ["d"], S = ["d"], C = 100, w = /*@__PURE__*/ d({
 	__name: "Sparkline",
 	props: {
 		data: { default: () => [] },
@@ -21,6 +22,10 @@ var m = [
 		muted: { type: Boolean },
 		label: {},
 		height: { default: 32 },
+		animate: {
+			type: [Boolean, Object],
+			default: !1
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -28,83 +33,115 @@ var m = [
 		class: {},
 		ui: {}
 	},
-	setup(l) {
-		let b = l, x = e(), S = a(() => b.unstyled ?? x.unstyled), C = a(() => b.endDot ? 6 : 1), w = a(() => Math.max(b.height - C.value * 2, 1)), T = a(() => {
-			let e = b.data, r = t(e);
+	setup(d) {
+		let w = d, T = e(), E = s(() => w.unstyled ?? T.unstyled), D = s(() => w.endDot ? 6 : 1), O = s(() => Math.max(w.height - D.value * 2, 1)), k = s(() => {
+			let e = w.data, r = t(e);
 			if (!r) return [];
-			let [i, a] = r, o = b.min ?? i, s = b.max ?? a, c = n([0, Math.max(e.length - 1, 0)], [0, y]), l = n([o, s], [y, 0]), u = [], d = [];
+			let [i, a] = r, o = w.min ?? i, s = w.max ?? a, c = n([0, Math.max(e.length - 1, 0)], [0, C]), l = n([o, s], [C, 0]), u = [], d = [];
 			return e.forEach((e, t) => {
 				if (typeof e != "number" || !Number.isFinite(e)) {
 					d.length && u.push(d), d = [];
 					return;
 				}
 				d.push({
-					x: E(c(t)),
-					y: E(l(e))
+					x: A(c(t)),
+					y: A(l(e))
 				});
 			}), d.length && u.push(d), u;
 		});
-		function E(e) {
+		function A(e) {
 			return Math.round(e * 100) / 100;
 		}
-		function D(e) {
+		function j(e) {
 			return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x} ${e.y}`).join(" ");
 		}
-		let O = a(() => {
-			let e = t(b.data);
-			if (!e) return y;
-			let r = b.min ?? e[0], i = b.max ?? e[1];
-			return b.baseline === "zero" && r <= 0 && i >= 0 ? E(n([r, i], [y, 0])(0)) : y;
+		let M = s(() => {
+			let e = t(w.data);
+			if (!e) return C;
+			let r = w.min ?? e[0], i = w.max ?? e[1];
+			return w.baseline === "zero" && r <= 0 && i >= 0 ? A(n([r, i], [C, 0])(0)) : C;
 		});
-		function k(e) {
+		function N(e) {
 			let t = e[0], n = e[e.length - 1];
-			return `${D(e)} L${n.x} ${O.value} L${t.x} ${O.value} Z`;
+			return `${j(e)} L${n.x} ${M.value} L${t.x} ${M.value} Z`;
 		}
-		let A = a(() => {
-			let e = T.value[T.value.length - 1];
+		let P = r(s(() => w.animate)), { revealed: F } = i(s(() => k.value.length > 0), P), I = s(() => ({
+			transform: `scaleX(${+!!F.value})`,
+			transformOrigin: "0px 0px",
+			transition: `transform ${P.value.duration}ms ${P.value.css}`
+		})), L = s(() => ({
+			opacity: +!!F.value,
+			transition: `opacity ${Math.round(P.value.duration * .3)}ms ${P.value.css}`,
+			transitionDelay: `${Math.round(P.value.duration * .8)}ms`
+		})), R = `iryx-spark-clip-${g()}`, z = `iryx-spark-area-${g()}`, B = s(() => {
+			let e = k.value[k.value.length - 1];
 			return e?.[e.length - 1];
-		}), j = a(() => r({ muted: b.muted }));
-		function M(e, t) {
-			let n = b.ui?.[e];
-			return S.value ? [n, t] : j.value[e]({ class: [n, t] });
+		}), V = s(() => a({ muted: w.muted }));
+		function H(e, t) {
+			let n = w.ui?.[e];
+			return E.value ? [n, t] : V.value[e]({ class: [n, t] });
 		}
-		return (e, t) => (f(), s("span", {
-			class: u(M("root", b.class)),
-			style: d({ padding: `${C.value}px` })
-		}, [(f(), s("svg", {
-			viewBox: `0 0 ${y} ${y}`,
+		return (e, t) => (m(), l("span", {
+			class: f(H("root", w.class)),
+			style: p({ padding: `${D.value}px` })
+		}, [(m(), l("svg", {
+			viewBox: `0 0 ${C} ${C}`,
 			preserveAspectRatio: "none",
-			height: w.value,
-			style: d({ height: `${w.value}px` }),
-			role: b.label ? "img" : void 0,
-			"aria-label": b.label,
-			"aria-hidden": b.label ? void 0 : !0,
-			class: u(M("plot"))
+			height: O.value,
+			style: p({ height: `${O.value}px` }),
+			role: w.label ? "img" : void 0,
+			"aria-label": w.label,
+			"aria-hidden": w.label ? void 0 : !0,
+			class: f(H("plot"))
 		}, [
-			b.variant === "area" ? (f(!0), s(i, { key: 0 }, p(T.value, (e, t) => (f(), s("path", {
+			u("defs", null, [u("linearGradient", {
+				id: z,
+				gradientUnits: "userSpaceOnUse",
+				x1: 0,
+				y1: 0,
+				x2: 0,
+				y2: C
+			}, [...t[0] ||= [u("stop", {
+				offset: "0%",
+				"stop-color": "currentColor",
+				"stop-opacity": "0.35"
+			}, null, -1), u("stop", {
+				offset: "100%",
+				"stop-color": "currentColor",
+				"stop-opacity": "0"
+			}, null, -1)]]), u("clipPath", { id: R }, [u("rect", {
+				x: "0",
+				y: "0",
+				width: C,
+				height: C,
+				style: p(I.value)
+			}, null, 4)])]),
+			u("g", { "clip-path": `url(#${R})` }, [(m(!0), l(o, null, h(w.variant === "area" ? k.value : [], (e, t) => (m(), l("path", {
 				key: `area-${t}`,
-				d: k(e),
-				class: u(M("area"))
-			}, null, 10, h))), 128)) : o("", !0),
-			(f(!0), s(i, null, p(T.value, (e, t) => (f(), s("path", {
+				d: N(e),
+				fill: `url(#${z})`,
+				class: f(H("area"))
+			}, null, 10, y))), 128)), (m(!0), l(o, null, h(k.value, (e, t) => (m(), l("path", {
 				key: `line-${t}`,
-				d: D(e),
+				d: j(e),
 				"vector-effect": "non-scaling-stroke",
-				class: u(M("line"))
-			}, null, 10, g))), 128)),
-			b.endDot && A.value ? (f(), s(i, { key: 1 }, [c("path", {
-				d: `M${A.value.x} ${A.value.y} L${A.value.x} ${A.value.y}`,
+				class: f(H("line"))
+			}, null, 10, b))), 128))], 8, v),
+			w.endDot && B.value ? (m(), l(o, { key: 0 }, [u("path", {
+				d: `M${B.value.x} ${B.value.y} L${B.value.x} ${B.value.y}`,
 				"stroke-width": "12",
 				"vector-effect": "non-scaling-stroke",
-				class: u(M("ring"))
-			}, null, 10, _), c("path", {
-				d: `M${A.value.x} ${A.value.y} L${A.value.x} ${A.value.y}`,
+				style: p(L.value),
+				class: f(H("ring"))
+			}, null, 14, x), u("path", {
+				d: `M${B.value.x} ${B.value.y} L${B.value.x} ${B.value.y}`,
 				"stroke-width": "8",
 				"vector-effect": "non-scaling-stroke",
-				class: u(M("dot"))
-			}, null, 10, v)], 64)) : o("", !0)
-		], 14, m))], 6));
+				style: p(L.value),
+				class: f(H("dot"))
+			}, null, 14, S)], 64)) : c("", !0)
+		], 14, _))], 6));
 	}
 });
 //#endregion
-export { b as default };
+export { w as default };

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

@@ -32,7 +32,7 @@ export interface StatProps {
     };
 }
 declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {
-    trend: "neutral" | "up" | "down";
+    trend: "up" | "down" | "neutral";
 }, __VLS_19: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_8) => any;

package/dist/components/Stat.vue_vue_type_script_setup_true_lang.js

@@ -24,35 +24,35 @@ var x = /*@__PURE__*/ u({
 		ui: {}
 	},
 	setup(u) {
-		let x = u, S = r(() => x.trend ? x.trend : x.delta == null || x.delta === 0 ? "neutral" : x.delta > 0 ? "up" : "down"), C = r(() => ({
+		let x = u, S = r(() => x.delta == null || x.delta === 0 ? "neutral" : x.delta > 0 ? "up" : "down"), C = r(() => x.trend ?? S.value), w = r(() => ({
 			up: y,
 			down: _,
 			neutral: v
-		})[S.value]), w = r(() => {
+		})[S.value]), T = r(() => {
 			if (x.delta != null) return x.formatDelta ? x.formatDelta(x.delta) : `${x.delta > 0 ? "+" : ""}${x.delta}%`;
-		}), T = e(), E = r(() => x.unstyled ?? T.unstyled), D = r(() => n({
+		}), E = e(), D = r(() => x.unstyled ?? E.unstyled), O = r(() => n({
 			size: x.size,
-			trend: S.value
-		})), O = r(() => E.value ? [x.ui?.root, x.class] : D.value.root({ class: [x.ui?.root, x.class] })), k = r(() => E.value ? x.ui?.label : D.value.label({ class: x.ui?.label })), A = r(() => E.value ? x.ui?.value : D.value.value({ class: x.ui?.value })), j = r(() => E.value ? x.ui?.delta : D.value.delta({ class: x.ui?.delta })), M = r(() => E.value ? x.ui?.hint : D.value.hint({ class: x.ui?.hint })), N = r(() => E.value ? x.ui?.row : D.value.row({ class: x.ui?.row }));
+			trend: C.value
+		})), k = r(() => D.value ? [x.ui?.root, x.class] : O.value.root({ class: [x.ui?.root, x.class] })), A = r(() => D.value ? x.ui?.label : O.value.label({ class: x.ui?.label })), j = r(() => D.value ? x.ui?.value : O.value.value({ class: x.ui?.value })), M = r(() => D.value ? x.ui?.delta : O.value.delta({ class: x.ui?.delta })), N = r(() => D.value ? x.ui?.hint : O.value.hint({ class: x.ui?.hint })), P = r(() => D.value ? x.ui?.row : O.value.row({ class: x.ui?.row }));
 		return (e, n) => (f(), i(h(b), {
 			as: x.as,
-			class: d(O.value)
+			class: d(k.value)
 		}, {
 			default: g(() => [
 				x.label || e.$slots.label ? (f(), o("span", {
 					key: 0,
-					class: d(k.value)
+					class: d(A.value)
 				}, [p(e.$slots, "label", {}, () => [c(m(x.label), 1)])], 2)) : a("", !0),
-				s("span", { class: d(N.value) }, [s("span", { class: d(A.value) }, [p(e.$slots, "default", {}, () => [c(m(x.value), 1)])], 2), w.value || e.$slots.delta ? (f(), o("span", {
+				s("span", { class: d(P.value) }, [s("span", { class: d(j.value) }, [p(e.$slots, "default", {}, () => [c(m(x.value), 1)])], 2), T.value || e.$slots.delta ? (f(), o("span", {
 					key: 0,
-					class: d(j.value)
-				}, [p(e.$slots, "delta", { trend: S.value }, () => [l(t, {
-					icon: C.value,
+					class: d(M.value)
+				}, [p(e.$slots, "delta", { trend: C.value }, () => [l(t, {
+					icon: w.value,
 					"data-icon": "inline-start"
-				}, null, 8, ["icon"]), c(" " + m(w.value), 1)])], 2)) : a("", !0)], 2),
+				}, null, 8, ["icon"]), c(" " + m(T.value), 1)])], 2)) : a("", !0)], 2),
 				x.hint || e.$slots.hint ? (f(), o("span", {
 					key: 1,
-					class: d(M.value)
+					class: d(N.value)
 				}, [p(e.$slots, "hint", {}, () => [c(m(x.hint), 1)])], 2)) : a("", !0)
 			]),
 			_: 3

package/dist/components/index.d.ts

@@ -24,6 +24,7 @@ export { default as ContextMenu } from './ContextMenu.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as DateRangePicker } from './DateRangePicker.vue';
 export { default as Dialog } from './Dialog.vue';
+export { default as DonutChart } from './DonutChart.vue';
 export { default as Drawer } from './Drawer.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as EmptyState } from './EmptyState.vue';

package/dist/components/index.js

@@ -3,148 +3,150 @@ import t from "./Icon.js";
 import n from "./Accordion.js";
 import r from "./Alert.js";
 import i from "./App.js";
-import a from "./AppShell.js";
-import o from "./AspectRatio.js";
-import s from "./Avatar.js";
-import c from "./AvatarGroup.js";
-import l from "./Badge.js";
-import u from "./Banner.js";
-import d from "./ChartLegend.js";
-import f from "./BarChart.js";
-import p from "./Breadcrumb.js";
-import m from "./Button.js";
-import h from "./ButtonGroup.js";
-import g from "./Card.js";
-import _ from "./Checkbox.js";
-import v from "./Collapsible.js";
-import y from "./ColorPicker.js";
-import b from "./Combobox.js";
-import x from "./Kbd.js";
-import S from "./CommandPalette.js";
-import C from "./Dialog.js";
-import w from "./ConfirmDialog.js";
-import T from "./Container.js";
-import E from "./ContextMenu.js";
-import D from "./DatePicker.js";
-import O from "./DateRangePicker.js";
-import k from "./Drawer.js";
-import A from "./DropdownMenu.js";
-import j from "./EmptyState.js";
-import M from "./FileUpload.js";
-import N from "./Form.js";
-import P from "./Label.js";
-import F from "./FormField.js";
-import I from "./Input.js";
-import L from "./LineChart.js";
-import R from "./Menubar.js";
-import z from "./NavigationMenu.js";
-import B from "./NumberInput.js";
-import V from "./PageHeader.js";
-import H from "./Pagination.js";
-import U from "./PasswordInput.js";
-import W from "./PinInput.js";
-import G from "./Popover.js";
-import K from "./Progress.js";
-import q from "./RadioGroup.js";
-import J from "./ScrollArea.js";
-import Y from "./ScrollFade.js";
-import X from "./Select.js";
-import Z from "./Separator.js";
-import Q from "./Sidebar.js";
-import $ from "./SignaturePad.js";
-import ee from "./Skeleton.js";
-import te from "./Slider.js";
-import ne from "./Sparkline.js";
-import re from "./Splitter.js";
-import ie from "./Stat.js";
-import ae from "./Stepper.js";
-import oe from "./Switch.js";
-import se from "./Table.js";
-import ce from "./Tabs.js";
-import le from "./TagsInput.js";
-import ue from "./Textarea.js";
-import de from "./TimeField.js";
-import fe from "./Timeline.js";
-import pe from "./Toaster.js";
-import me from "./Toggle.js";
-import he from "./ToggleGroup.js";
-import ge from "./Toolbar.js";
-import _e from "./Tooltip.js";
-import ve from "./Tree.js";
+import a from "./Drawer.js";
+import o from "./AppShell.js";
+import s from "./AspectRatio.js";
+import c from "./Avatar.js";
+import l from "./AvatarGroup.js";
+import u from "./Badge.js";
+import d from "./Banner.js";
+import f from "./ChartLegend.js";
+import p from "./BarChart.js";
+import m from "./Breadcrumb.js";
+import h from "./Button.js";
+import g from "./ButtonGroup.js";
+import _ from "./Card.js";
+import v from "./Checkbox.js";
+import y from "./Collapsible.js";
+import b from "./ColorPicker.js";
+import x from "./Combobox.js";
+import S from "./Kbd.js";
+import C from "./CommandPalette.js";
+import w from "./Dialog.js";
+import T from "./ConfirmDialog.js";
+import E from "./Container.js";
+import D from "./ContextMenu.js";
+import O from "./DatePicker.js";
+import k from "./DateRangePicker.js";
+import A from "./DonutChart.js";
+import j from "./DropdownMenu.js";
+import M from "./EmptyState.js";
+import N from "./FileUpload.js";
+import P from "./Form.js";
+import F from "./Label.js";
+import I from "./FormField.js";
+import L from "./Input.js";
+import R from "./LineChart.js";
+import z from "./Menubar.js";
+import B from "./NavigationMenu.js";
+import V from "./NumberInput.js";
+import H from "./PageHeader.js";
+import U from "./Pagination.js";
+import W from "./PasswordInput.js";
+import G from "./PinInput.js";
+import K from "./Popover.js";
+import q from "./Progress.js";
+import J from "./RadioGroup.js";
+import Y from "./ScrollArea.js";
+import X from "./ScrollFade.js";
+import Z from "./Select.js";
+import Q from "./Separator.js";
+import $ from "./Sidebar.js";
+import ee from "./SignaturePad.js";
+import te from "./Skeleton.js";
+import ne from "./Slider.js";
+import re from "./Sparkline.js";
+import ie from "./Splitter.js";
+import ae from "./Stat.js";
+import oe from "./Stepper.js";
+import se from "./Switch.js";
+import ce from "./Table.js";
+import le from "./Tabs.js";
+import ue from "./TagsInput.js";
+import de from "./Textarea.js";
+import fe from "./TimeField.js";
+import pe from "./Timeline.js";
+import me from "./Toaster.js";
+import he from "./Toggle.js";
+import ge from "./ToggleGroup.js";
+import _e from "./Toolbar.js";
+import ve from "./Tooltip.js";
+import ye from "./Tree.js";
 //#region src/components/index.ts
-var ye = /* @__PURE__ */ e({
+var be = /* @__PURE__ */ e({
 	Accordion: () => n,
 	Alert: () => r,
 	App: () => i,
-	AppShell: () => a,
-	AspectRatio: () => o,
-	Avatar: () => s,
-	AvatarGroup: () => c,
-	Badge: () => l,
-	Banner: () => u,
-	BarChart: () => f,
-	Breadcrumb: () => p,
-	Button: () => m,
-	ButtonGroup: () => h,
-	Card: () => g,
-	ChartLegend: () => d,
-	Checkbox: () => _,
-	Collapsible: () => v,
-	ColorPicker: () => y,
-	Combobox: () => b,
-	CommandPalette: () => S,
-	ConfirmDialog: () => w,
-	Container: () => T,
-	ContextMenu: () => E,
-	DatePicker: () => D,
-	DateRangePicker: () => O,
-	Dialog: () => C,
-	Drawer: () => k,
-	DropdownMenu: () => A,
-	EmptyState: () => j,
-	FileUpload: () => M,
-	Form: () => N,
-	FormField: () => F,
+	AppShell: () => o,
+	AspectRatio: () => s,
+	Avatar: () => c,
+	AvatarGroup: () => l,
+	Badge: () => u,
+	Banner: () => d,
+	BarChart: () => p,
+	Breadcrumb: () => m,
+	Button: () => h,
+	ButtonGroup: () => g,
+	Card: () => _,
+	ChartLegend: () => f,
+	Checkbox: () => v,
+	Collapsible: () => y,
+	ColorPicker: () => b,
+	Combobox: () => x,
+	CommandPalette: () => C,
+	ConfirmDialog: () => T,
+	Container: () => E,
+	ContextMenu: () => D,
+	DatePicker: () => O,
+	DateRangePicker: () => k,
+	Dialog: () => w,
+	DonutChart: () => A,
+	Drawer: () => a,
+	DropdownMenu: () => j,
+	EmptyState: () => M,
+	FileUpload: () => N,
+	Form: () => P,
+	FormField: () => I,
 	Icon: () => t,
-	Input: () => I,
-	Kbd: () => x,
-	Label: () => P,
-	LineChart: () => L,
-	Menubar: () => R,
-	NavigationMenu: () => z,
-	NumberInput: () => B,
-	PageHeader: () => V,
-	Pagination: () => H,
-	PasswordInput: () => U,
-	PinInput: () => W,
-	Popover: () => G,
-	Progress: () => K,
-	RadioGroup: () => q,
-	ScrollArea: () => J,
-	ScrollFade: () => Y,
-	Select: () => X,
-	Separator: () => Z,
-	Sidebar: () => Q,
-	SignaturePad: () => $,
-	Skeleton: () => ee,
-	Slider: () => te,
-	Sparkline: () => ne,
-	Splitter: () => re,
-	Stat: () => ie,
-	Stepper: () => ae,
-	Switch: () => oe,
-	Table: () => se,
-	Tabs: () => ce,
-	TagsInput: () => le,
-	Textarea: () => ue,
-	TimeField: () => de,
-	Timeline: () => fe,
-	Toaster: () => pe,
-	Toggle: () => me,
-	ToggleGroup: () => he,
-	Toolbar: () => ge,
-	Tooltip: () => _e,
-	Tree: () => ve
+	Input: () => L,
+	Kbd: () => S,
+	Label: () => F,
+	LineChart: () => R,
+	Menubar: () => z,
+	NavigationMenu: () => B,
+	NumberInput: () => V,
+	PageHeader: () => H,
+	Pagination: () => U,
+	PasswordInput: () => W,
+	PinInput: () => G,
+	Popover: () => K,
+	Progress: () => q,
+	RadioGroup: () => J,
+	ScrollArea: () => Y,
+	ScrollFade: () => X,
+	Select: () => Z,
+	Separator: () => Q,
+	Sidebar: () => $,
+	SignaturePad: () => ee,
+	Skeleton: () => te,
+	Slider: () => ne,
+	Sparkline: () => re,
+	Splitter: () => ie,
+	Stat: () => ae,
+	Stepper: () => oe,
+	Switch: () => se,
+	Table: () => ce,
+	Tabs: () => le,
+	TagsInput: () => ue,
+	Textarea: () => de,
+	TimeField: () => fe,
+	Timeline: () => pe,
+	Toaster: () => me,
+	Toggle: () => he,
+	ToggleGroup: () => ge,
+	Toolbar: () => _e,
+	Tooltip: () => ve,
+	Tree: () => ye
 });
 //#endregion
-export { ye as components_exports };
+export { be as components_exports };

package/dist/composables/cartesian.d.ts

@@ -62,6 +62,13 @@ export interface CartesianLayout {
     labelStep: number;
     /** Centre of a category slot, in px along the category axis. */
     bandCentre: (index: number) => number;
+    /**
+     * Where a *point* sits, as against the middle of a band. The first lands
+     * on the left edge of the plot and the last on the right, so a line spans
+     * the full width instead of floating half a band clear of both sides.
+     * Bars want `bandCentre`; lines and areas want this.
+     */
+    pointAt: (index: number) => number;
 }
 export declare function cartesianLayout(input: CartesianInput): CartesianLayout;
 /** One plotted measure. `key` reads a field off each row; `name` labels it. */
@@ -93,8 +100,16 @@ export declare const SERIES_SLOTS = 8;
  * than saying so.
  */
 export declare function seriesColor(index: number): string;
-/** A series' palette slot: pinned if it has one, otherwise its position. */
-export declare function slotOf(entry: ChartSeries, index: number): number;
+/**
+ * A series' palette slot: pinned if it has one, otherwise its position.
+ *
+ * Typed on the pin alone rather than on `ChartSeries`, so the charts with no
+ * second axis — a donut's rows are their own identity — can share the rule
+ * without inventing a `key` they have no use for.
+ */
+export declare function slotOf(entry: {
+    slot?: number;
+}, index: number): number;
 /**
  * Dev-only warning.
  *

package/dist/composables/cartesian.js

@@ -16,7 +16,12 @@ function s(i) {
 		y: m,
 		bandWidth: g,
 		labelStep: y,
-		bandCentre: (e) => _ + g * (e + .5)
+		bandCentre: (e) => _ + g * (e + .5),
+		pointAt: (e) => {
+			if (i.categories <= 1) return _ + h / 2;
+			let t = g * .25, n = h - t * 2;
+			return _ + t + n * e / (i.categories - 1);
+		}
 	};
 }
 var c = 8;

package/dist/composables/chart-reveal.d.ts

@@ -0,0 +1,45 @@
+import type { Ref } from 'vue';
+/**
+ * The reveal every chart plays on its first paint, once per instance — a
+ * dashboard that re-animated on every poll would read as a fault.
+ *
+ * A CSS transition where the marks can be transformed, a per-frame value
+ * where they cannot: `d` is not an animatable property, so a donut has to
+ * recompute its geometry.
+ */
+export declare const REVEAL_DURATION = 700;
+/**
+ * A closed set rather than any CSS timing function: the same curve is handed
+ * to CSS as a string and solved in JavaScript for the donut, so both come
+ * from one set of control points.
+ */
+export type ChartEasing = 'ease-out' | 'ease-in' | 'ease-in-out' | 'linear';
+export interface ChartAnimation {
+    /** How long the reveal runs, in ms. */
+    duration?: number;
+    easing?: ChartEasing;
+}
+/** `false` turns the reveal off; an object tunes it. */
+export type ChartAnimate = boolean | ChartAnimation;
+export interface ResolvedAnimation {
+    enabled: boolean;
+    duration: number;
+    /** The curve as a CSS timing function. */
+    css: string;
+    /** The same curve, solved: progress in, eased progress out. */
+    ease: (t: number) => number;
+}
+export declare function useChartAnimation(animate: Ref<ChartAnimate | undefined>): import("vue").ComputedRef<ResolvedAnimation>;
+/**
+ * `false` for the first painted frame, `true` from the next — which is what
+ * makes a transition run. Gated on `ready` rather than on mount: a chart with
+ * no measured width yet would animate an empty box and be finished before the
+ * `ResizeObserver` reported.
+ */
+export declare function useChartReveal(ready: Ref<boolean>, animation: Ref<ResolvedAnimation>): {
+    revealed: Ref<boolean, boolean>;
+};
+/** Eased 0 to 1, for marks that have to be recomputed to be revealed. */
+export declare function useChartProgress(ready: Ref<boolean>, animation: Ref<ResolvedAnimation>): {
+    progress: Ref<number, number>;
+};