iryx-ui 0.15.0 → 0.16.0

package/README.md

@@ -62,7 +62,9 @@ Components are auto-imported with the `I` prefix.
       </IFormField>
 
       <template #footer>
-        <IButton @click="save">Save</IButton>
+        <IButton @click="save">
+          Save
+        </IButton>
       </template>
     </ICard>
   </IApp>

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
+export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
 //#endregion
 export { e as componentNames };

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

@@ -1,4 +1,5 @@
 import type { ChartSeries } from '../composables/cartesian';
+import type { ChartAnimate } from '../composables/chart-reveal';
 import type { SparseValue } from '../composables/scale';
 /**
  * A row. `value` is the single-series shortcut; with `series` set, each entry
@@ -37,6 +38,12 @@ export interface BarChartProps {
     ticks?: number;
     /** Drop the value axis and its gridlines. */
     axis?: boolean;
+    /**
+     * Grow the bars out of the baseline on the first paint. Skipped for a
+     * reader who has asked for reduced motion, and played once — not again when
+     * the data changes underneath it.
+     */
+    animate?: ChartAnimate;
     /** Drop the legend. Only honoured for a single series — see below. */
     legend?: boolean;
     /** Word for the stacked tooltip's sum — override for non-English apps. */
@@ -95,6 +102,7 @@ declare const __VLS_base: import("vue").DefineComponent<BarChartProps, {}, {}, {
     orientation: "vertical" | "horizontal";
     data: readonly BarChartDatum[];
     legend: boolean;
+    animate: ChartAnimate;
     height: number;
     ticks: number;
     axis: boolean;

package/dist/components/BarChart.vue_vue_type_script_setup_true_lang.js

@@ -1,39 +1,40 @@
 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, tooltipHalfWidth as o, warnOnSlotOverflow as s } from "../composables/cartesian.js";
-import { barChartTheme as c } from "../theme/bar-chart.js";
-import l from "./ChartLegend.js";
-import { Fragment as u, computed as d, createBlock as f, 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 } from "vue";
+import { useChartAnimation as c, useChartReveal as l } from "../composables/chart-reveal.js";
+import { barChartTheme as u } from "../theme/bar-chart.js";
+import d from "./ChartLegend.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, defineComponent as v, guardReactiveProps as y, normalizeClass as b, normalizeProps as x, normalizeStyle as S, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, unref as O } from "vue";
 //#region src/components/BarChart.vue?vue&type=script&setup=true&lang.ts
