iryx-ui 0.15.0 → 0.17.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", "Calendar", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "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.Calendar.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.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/Calendar.js

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

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

@@ -0,0 +1,69 @@
+export interface CalendarProps {
+    /** Earliest selectable date, as an ISO `YYYY-MM-DD` string. */
+    min?: string;
+    /** Latest selectable date, as an ISO `YYYY-MM-DD` string. */
+    max?: string;
+    /** Locale for the month names and weekday initials. */
+    locale?: string;
+    /** 0 is Sunday. Defaults to the locale's own convention. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** How the weekday headings read — `narrow` is `M`, `short` is `Mon`. */
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    /** Months shown side by side. */
+    months?: number;
+    /** Page a month at a time rather than a full view. Only matters past one month. */
+    pagedNavigation?: boolean;
+    /**
+     * Keep every month six rows tall. On by default: without it the calendar
+     * changes height as you page through, which moves everything below it.
+     */
+    fixedWeeks?: boolean;
+    /** Grey out the days that belong to the neighbouring months. */
+    disableDaysOutsideCurrentView?: boolean;
+    disabled?: boolean;
+    /** Selectable but not changeable. */
+    readonly?: boolean;
+    /** Move focus to the selected day, or today, on mount. */
+    initialFocus?: boolean;
+    /**
+     * Refuse a date — a taken slot, a closed day. Given an ISO `YYYY-MM-DD`
+     * string. Unavailable days are struck through rather than hidden, so the
+     * reader can see the day exists and is spoken for.
+     */
+    isUnavailable?: (date: string) => boolean;
+    /** Keep a date selected when it is clicked a second time. */
+    preventDeselect?: boolean;
+    /** Names the whole calendar for a screen reader. */
+    label?: string;
+    /** Navigation labels — override for non-English apps. */
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ cellTrigger: 'rounded-full' }`. */
+    ui?: Partial<Record<'root' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger', string>>;
+}
+/**
+ * A month grid that is always on screen, for the cases a popover is wrong for:
+ * a booking page, an availability view, a date beside the thing it applies to.
+ * [`IDatePicker`](/components/date-picker) is this same grid behind a field.
+ */
+type __VLS_Props = CalendarProps;
+type __VLS_ModelProps = {
+    /** ISO `YYYY-MM-DD`, never a `Date`. See `composables/date.ts` for why. */
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    fixedWeeks: boolean;
+    previousLabel: string;
+    nextLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;