iryx-ui 0.14.0 → 0.15.0

package/dist/components/LineChart.vue_vue_type_script_setup_true_lang.js

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

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

@@ -61,8 +61,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     unstyled: boolean;
     closeLabel: string;
-    align: "start" | "center" | "end";
     side: "top" | "right" | "bottom" | "left";
+    align: "start" | "center" | "end";
     sideOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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.js

@@ -3,31 +3,31 @@ 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 "./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 "./DropdownMenu.js";
 import j from "./EmptyState.js";
 import M from "./FileUpload.js";
@@ -76,30 +76,30 @@ var ye = /* @__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,
+	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,
+	Drawer: () => a,
 	DropdownMenu: () => A,
 	EmptyState: () => j,
 	FileUpload: () => M,
@@ -107,7 +107,7 @@ var ye = /* @__PURE__ */ e({
 	FormField: () => F,
 	Icon: () => t,
 	Input: () => I,
-	Kbd: () => x,
+	Kbd: () => S,
 	Label: () => P,
 	LineChart: () => L,
 	Menubar: () => R,

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. */