blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessSliderCaptcha.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,146 @@
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, normalizeClass as a, normalizeStyle as o, onBeforeUnmount as s, onMounted as c, openBlock as l, ref as u, toDisplayString as d, unref as f, useId as p, useModel as m } from "vue";
+//#region src/components/BlessSliderCaptcha.vue?vue&type=script&setup=true&lang.ts
+var h = ["id"], g = [
+	"aria-labelledby",
+	"aria-valuenow",
+	"aria-disabled"
+], _ = { "aria-hidden": "true" }, v = {
+	class: "bless-captcha__live",
+	"aria-live": "polite"
+}, y = .16, b = /*@__PURE__*/ r({
+	name: "BlessSliderCaptcha",
+	__name: "BlessSliderCaptcha",
+	props: /*@__PURE__*/ i({
+		src: {},
+		tolerance: { default: .03 },
+		label: { default: "Slide the piece into the gap" },
+		labels: {}
+	}, {
+		verified: {
+			type: Boolean,
+			default: !1
+		},
+		verifiedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ i(["verify", "fail"], ["update:verified"]),
+	setup(r, { expose: i, emit: b }) {
+		let x = r, S = e(() => ({
+			verified: "Verified",
+			failed: "Not quite, try again",
+			...x.labels
+		})), C = m(r, "verified"), w = b, T = p(), E = u(), D = u(), O = u(), k = u(320), A = () => Math.round(k.value / 2), j = u(0), M = u({
+			at: .6,
+			y: .3
+		}), N = u(!1), P = u(!1), F = u(""), I = 0;
+		function L() {
+			M.value = {
+				at: .35 + Math.random() * .55,
+				y: .1 + Math.random() * .5
+			};
+		}
+		let R;
+		c(() => {
+			L();
+			let e = E.value;
+			e && (k.value = e.clientWidth || 320, typeof ResizeObserver < "u" && (R = new ResizeObserver(() => k.value = e.clientWidth || 320), R.observe(e)));
+		}), s(() => R?.disconnect());
+		let z = () => k.value * y, B = () => M.value.at * k.value * .84, V = () => M.value.y * (A() - z()), H = () => x.src ? {
+			backgroundImage: `url(${x.src})`,
+			backgroundSize: `${k.value}px ${A()}px`
+		} : {};
+		function U() {
+			C.value || (Math.abs(j.value - M.value.at) <= x.tolerance ? (C.value = !0, j.value = M.value.at, F.value = S.value.verified, w("verify", { ms: Math.round(performance.now() - I) })) : (P.value = !0, F.value = S.value.failed, w("fail"), j.value = 0, L(), setTimeout(() => P.value = !1, 400)));
+		}
+		function W() {
+			C.value = !1, P.value = !1, j.value = 0, F.value = "", L();
+		}
+		i({ reset: W });
+		let G = {
+			x: 0,
+			f: 0
+		};
+		function K(e) {
+			C.value || e.button || (e.currentTarget.setPointerCapture?.(e.pointerId), G = {
+				x: e.clientX,
+				f: j.value
+			}, N.value = !0, (!I || j.value === 0) && (I = performance.now()));
+		}
+		function q(e) {
+			if (!N.value) return;
+			let t = D.value?.clientWidth || 0, n = O.value?.offsetWidth || 0, r = t && n ? t - n : (E.value?.clientWidth || k.value) - z();
+			j.value = Math.min(1, Math.max(0, G.f + (e.clientX - G.x) / r));
+		}
+		function J() {
+			N.value && (N.value = !1, U());
+		}
+		function Y(e) {
+			if (C.value) return;
+			let t = e.shiftKey ? .1 : .01;
+			e.key === "ArrowRight" || e.key === "ArrowLeft" ? (e.preventDefault(), j.value || (I = performance.now()), j.value = Math.min(1, Math.max(0, j.value + (e.key === "ArrowRight" ? t : -t)))) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), U());
+		}
+		return (e, i) => (l(), t("div", { class: a(["bless-captcha", {
+			"bless-captcha--ok": C.value,
+			"bless-captcha--fail": P.value
+		}]) }, [
+			n("div", {
+				ref_key: "stage",
+				ref: E,
+				class: "bless-captcha__stage",
+				style: o({
+					height: `${A()}px`,
+					...H()
+				}),
+				"aria-hidden": "true"
+			}, [n("span", {
+				class: "bless-captcha__gap",
+				style: o({
+					width: `${z()}px`,
+					height: `${z()}px`,
+					left: `${B()}px`,
+					top: `${V()}px`
+				})
+			}, null, 4), n("span", {
+				class: a(["bless-captcha__piece", { "bless-captcha__piece--drag": N.value }]),
+				style: o({
+					width: `${z()}px`,
+					height: `${z()}px`,
+					top: `${V()}px`,
+					left: `${j.value * (k.value - z())}px`,
+					...H(),
+					backgroundPosition: `-${B()}px -${V()}px`
+				})
+			}, null, 6)], 4),
+			n("div", {
+				ref_key: "track",
+				ref: D,
+				class: "bless-captcha__track"
+			}, [n("span", {
+				id: `${f(T)}-l`,
+				class: "bless-captcha__label"
+			}, d(C.value ? S.value.verified : r.label), 9, h), n("button", {
+				ref_key: "handleEl",
+				ref: O,
+				type: "button",
+				class: a(["bless-captcha__handle", { "bless-captcha__handle--drag": N.value }]),
+				role: "slider",
+				"aria-labelledby": `${f(T)}-l`,
+				"aria-valuemin": "0",
+				"aria-valuemax": "100",
+				"aria-valuenow": Math.round(j.value * 100),
+				"aria-disabled": C.value || void 0,
+				style: o({
+					left: `${j.value * 100}%`,
+					translate: `${-j.value * 100}% 0`
+				}),
+				onPointerdown: K,
+				onPointermove: q,
+				onPointerup: J,
+				onPointercancel: J,
+				onKeydown: Y
+			}, [n("span", _, d(C.value ? "✓" : "→"), 1)], 46, g)], 512),
+			n("span", v, d(F.value), 1)
+		], 2));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessSortable.css

@@ -0,0 +1 @@
+.bless-sortable{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-sortable--group{min-height:3rem}.bless-sortable--receiving{outline:2px dashed var(--bless-color-accent);outline-offset:-2px}.bless-sortable__list{gap:var(--bless-space-2);margin:0;padding:0;list-style:none;display:grid}.bless-sortable__list--grid{grid-template-columns:repeat(var(--bless-sortable-cols), minmax(0, 1fr))}.bless-sortable__item{align-items:center;gap:var(--bless-space-2);padding:var(--bless-space-2) var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);display:flex}.bless-sortable__item--drag{opacity:.4}.bless-sortable__item--held{border-color:var(--bless-color-accent)}.bless-sortable__item--before{box-shadow:inset 0 2px 0 var(--bless-color-accent)}.bless-sortable__item--after{box-shadow:inset 0 -2px 0 var(--bless-color-accent)}.bless-sortable__list--grid .bless-sortable__item--before{box-shadow:inset 2px 0 0 var(--bless-color-accent)}.bless-sortable__list--grid .bless-sortable__item--after,[dir=rtl] .bless-sortable__list--grid .bless-sortable__item--before{box-shadow:inset -2px 0 0 var(--bless-color-accent)}[dir=rtl] .bless-sortable__list--grid .bless-sortable__item--after{box-shadow:inset 2px 0 0 var(--bless-color-accent)}.bless-sortable__grip{padding:var(--bless-space-1) var(--bless-space-2);color:var(--bless-color-text-muted);font:inherit;letter-spacing:-3px;cursor:grab;touch-action:none;background:0 0;border:0;flex:none}.bless-sortable__grip:active{cursor:grabbing}.bless-sortable__grip:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-sortable__body{flex:1;min-width:0}.bless-sortable__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessSortable.js

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

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

@@ -0,0 +1,51 @@
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<({
+        rowKey?: (item: T, index: number) => string | number;
+        label?: string;
+        /** lay the items out in this many equal columns (a grid); 1 is a list */
+        columns?: number;
+        /**
+         * lists that share a group name take each other's items: drag across, or hold an item and
+         * press Alt with ← / → to send it to the neighbouring list. Bind each list's own `v-model`.
+         */
+        group?: string;
+        /** screen-reader wording; each message that carries numbers is a function of them */
+        labels?: Partial<{
+            grip: (index: number) => string;
+            grabbed: (index: number, total: number) => string;
+            moved: (position: number, total: number) => string;
+            sent: (list: string, position: number, total: number) => string;
+            dropped: (position: number, total: number) => string;
+            cancelled: string;
+            hint: string;
+            groupHint: string;
+            roleDescription: string;
+        }>;
+    } & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+        onMove?: ((from: number, to: number) => any) | undefined;
+        onTransfer?: ((item: T, from: number, to: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            item: T;
+            index: number;
+        }) => any;
+    };
+    emit: (((evt: "move", from: number, to: number) => void) & ((evt: "transfer", item: T, from: number, to: number) => void)) & ((event: "update:modelValue", value: T[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessSortable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,135 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { joinGroup as t, membersOf as n, moveItem as r, restoreGroup as i, snapshotGroup as a, transfer as o, useSortable as s } from "../composables/useSortable.js";
+import { Fragment as c, computed as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, mergeModels as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useId as E, useModel as ee, watch as te } from "vue";
+//#region src/components/BlessSortable.vue?vue&type=script&setup=true&lang.ts
+var D = ["aria-label"], O = [
+	"aria-label",
+	"aria-roledescription",
+	"aria-pressed",
+	"onPointerdown",
+	"onKeydown"
+], k = { class: "bless-sortable__body" }, A = {
+	class: "bless-sortable__live",
+	"aria-live": "polite"
+}, j = /*@__PURE__*/ p({
+	name: "BlessSortable",
+	__name: "BlessSortable",
+	props: /*@__PURE__*/ m({
+		rowKey: {},
+		label: { default: "Sortable" },
+		columns: { default: 1 },
+		group: {},
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ m(["move", "transfer"], ["update:modelValue"]),
+	setup(p, { emit: m }) {
+		let j = p, M = l(() => ({
+			grip: (e) => `Reorder item ${e}`,
+			grabbed: (e, t) => `Grabbed item ${e} of ${t}. Arrow keys move it, Space drops it, Escape cancels.`,
+			moved: (e, t) => `Moved to position ${e} of ${t}`,
+			sent: (e, t, n) => `Moved to ${e}, position ${t} of ${n}`,
+			dropped: (e, t) => `Dropped at position ${e} of ${t}`,
+			cancelled: "Cancelled, order restored",
+			hint: "Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.",
+			groupHint: "Alt with left or right arrow sends it to another list.",
+			roleDescription: "sortable item",
+			...j.labels
+		})), N = ee(p, "modelValue"), P = m, F = x(), I = x(""), L = `${E()}-hint`, R = x(null), z = [], B = 0;
+		function V(e, t) {
+			e === t || t < 0 || t >= N.value.length || (N.value = r(N.value, e, t), P("move", e, t), I.value = M.value.moved(t + 1, N.value.length));
+		}
+		let H = () => F.value?.querySelectorAll(".bless-sortable__grip") ?? [], U = (e) => h(() => H()[e]?.focus()), W = x(null), G = {
+			root: F,
+			list: () => N.value,
+			set: (e) => N.value = e,
+			drop: W,
+			vertical: () => j.columns === 1,
+			label: () => j.label,
+			adopt: (e) => {
+				R.value = e, U(e);
+			},
+			focus: U,
+			say: (e) => I.value = e
+		}, K, q = () => {
+			K?.(), K = j.group ? t(j.group, G) : void 0;
+		};
+		y(q), te(() => j.group, q), v(() => K?.());
+		let J = G;
+		function Y(e, t, n) {
+			let r = t.list().length + 1, i = o(G, e, t, n);
+			P("transfer", i, e, n), t.say(M.value.sent(t.label(), n + 1, r));
+		}
+		let X = s(F, V, void 0, {
+			name: () => j.group,
+			self: G,
+			onTransfer: Y
+		}), { drag: Z, over: ne } = X;
+		function re(t, r) {
+			let o = e(r);
+			if (r.key === " " || r.key === "Enter") r.preventDefault(), R.value == null ? (R.value = t, z = N.value.slice(), B = t, J = G, j.group && a(j.group), I.value = M.value.grabbed(t + 1, N.value.length)) : (I.value = M.value.dropped(R.value + 1, N.value.length), R.value = null);
+			else if (r.key === "Escape" && R.value != null) r.preventDefault(), j.group ? i() : N.value = z, R.value = null, I.value = M.value.cancelled, J.focus(B);
+			else if (R.value != null && j.group && r.altKey && /^Arrow(Left|Right)$/.test(r.key)) {
+				r.preventDefault();
+				let e = n(j.group), t = e[e.indexOf(G) + (o === "ArrowLeft" ? -1 : 1)];
+				if (!t) return;
+				let i = R.value, a = Math.min(i, t.list().length);
+				R.value = null, Y(i, t, a), t.adopt(a);
+			} else if (R.value != null) {
+				let e = o === "ArrowUp" || o === "ArrowLeft" ? -1 : +(o === "ArrowDown" || o === "ArrowRight");
+				if (!e) return;
+				r.preventDefault(), V(R.value, R.value + e), R.value = Math.min(Math.max(R.value + e, 0), N.value.length - 1), U(R.value);
+			}
+		}
+		let ie = () => requestAnimationFrame(() => {
+			R.value != null && !F.value?.contains(document.activeElement) && (R.value = null);
+		}), Q = (e) => W.value?.index === e ? W.value.after ? "after" : "before" : null, $ = (e) => ne.value === e && Z.value != null && Z.value !== e ? e > Z.value ? "after" : "before" : null;
+		return (e, t) => (b(), u("div", {
+			ref_key: "root",
+			ref: F,
+			class: g(["bless-sortable", {
+				"bless-sortable--group": p.group,
+				"bless-sortable--receiving": W.value && !N.value.length
+			}])
+		}, [
+			d("ul", {
+				class: g(["bless-sortable__list", { "bless-sortable__list--grid": p.columns > 1 }]),
+				role: "list",
+				"aria-label": p.label,
+				style: _(p.columns > 1 ? { "--bless-sortable-cols": p.columns } : void 0)
+			}, [(b(!0), u(c, null, S(N.value, (n, r) => (b(), u("li", {
+				key: p.rowKey ? p.rowKey(n, r) : r,
+				"data-sortable-item": "",
+				class: g(["bless-sortable__item", [{
+					"bless-sortable__item--drag": T(Z) === r,
+					"bless-sortable__item--held": R.value === r
+				}, ($(r) ?? Q(r)) && `bless-sortable__item--${$(r) ?? Q(r)}`]])
+			}, [d("button", {
+				type: "button",
+				class: "bless-sortable__grip",
+				"aria-label": M.value.grip(r + 1),
+				"aria-roledescription": M.value.roleDescription,
+				"aria-pressed": R.value === r,
+				"aria-describedby": L,
+				onPointerdown: (e) => T(X).grab(r, e),
+				onPointermove: t[0] ||= (...e) => T(X).track && T(X).track(...e),
+				onPointerup: t[1] ||= (...e) => T(X).drop && T(X).drop(...e),
+				onPointercancel: t[2] ||= (...e) => T(X).cancel && T(X).cancel(...e),
+				onKeydown: (e) => re(r, e),
+				onBlur: ie
+			}, [...t[3] ||= [d("span", { "aria-hidden": "true" }, "⋮⋮", -1)]], 40, O), d("span", k, [C(e.$slots, "default", {
+				item: n,
+				index: r
+			}, () => [f(w(n), 1)])])], 2))), 128))], 14, D),
+			d("span", {
+				id: L,
+				hidden: ""
+			}, w(M.value.hint) + w(p.group ? ` ${M.value.groupHint}` : ""), 1),
+			d("span", A, w(I.value), 1)
+		], 2));
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/BlessSparkline.css

@@ -0,0 +1 @@
+.bless-sparkline{vertical-align:middle;color:var(--_c);display:inline-block;overflow:visible}.bless-sparkline__line{fill:none;stroke:var(--_c);stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.bless-sparkline__area{fill:color-mix(in srgb, var(--_c) 18%, transparent)}.bless-sparkline__dot,.bless-sparkline__bar{fill:var(--_c)}.bless-sparkline__bar--neg{fill:var(--_n)}.bless-sparkline__mid{stroke:var(--bless-color-border);stroke-width:1px}

package/dist/components/BlessSparkline.js

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

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

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    data: number[];
+    /** `line`, `bar`, or `winloss` (every value drawn as a same-height win above or loss below the middle) */
+    type?: "line" | "bar" | "winloss";
+    width?: number;
+    height?: number;
+    /** a token name (`chart-2`, `success`, `danger`…) or any CSS colour */
+    color?: string;
+    /** colour of values below zero in `bar` and `winloss` */
+    negativeColor?: string;
+    /** line only: shade the area under the line */
+    fill?: boolean;
+    /** line only: a dot on the last value */
+    dot?: boolean;
+    /** what is plotted; read with the summary by screen readers */
+    label?: string;
+    /** text for one value in the summary, e.g. `(v) => v + " ms"` */
+    format?: (v: number) => string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+    type: "line" | "bar" | "winloss";
+    width: number;
+    height: number;
+    negativeColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessSparkline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,107 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderList as c } from "vue";
+//#region src/components/BlessSparkline.vue?vue&type=script&setup=true&lang.ts
+var l = [
+	"aria-label",
+	"width",
+	"height",
+	"viewBox"
+], u = ["d"], d = ["d"], f = ["cx", "cy"], p = [
+	"x2",
+	"y1",
+	"y2"
+], m = [
+	"x",
+	"y",
+	"width",
+	"height"
+], h = 2, g = /*@__PURE__*/ i({
+	name: "BlessSparkline",
+	__name: "BlessSparkline",
+	props: {
+		data: {},
+		type: { default: "line" },
+		width: { default: 120 },
+		height: { default: 28 },
+		color: { default: "chart-1" },
+		negativeColor: { default: "danger" },
+		fill: { type: Boolean },
+		dot: { type: Boolean },
+		label: {},
+		format: {}
+	},
+	setup(i) {
+		let g = i, _ = t(() => g.data.filter((e) => Number.isFinite(e))), v = t(() => Math.min(..._.value, g.type === "line" ? Infinity : 0)), y = t(() => Math.max(..._.value, g.type === "line" ? -Infinity : 0)), b = t(() => y.value - v.value || 1), x = (e) => +(g.height - h - (e - v.value) / b.value * (g.height - 4)).toFixed(2), S = (e) => /^[a-z0-9-]+$/i.test(e) ? `var(--bless-color-${e})` : e, C = t(() => {
+			let e = _.value.length, t = g.width - 4;
+			return _.value.map((n, r) => ({
+				x: +(h + (e === 1 ? t / 2 : r / (e - 1) * t)).toFixed(2),
+				y: x(n)
+			}));
+		}), w = t(() => C.value.map((e, t) => `${t ? "L" : "M"}${e.x} ${e.y}`).join("")), T = t(() => {
+			let e = C.value;
+			return e.length > 1 ? `${w.value}L${e.at(-1).x} ${g.height - h}L${e[0].x} ${g.height - h}Z` : "";
+		}), E = t(() => C.value.at(-1)), D = t(() => {
+			let e = _.value.length;
+			if (!e) return [];
+			let t = (g.width - 4) / e, n = Math.max(1, t - Math.min(2, t * .25)), r = g.type === "winloss" ? g.height / 2 : x(0);
+			return _.value.map((e, i) => {
+				let a = g.type === "winloss" ? e > 0 ? h : e < 0 ? r : r - .5 : Math.min(x(e), r), o = g.type === "winloss" ? e === 0 ? 1 : g.height / 2 - h : Math.max(1, Math.abs(x(e) - r));
+				return {
+					x: +(h + i * t + (t - n) / 2).toFixed(2),
+					y: +a.toFixed(2),
+					w: +n.toFixed(2),
+					h: +o.toFixed(2),
+					neg: e < 0
+				};
+			});
+		}), O = t(() => g.format ?? ((e) => String(e))), k = t(() => {
+			let e = _.value, t = g.label ?? "Trend";
+			return e.length ? g.type === "winloss" ? `${t}: ${e.filter((e) => e > 0).length} up, ${e.filter((e) => e < 0).length} down of ${e.length}` : `${t}: ${e.length} values, from ${O.value(e[0])} to ${O.value(e.at(-1))}, low ${O.value(Math.min(...e))}, high ${O.value(Math.max(...e))}` : `${t}: no data`;
+		});
+		return (t, g) => (s(), r("svg", {
+			class: a(["bless-sparkline", `bless-sparkline--${i.type}`]),
+			role: "img",
+			"aria-label": k.value,
+			width: i.width,
+			height: i.height,
+			viewBox: `0 0 ${i.width} ${i.height}`,
+			style: o({
+				"--_c": S(i.color),
+				"--_n": S(i.negativeColor)
+			})
+		}, [i.type === "line" ? (s(), r(e, { key: 0 }, [
+			i.fill && T.value ? (s(), r("path", {
+				key: 0,
+				class: "bless-sparkline__area",
+				d: T.value
+			}, null, 8, u)) : n("", !0),
+			C.value.length > 1 ? (s(), r("path", {
+				key: 1,
+				class: "bless-sparkline__line",
+				d: w.value
+			}, null, 8, d)) : n("", !0),
+			(i.dot || C.value.length === 1) && E.value ? (s(), r("circle", {
+				key: 2,
+				class: "bless-sparkline__dot",
+				cx: E.value.x,
+				cy: E.value.y,
+				r: "2.5"
+			}, null, 8, f)) : n("", !0)
+		], 64)) : (s(), r(e, { key: 1 }, [i.type === "winloss" ? (s(), r("line", {
+			key: 0,
+			class: "bless-sparkline__mid",
+			x1: h,
+			x2: i.width - h,
+			y1: i.height / 2,
+			y2: i.height / 2
+		}, null, 8, p)) : n("", !0), (s(!0), r(e, null, c(D.value, (e, t) => (s(), r("rect", {
+			key: t,
+			class: a(["bless-sparkline__bar", { "bless-sparkline__bar--neg": e.neg }]),
+			x: e.x,
+			y: e.y,
+			width: e.w,
+			height: e.h
+		}, null, 10, m))), 128))], 64))], 14, l));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BlessSplitView.css

@@ -0,0 +1 @@
+.bless-split{min-width:0;height:100%;font-family:var(--bless-font-sans);color:var(--bless-color-text)}.bless-split--stacked .bless-split__pane{height:100%;overflow:auto}.bless-split__pane:focus{outline:none}.bless-split__pane:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-split__back{gap:var(--bless-space-1);margin:var(--bless-space-2);padding:var(--bless-space-1) var(--bless-space-2);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:inherit;font:inherit;cursor:pointer;display:inline-flex}.bless-split__back:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}[dir=rtl] .bless-split__back span{display:inline-block;transform:scaleX(-1)}

package/dist/components/BlessSplitView.js

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

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

@@ -0,0 +1,61 @@
+type __VLS_Props = {
+    /** under this width (px of the view itself) the panes stack: one at a time */
+    breakpoint?: number;
+    min?: number;
+    max?: number;
+    /** remember the divider in localStorage under this key */
+    storageKey?: string;
+    /** text of the button that goes back from the detail when stacked */
+    backLabel?: string;
+    label?: string;
+};
+type __VLS_ModelProps = {
+    /** master pane width in % */
+    modelValue?: number;
+    /** when stacked: is the detail showing (true) or the list (false)? */
+    "detail"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    open: () => boolean;
+    stacked: boolean;
+}, __VLS_3: {
+    stacked: boolean;
+}, __VLS_12: {
+    open: () => boolean;
+    stacked: boolean;
+}, __VLS_15: {
+    stacked: boolean;
+};
+type __VLS_Slots = {} & {
+    master?: (props: typeof __VLS_1) => any;
+} & {
+    detail?: (props: typeof __VLS_3) => any;
+} & {
+    master?: (props: typeof __VLS_12) => any;
+} & {
+    detail?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+    back: () => any;
+    "update:detail": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onBack?: (() => any) | undefined;
+    "onUpdate:detail"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    min: number;
+    max: number;
+    breakpoint: number;
+    backLabel: string;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/components/BlessSplitView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,92 @@
+import e from "./BlessResizable.js";
+import { Fragment as t, createBlock as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, nextTick as c, normalizeClass as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, useModel as g, vShow as _, watch as v, withCtx as y, withDirectives as b } from "vue";
+//#region src/components/BlessSplitView.vue?vue&type=script&setup=true&lang.ts
+var x = /*@__PURE__*/ o({
+	name: "BlessSplitView",
+	__name: "BlessSplitView",
+	props: /*@__PURE__*/ s({
+		breakpoint: { default: 560 },
+		min: { default: 20 },
+		max: { default: 60 },
+		storageKey: {},
+		backLabel: { default: "Back" },
+		label: { default: "Resize list" }
+	}, {
+		modelValue: { default: 35 },
+		modelModifiers: {},
+		detail: {
+			type: Boolean,
+			default: !1
+		},
+		detailModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["back"], ["update:modelValue", "update:detail"]),
+	setup(o, { emit: s }) {
+		let x = o, S = g(o, "modelValue"), C = g(o, "detail"), w = s, T = p(), E = p(!1), D = p(), O = p();
+		function k() {
+			E.value = (T.value?.clientWidth ?? Infinity) < x.breakpoint;
+		}
+		let A;
+		d(() => {
+			if (x.storageKey) try {
+				let e = parseFloat(localStorage.getItem(x.storageKey) ?? "");
+				e >= x.min && e <= x.max && (S.value = e);
+			} catch {}
+			k(), typeof ResizeObserver < "u" && T.value && (A = new ResizeObserver(k), A.observe(T.value));
+		}), u(() => A?.disconnect()), v(S, (e) => {
+			if (x.storageKey) try {
+				localStorage.setItem(x.storageKey, String(e));
+			} catch {}
+		}), v(C, (e) => {
+			E.value && c(() => {
+				e ? D.value?.focus() : O.value?.focus();
+			});
+		});
+		function j() {
+			C.value = !1, w("back");
+		}
+		return (s, c) => (f(), r("div", {
+			ref_key: "root",
+			ref: T,
+			class: l(["bless-split", { "bless-split--stacked": E.value }])
+		}, [E.value ? (f(), r(t, { key: 0 }, [b(i("div", {
+			ref_key: "masterEl",
+			ref: O,
+			class: "bless-split__pane",
+			tabindex: "-1"
+		}, [m(s.$slots, "master", {
+			open: () => C.value = !0,
+			stacked: !0
+		})], 512), [[_, !C.value]]), b(i("div", {
+			ref_key: "detailEl",
+			ref: D,
+			class: "bless-split__pane",
+			tabindex: "-1"
+		}, [i("button", {
+			type: "button",
+			class: "bless-split__back",
+			onClick: j
+		}, [c[1] ||= i("span", { "aria-hidden": "true" }, "←", -1), a(" " + h(o.backLabel), 1)]), m(s.$slots, "detail", { stacked: !0 })], 512), [[_, C.value]])], 64)) : (f(), n(e, {
+			key: 1,
+			modelValue: S.value,
+			"onUpdate:modelValue": c[0] ||= (e) => S.value = e,
+			min: o.min,
+			max: o.max,
+			label: o.label
+		}, {
+			a: y(() => [m(s.$slots, "master", {
+				open: () => C.value = !0,
+				stacked: !1
+			})]),
+			b: y(() => [m(s.$slots, "detail", { stacked: !1 })]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"min",
+			"max",
+			"label"
+		]))], 2));
+	}
+});
+//#endregion
+export { x as default };

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

@@ -8,6 +8,8 @@ type __VLS_Props = {
     /** completed steps are buttons that emit select; "all" makes every step one */
     clickable?: boolean | "all";
     label?: string;
+    /** name of a step you can go to, from its number and label */
+    goLabel?: (number: number, label: string) => string;
 };
 type __VLS_ModelProps = {
     modelValue?: number;