-var ee = ["role", "aria-label"], D = [
+var ee = ["role", "aria-label"], te = [
 	"width",
 	"height",
 	"viewBox"
-], te = [
+], ne = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], O = [
+], re = [
 	"x",
 	"y",
 	"text-anchor",
 	"dominant-baseline"
-], k = ["d"], A = [
+], ie = ["d"], k = [
 	"x",
 	"y",
 	"text-anchor",
 	"dominant-baseline"
-], ne = [
+], ae = [
 	"x",
 	"y",
 	"width",
 	"height",
 	"onPointerenter"
-], re = {
+], oe = {
 	key: 2,
 	class: "flex items-center gap-1.5 border-t border-border pt-1"
-}, ie = { scope: "row" }, ae = .7, j = /*@__PURE__*/ g({
+}, se = { scope: "row" }, ce = .7, A = /*@__PURE__*/ v({
 	__name: "BarChart",
 	props: {
 		data: { default: () => [] },
@@ -46,6 +47,10 @@ var ee = ["role", "aria-label"], D = [
 			type: Boolean,
 			default: !0
 		},
+		animate: {
+			type: [Boolean, Object],
+			default: !0
+		},
 		legend: {
 			type: Boolean,
 			default: !0
@@ -61,60 +66,60 @@ var ee = ["role", "aria-label"], D = [
 		class: {},
 		ui: {}
 	},
-	setup(g) {
-		let j = g, M = e(), N = d(() => j.unstyled ?? M.unstyled), P = S(), { width: F } = t(P), I = d(() => new Intl.NumberFormat(j.locale, j.format));
-		function L(e) {
-			return I.value.format(e);
+	setup(v) {
+		let A = v, j = e(), M = p(() => A.unstyled ?? j.unstyled), N = w(), { width: P } = t(N), le = p(() => new Intl.NumberFormat(A.locale, A.format));
+		function F(e) {
+			return le.value.format(e);
 		}
-		let R = d(() => {
-			let e = j.series?.length ? [...j.series] : [{ key: "value" }];
+		let I = p(() => {
+			let e = A.series?.length ? [...A.series] : [{ key: "value" }];
 			return s(e.length), e;
-		}), z = d(() => R.value.length > 1), oe = d(() => z.value || j.legend && R.value[0].name != null);
-		function B(e, t) {
+		}), L = p(() => I.value.length > 1), ue = p(() => L.value || A.legend && I.value[0].name != null);
+		function R(e, t) {
 			let n = e[t];
 			return typeof n == "number" && Number.isFinite(n) ? n : null;
 		}
-		let V = d(() => j.orientation === "horizontal"), H = d(() => j.stacked && z.value);
-		function U(e) {
+		let z = p(() => A.orientation === "horizontal"), B = p(() => A.stacked && L.value);
+		function V(e) {
 			let t = 0, n = 0;
-			for (let r of R.value) {
-				let i = B(e, r.key);
+			for (let r of I.value) {
+				let i = R(e, r.key);
 				i != null && (i >= 0 ? t += i : n += i);
 			}
 			return [t, n];
 		}
-		let W = d(() => n({
-			orientation: j.orientation,
-			values: H.value ? j.data.flatMap(U) : j.data.flatMap((e) => R.value.map((t) => B(e, t.key))),
-			categories: j.data.length,
-			longestLabel: Math.max(...j.data.map((e) => e.label.length), 1),
-			width: F.value,
-			height: j.height,
-			tickCount: j.ticks,
-			showAxis: j.axis,
-			formatTick: L,
+		let H = p(() => n({
+			orientation: A.orientation,
+			values: B.value ? A.data.flatMap(V) : A.data.flatMap((e) => I.value.map((t) => R(e, t.key))),
+			categories: A.data.length,
+			longestLabel: Math.max(...A.data.map((e) => e.label.length), 1),
+			width: P.value,
+			height: A.height,
+			tickCount: A.ticks,
+			showAxis: A.axis,
+			formatTick: F,
 			includeZero: !0
-		})), G = d(() => W.value.plot), K = d(() => W.value.y), q = d(() => W.value.bandWidth), J = d(() => q.value * ae), Y = d(() => Math.max(2, Math.min(24, J.value / (H.value ? 1 : R.value.length)))), se = d(() => {
-			if (!F.value || !j.data.length) return [];
-			let e = W.value.value(0), t = R.value.length, n = +(t > 1 && !H.value);
-			return j.data.flatMap((r, i) => {
-				let a = 0, o = 0, s = R.value.reduce((e, t, n) => {
-					let i = B(r, t.key);
+		})), U = p(() => H.value.plot), W = p(() => H.value.y), G = p(() => H.value.bandWidth), de = p(() => G.value * ce), K = p(() => Math.max(2, Math.min(24, de.value / (B.value ? 1 : I.value.length)))), q = p(() => {
+			if (!P.value || !A.data.length) return [];
+			let e = H.value.value(0), t = I.value.length, n = +(t > 1 && !B.value);
+			return A.data.flatMap((r, i) => {
+				let a = 0, o = 0, s = I.value.reduce((e, t, n) => {
+					let i = R(r, t.key);
 					return i != null && i >= 0 ? n : e;
-				}, -1), c = R.value.reduce((e, t, n) => {
-					let i = B(r, t.key);
+				}, -1), c = I.value.reduce((e, t, n) => {
+					let i = R(r, t.key);
 					return i != null && i < 0 ? n : e;
 				}, -1);
-				return R.value.flatMap((l, u) => {
-					let d = B(r, l.key);
+				return I.value.flatMap((l, u) => {
+					let d = R(r, l.key);
 					if (d == null) return [];
 					let f = e, p;
-					if (H.value) {
+					if (B.value) {
 						let e = d >= 0 ? a : o, t = e + d;
-						f = W.value.value(e), p = W.value.value(t), d >= 0 ? a = t : o = t;
-					} else p = W.value.value(d);
-					let m = H.value ? Y.value : Y.value * t, h = W.value.bandCentre(i) - m / 2 + (H.value ? 0 : Y.value * u) + n, g = Math.max(Y.value - n * 2, 1), _ = H.value ? Math.min(2, Math.abs(p - f) / 2) : 0, v = Math.max(Math.abs(p - f) - _, 0), y = p < f ? p + _ : f, b = !H.value || u === (d >= 0 ? s : c);
-					return [V.value ? {
+						f = H.value.value(e), p = H.value.value(t), d >= 0 ? a = t : o = t;
+					} else p = H.value.value(d);
+					let m = B.value ? K.value : K.value * t, h = H.value.bandCentre(i) - m / 2 + (B.value ? 0 : K.value * u) + n, g = Math.max(K.value - n * 2, 1), _ = B.value ? Math.min(2, Math.abs(p - f) / 2) : 0, v = Math.max(Math.abs(p - f) - _, 0), y = p < f ? p + _ : f, b = !B.value || u === (d >= 0 ? s : c);
+					return [z.value ? {
 						x: y,
 						y: h,
 						width: v,
@@ -136,7 +141,7 @@ var ee = ["role", "aria-label"], D = [
 				});
 			});
 		});
-		function ce(e) {
+		function fe(e) {
 			let { x: t, y: n, width: r, height: i } = e, a = t + r;
 			if (!e.capped) return `M${t} ${n} L${a} ${n} L${a} ${n + i} L${t} ${n + i} Z`;
 			let o = n + i, s = Math.min(4, r / 2, i / 2, e.direction === "up" || e.direction === "down" ? i : r);
@@ -147,154 +152,167 @@ var ee = ["role", "aria-label"], D = [
 				default: return `M${a} ${n} L${t + s} ${n} Q${t} ${n} ${t} ${n + s} L${t} ${o - s} Q${t} ${o} ${t + s} ${o} L${a} ${o} Z`;
 			}
 		}
-		let le = d(() => W.value.labelStep), X = S(), Z = d(() => {
-			if (X.value == null) return;
-			let e = j.data[X.value];
+		let J = p(() => H.value.labelStep), Y = w(), X = p(() => {
+			if (Y.value == null) return;
+			let e = A.data[Y.value];
 			if (!e) return;
-			let t = R.value.map((t, n) => ({
+			let t = I.value.map((t, n) => ({
 				name: t.name ?? t.key,
 				color: i(a(t, n)),
-				value: B(e, t.key)
+				value: R(e, t.key)
 			})).filter((e) => e.value != null).map((e) => ({
 				...e,
-				value: L(e.value)
+				value: F(e.value)
 			}));
 			if (!t.length) return;
-			let n = H.value ? L(U(e).reduce((e, t) => e + t, 0)) : void 0, s = z.value ? Math.max(e.label.length, n ? n.length + 6 : 0, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2, c = W.value.bandCentre(X.value);
-			if (V.value) {
-				let i = H.value ? W.value.value(U(e)[0]) : Math.max(...R.value.map((t) => {
-					let n = B(e, t.key);
-					return n == null ? -Infinity : W.value.value(n);
-				})), a = "x".repeat(s), l = o(a), u = i + l + 8, d = u + l <= F.value;
+			let n = B.value ? F(V(e).reduce((e, t) => e + t, 0)) : void 0, s = L.value ? Math.max(e.label.length, n ? n.length + 6 : 0, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2, c = H.value.bandCentre(Y.value);
+			if (z.value) {
+				let i = B.value ? H.value.value(V(e)[0]) : Math.max(...I.value.map((t) => {
+					let n = R(e, t.key);
+					return n == null ? -Infinity : H.value.value(n);
+				})), a = "x".repeat(s), l = o(a), u = i + l + 8, d = u + l <= P.value;
 				return {
 					label: e.label,
 					rows: t,
 					total: n,
-					multi: z.value,
-					x: r(d ? u : i - l - 8, a, F.value),
+					multi: L.value,
+					x: r(d ? u : i - l - 8, a, P.value),
 					y: c
 				};
 			}
-			let l = H.value ? W.value.value(U(e)[0]) : Math.min(...R.value.map((t) => {
-				let n = B(e, t.key);
-				return n == null ? Infinity : Math.min(W.value.value(n), W.value.value(0));
+			let l = B.value ? H.value.value(V(e)[0]) : Math.min(...I.value.map((t) => {
+				let n = R(e, t.key);
+				return n == null ? Infinity : Math.min(H.value.value(n), H.value.value(0));
 			}));
 			return {
 				label: e.label,
 				rows: t,
 				total: n,
-				multi: z.value,
-				x: r(c, "x".repeat(s), F.value),
+				multi: L.value,
+				x: r(c, "x".repeat(s), P.value),
 				y: l
 			};
-		}), Q = d(() => c());
-		function $(e, t) {
-			let n = j.ui?.[e];
-			return N.value ? [n, t] : Q.value[e]({ class: [n, t] });
+		}), Z = p(() => u());
+		function Q(e, t) {
+			let n = A.ui?.[e];
+			return M.value ? [n, t] : Z.value[e]({ class: [n, t] });
+		}
+		let pe = p(() => !!(P.value && q.value.length)), $ = c(p(() => A.animate)), { revealed: me } = l(pe, $);
+		function he(e) {
+			let t = H.value.value(0), n = z.value ? e.y + e.height / 2 : e.x + e.width / 2, r = z.value ? "scaleX" : "scaleY";
+			return {
+				transformOrigin: z.value ? `${t}px ${n}px` : `${n}px ${t}px`,
+				transform: `${r}(${+!!me.value})`,
+				transition: `transform ${$.value.duration}ms ${$.value.css}`,
+				transitionDelay: `${Math.min(e.categoryIndex * 30, 200)}ms`
+			};
 		}
-		function ue(e) {
-			let t = X.value != null && X.value !== e.categoryIndex;
-			return N.value ? [j.ui?.bar] : Q.value.bar({ class: [j.ui?.bar, t ? Q.value.faded() : void 0] });
+		function ge(e) {
+			let t = Y.value != null && Y.value !== e.categoryIndex;
+			return M.value ? [A.ui?.bar] : Z.value.bar({ class: [A.ui?.bar, t ? Z.value.faded() : void 0] });
 		}
-		return (e, t) => (x(), m("div", {
+		return (e, t) => (C(), g("div", {
 			ref_key: "root",
-			ref: P,
-			role: j.label ? "figure" : void 0,
-			"aria-label": j.label,
-			class: v($("root", j.class))
+			ref: N,
+			role: A.label ? "figure" : void 0,
+			"aria-label": A.label,
+			class: b(Q("root", A.class))
 		}, [
-			oe.value ? (x(), f(l, {
+			ue.value ? (C(), m(d, {
 				key: 0,
-				series: R.value,
-				unstyled: j.unstyled
-			}, null, 8, ["series", "unstyled"])) : p("", !0),
-			h("div", { class: v(N.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
-				width: E(F),
-				height: j.height,
-				viewBox: `0 0 ${E(F)} ${j.height}`,
+				series: I.value,
+				unstyled: A.unstyled
+			}, null, 8, ["series", "unstyled"])) : h("", !0),
+			_("div", { class: b(M.value ? void 0 : Z.value.plot()) }, [(C(), g("svg", {
+				width: O(P),
+				height: A.height,
+				viewBox: `0 0 ${O(P)} ${A.height}`,
 				"aria-hidden": "true",
-				class: v($("svg"))
+				class: b(Q("svg"))
 			}, [
-				j.axis ? (x(!0), m(u, { key: 0 }, C(W.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
-					x1: V.value ? W.value.value(e) : G.value.left,
-					y1: V.value ? G.value.top : K.value(e),
-					x2: V.value ? W.value.value(e) : G.value.left + G.value.width,
-					y2: V.value ? G.value.top + G.value.height : K.value(e),
+				A.axis ? (C(!0), g(f, { key: 0 }, T(H.value.ticks, (e) => (C(), g("g", { key: `tick-${e}` }, [_("line", {
+					x1: z.value ? H.value.value(e) : U.value.left,
+					y1: z.value ? U.value.top : W.value(e),
+					x2: z.value ? H.value.value(e) : U.value.left + U.value.width,
+					y2: z.value ? U.value.top + U.value.height : W.value(e),
 					"stroke-width": "1",
-					class: v($("grid"))
-				}, null, 10, te), h("text", {
-					x: V.value ? W.value.value(e) : G.value.left - E(8),
-					y: V.value ? G.value.top + G.value.height + 14 : K.value(e),
-					"text-anchor": V.value ? "middle" : "end",
-					"dominant-baseline": V.value ? void 0 : "middle",
-					class: v($("tick"))
-				}, T(L(e)), 11, O)]))), 128)) : p("", !0),
-				w(e.$slots, "underlay", y(_(W.value))),
-				(x(!0), m(u, null, C(se.value, (e, t) => (x(), m("path", {
+					class: b(Q("grid"))
+				}, null, 10, ne), _("text", {
+					x: z.value ? H.value.value(e) : U.value.left - O(8),
+					y: z.value ? U.value.top + U.value.height + 14 : W.value(e),
+					"text-anchor": z.value ? "middle" : "end",
+					"dominant-baseline": z.value ? void 0 : "middle",
+					class: b(Q("tick"))
+				}, D(F(e)), 11, re)]))), 128)) : h("", !0),
+				E(e.$slots, "underlay", x(y(H.value))),
+				(C(!0), g(f, null, T(q.value, (e, t) => (C(), g("path", {
 					key: `bar-${e.categoryIndex}-${e.seriesIndex}-${t}`,
-					d: ce(e),
-					style: b({ fill: E(i)(E(a)(R.value[e.seriesIndex], e.seriesIndex)) }),
-					class: v(ue(e))
-				}, null, 14, k))), 128)),
-				(x(!0), m(u, null, C(j.data, (e, t) => (x(), m(u, { key: `label-${e.label}-${t}` }, [t % le.value === 0 ? (x(), m("text", {
+					d: fe(e),
+					style: S({
+						fill: O(i)(O(a)(I.value[e.seriesIndex], e.seriesIndex)),
+						...he(e)
+					}),
+					class: b(ge(e))
+				}, null, 14, ie))), 128)),
+				(C(!0), g(f, null, T(A.data, (e, t) => (C(), g(f, { key: `label-${e.label}-${t}` }, [t % J.value === 0 ? (C(), g("text", {
 					key: 0,
-					x: V.value ? G.value.left - E(8) : W.value.bandCentre(t),
-					y: V.value ? W.value.bandCentre(t) : G.value.top + G.value.height + 14,
-					"text-anchor": V.value ? "end" : "middle",
-					"dominant-baseline": V.value ? "middle" : void 0,
-					class: v($("category"))
-				}, T(e.label), 11, A)) : p("", !0)], 64))), 128)),
-				w(e.$slots, "overlay", y(_(W.value))),
-				(x(!0), m(u, null, C(j.data, (e, n) => (x(), m("rect", {
+					x: z.value ? U.value.left - O(8) : H.value.bandCentre(t),
+					y: z.value ? H.value.bandCentre(t) : U.value.top + U.value.height + 14,
+					"text-anchor": z.value ? "end" : "middle",
+					"dominant-baseline": z.value ? "middle" : void 0,
+					class: b(Q("category"))
+				}, D(e.label), 11, k)) : h("", !0)], 64))), 128)),
+				E(e.$slots, "overlay", x(y(H.value))),
+				(C(!0), g(f, null, T(A.data, (e, n) => (C(), g("rect", {
 					key: `hit-${e.label}-${n}`,
-					x: V.value ? G.value.left : G.value.left + q.value * n,
-					y: V.value ? G.value.top + q.value * n : G.value.top,
-					width: V.value ? G.value.width : q.value,
-					height: V.value ? q.value : G.value.height,
-					class: v(N.value ? void 0 : Q.value.hit()),
-					onPointerenter: (e) => X.value = n,
-					onPointerleave: t[0] ||= (e) => X.value = void 0
-				}, null, 42, ne))), 128))
-			], 10, D)), Z.value ? (x(), m("div", {
+					x: z.value ? U.value.left : U.value.left + G.value * n,
+					y: z.value ? U.value.top + G.value * n : U.value.top,
+					width: z.value ? U.value.width : G.value,
+					height: z.value ? G.value : U.value.height,
+					class: b(M.value ? void 0 : Z.value.hit()),
+					onPointerenter: (e) => Y.value = n,
+					onPointerleave: t[0] ||= (e) => Y.value = void 0
+				}, null, 42, ae))), 128))
+			], 10, te)), X.value ? (C(), g("div", {
 				key: 0,
-				class: v($("tooltip", Z.value.multi ? "flex-col items-start gap-1" : void 0)),
-				style: b({
-					left: `${Z.value.x}px`,
-					top: `${Z.value.y}px`,
-					transform: V.value ? "translate(-50%, -50%)" : "translate(-50%, -100%) translateY(-8px)"
+				class: b(Q("tooltip", X.value.multi ? "flex-col items-start gap-1" : void 0)),
+				style: S({
+					left: `${X.value.x}px`,
+					top: `${X.value.y}px`,
+					transform: z.value ? "translate(-50%, -50%)" : "translate(-50%, -100%) translateY(-8px)"
 				})
 			}, [
-				h("span", { class: v($("tooltipLabel")) }, T(Z.value.label), 3),
-				Z.value.multi ? (x(!0), m(u, { key: 0 }, C(Z.value.rows, (e) => (x(), m("span", {
+				_("span", { class: b(Q("tooltipLabel")) }, D(X.value.label), 3),
+				X.value.multi ? (C(!0), g(f, { key: 0 }, T(X.value.rows, (e) => (C(), g("span", {
 					key: e.name,
 					class: "flex items-center gap-1.5"
 				}, [
-					h("span", {
+					_("span", {
 						class: "size-2 shrink-0 rounded-full",
-						style: b({ background: e.color })
+						style: S({ background: e.color })
 					}, null, 4),
-					h("span", { class: v($("tooltipLabel")) }, T(e.name), 3),
-					h("span", { class: v($("tooltipValue")) }, T(e.value), 3)
-				]))), 128)) : (x(), m("span", {
+					_("span", { class: b(Q("tooltipLabel")) }, D(e.name), 3),
+					_("span", { class: b(Q("tooltipValue")) }, D(e.value), 3)
+				]))), 128)) : (C(), g("span", {
 					key: 1,
-					class: v($("tooltipValue"))
-				}, T(Z.value.rows[0].value), 3)),
-				Z.value.total ? (x(), m("span", re, [
-					t[1] ||= h("span", { class: "size-2 shrink-0" }, null, -1),
-					h("span", { class: v($("tooltipLabel")) }, T(j.totalLabel), 3),
-					h("span", { class: v($("tooltipValue")) }, T(Z.value.total), 3)
-				])) : p("", !0)
-			], 6)) : p("", !0)], 2),
-			h("div", { class: v($("table")) }, [h("table", null, [
-				h("caption", null, T(j.label), 1),
-				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(u, null, C(R.value, (e) => (x(), m("th", {
+					class: b(Q("tooltipValue"))
+				}, D(X.value.rows[0].value), 3)),
+				X.value.total ? (C(), g("span", oe, [
+					t[1] ||= _("span", { class: "size-2 shrink-0" }, null, -1),
+					_("span", { class: b(Q("tooltipLabel")) }, D(A.totalLabel), 3),
+					_("span", { class: b(Q("tooltipValue")) }, D(X.value.total), 3)
+				])) : h("", !0)
+			], 6)) : h("", !0)], 2),
+			_("div", { class: b(Q("table")) }, [_("table", null, [
+				_("caption", null, D(A.label), 1),
+				_("thead", null, [_("tr", null, [t[2] ||= _("th", { scope: "col" }, " Category ", -1), (C(!0), g(f, null, T(I.value, (e) => (C(), g("th", {
 					key: e.key,
 					scope: "col"
-				}, T(e.name ?? "Value"), 1))), 128))])]),
-				h("tbody", null, [(x(!0), m(u, null, C(j.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", ie, T(e.label), 1), (x(!0), m(u, null, C(R.value, (t) => (x(), m("td", { key: t.key }, T(B(e, t.key) == null ? "—" : L(B(e, t.key))), 1))), 128))]))), 128))])
+				}, D(e.name ?? "Value"), 1))), 128))])]),
+				_("tbody", null, [(C(!0), g(f, null, T(A.data, (e, t) => (C(), g("tr", { key: `row-${e.label}-${t}` }, [_("th", se, D(e.label), 1), (C(!0), g(f, null, T(I.value, (t) => (C(), g("td", { key: t.key }, D(R(e, t.key) == null ? "—" : F(R(e, t.key))), 1))), 128))]))), 128))])
 			])], 2)
 		], 10, ee));
 	}
 });
 //#endregion
-export { j as default };
+export { A as default };

package/dist/components/DonutChart.js

@@ -0,0 +1,5 @@
+import e from "./DonutChart.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/DonutChart.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,96 @@
+import type { ChartAnimate } from '../composables/chart-reveal';
+import type { SparseValue } from '../composables/scale';
+/**
+ * One slice. Unlike the cartesian charts there is no second axis to hold a
+ * series, so the row *is* the identity: its `label` names it and its `slot`
+ * pins its colour.
+ */
+export interface DonutChartDatum {
+    label: string;
+    /** `null` is a missing reading — the slice is dropped, which is not a zero. */
+    value?: SparseValue;
+    /**
+     * Pin this slice to a palette slot (0-based) instead of taking its position
+     * in the array. Pin every slice that can be filtered out, so the survivors
+     * keep the colours the reader already learned.
+     */
+    slot?: number;
+}
+export interface DonutChartProps {
+    data?: readonly DonutChartDatum[];
+    /**
+     * Rendered height in px. The ring is a circle centred in whatever width the
+     * container gives, so this is also its diameter once the box is wide enough.
+     */
+    size?: number;
+    /**
+     * Ring thickness in px. Defaults to two fifths of the radius, which keeps
+     * the hole large enough to hold a total at every size. Ignored when `pie`.
+     */
+    thickness?: number;
+    /**
+     * Fill the middle in and draw a pie instead.
+     *
+     * The ring is the better default: a pie asks the reader to compare angles
+     * and areas, a donut only arc lengths, and the hole is somewhere to put the
+     * total the slices add up to.
+     */
+    pie?: boolean;
+    /**
+     * The gap between neighbouring slices, in px. `0` closes it and lets them
+     * touch.
+     *
+     * A width rather than an angle, and held the same all the way across: each
+     * edge is pushed half a gap off its own radius, so the divider reads as a
+     * line instead of a wedge that widens towards the rim. In a pie that is
+     * also why a slice stops a hair short of the centre — two parallel edges
+     * meet before they reach it.
+     */
+    gap?: number;
+    /**
+     * Sweep the ring open on the first paint. Skipped for a reader who has
+     * asked for reduced motion, and played once — not again when the data
+     * changes underneath it.
+     */
+    animate?: ChartAnimate;
+    /** Drop the legend. */
+    legend?: boolean;
+    /** Locale and options for every number shown — the total and the tooltip. */
+    locale?: string;
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Accessible name for the figure. The slices are hidden from assistive tech
+     * and the data is exposed as a table instead, so this names what that is.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: Partial<Record<'root' | 'svg' | 'slice' | 'center' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'tooltipShare' | 'table', string>>;
+}
+type __VLS_Slots = {
+    /**
+     * The hole. Given the total and its formatted form, so the usual figure
+     * plus caption is one line of markup.
+     */
+    center?: (props: {
+        total: number;
+        formatted: string;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<DonutChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DonutChartProps> & Readonly<{}>, {
+    size: number;
+    unstyled: boolean;
+    data: readonly DonutChartDatum[];
+    legend: boolean;
+    animate: ChartAnimate;
+    gap: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};