blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessSortable.vue_vue_type_script_setup_true_lang.js

@@ -1,87 +1,135 @@
 import { logicalKey as e } from "../composables/rtl.js";
-import { moveItem as t, useSortable as n } from "../composables/useSortable.js";
-import { Fragment as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, useModel as y } from "vue";
+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 b = ["aria-label"], x = [
+var D = ["aria-label"], O = [
 	"aria-label",
+	"aria-roledescription",
 	"aria-pressed",
 	"onPointerdown",
 	"onKeydown"
-], S = { class: "bless-sortable__body" }, C = {
+], k = { class: "bless-sortable__body" }, A = {
 	class: "bless-sortable__live",
 	"aria-live": "polite"
-}, w = /*@__PURE__*/ s({
+}, j = /*@__PURE__*/ p({
 	name: "BlessSortable",
 	__name: "BlessSortable",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ m({
 		rowKey: {},
 		label: { default: "Sortable" },
-		columns: { default: 1 }
+		columns: { default: 1 },
+		group: {},
+		labels: {}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["move"], ["update:modelValue"]),
-	setup(s, { emit: c }) {
-		let w = y(s, "modelValue"), T = c, E = p(), D = p(""), O = `${v()}-hint`, k = p(null), A = [], j = 0;
-		function M(e, n) {
-			e === n || n < 0 || n >= w.value.length || (w.value = t(w.value, e, n), T("move", e, n), D.value = `Moved to position ${n + 1} of ${w.value.length}`);
+	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 N = n(E, M), { drag: P, over: F } = N, I = () => E.value?.querySelectorAll(".bless-sortable__grip") ?? [], L = (e) => l(() => I()[e]?.focus());
-		function R(t, n) {
-			let r = e(n);
-			if (n.key === " " || n.key === "Enter") n.preventDefault(), k.value == null ? (k.value = t, A = w.value.slice(), j = t, D.value = `Grabbed item ${t + 1} of ${w.value.length}. Arrow keys move it, Space drops it, Escape cancels.`) : (D.value = `Dropped at position ${k.value + 1} of ${w.value.length}`, k.value = null);
-			else if (n.key === "Escape" && k.value != null) n.preventDefault(), w.value = A, k.value = null, D.value = "Cancelled, order restored", L(j);
-			else if (k.value != null) {
-				let e = r === "ArrowUp" || r === "ArrowLeft" ? -1 : +(r === "ArrowDown" || r === "ArrowRight");
+		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;
-				n.preventDefault(), M(k.value, k.value + e), k.value = Math.min(Math.max(k.value + e, 0), w.value.length - 1), L(k.value);
+				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 z = () => requestAnimationFrame(() => {
-			k.value != null && !E.value?.contains(document.activeElement) && (k.value = null);
-		}), B = (e) => F.value === e && P.value != null && P.value !== e ? e > P.value ? "after" : "before" : null;
-		return (e, t) => (f(), i("div", {
+		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: E,
-			class: "bless-sortable"
+			ref: F,
+			class: g(["bless-sortable", {
+				"bless-sortable--group": p.group,
+				"bless-sortable--receiving": W.value && !N.value.length
+			}])
 		}, [
-			a("ul", {
-				class: u(["bless-sortable__list", { "bless-sortable__list--grid": s.columns > 1 }]),
+			d("ul", {
+				class: g(["bless-sortable__list", { "bless-sortable__list--grid": p.columns > 1 }]),
 				role: "list",
-				"aria-label": s.label,
-				style: d(s.columns > 1 ? { "--bless-sortable-cols": s.columns } : void 0)
-			}, [(f(!0), i(r, null, m(w.value, (n, r) => (f(), i("li", {
-				key: s.rowKey ? s.rowKey(n, r) : r,
+				"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: u(["bless-sortable__item", [{
-					"bless-sortable__item--drag": _(P) === r,
-					"bless-sortable__item--held": k.value === r
-				}, B(r) && `bless-sortable__item--${B(r)}`]])
-			}, [a("button", {
+				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": `Reorder item ${r + 1}`,
-				"aria-roledescription": "sortable item",
-				"aria-pressed": k.value === r,
-				"aria-describedby": O,
-				onPointerdown: (e) => _(N).grab(r, e),
-				onPointermove: t[0] ||= (...e) => _(N).track && _(N).track(...e),
-				onPointerup: t[1] ||= (...e) => _(N).drop && _(N).drop(...e),
-				onPointercancel: t[2] ||= (...e) => _(N).cancel && _(N).cancel(...e),
-				onKeydown: (e) => R(r, e),
-				onBlur: z
-			}, [...t[3] ||= [a("span", { "aria-hidden": "true" }, "⋮⋮", -1)]], 40, x), a("span", S, [h(e.$slots, "default", {
+				"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
-			}, () => [o(g(n), 1)])])], 2))), 128))], 14, b),
-			a("span", {
-				id: O,
+			}, () => [f(w(n), 1)])])], 2))), 128))], 14, D),
+			d("span", {
+				id: L,
 				hidden: ""
-			}, "Press Space to grab, arrow keys to move, Space to drop, Escape to cancel."),
-			a("span", C, g(D.value), 1)
-		], 512));
+			}, w(M.value.hint) + w(p.group ? ` ${M.value.groupHint}` : ""), 1),
+			d("span", A, w(I.value), 1)
+		], 2));
 	}
 });
 //#endregion
-export { w as default };
+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/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;

package/dist/components/BlessSteps.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,8 @@ var m = ["aria-label"], h = ["aria-current"], g = { "aria-hidden": "true" }, _ =
 		steps: {},
 		orientation: { default: "horizontal" },
 		clickable: { type: [Boolean, String] },
-		label: { default: "Progress" }
+		label: { default: "Progress" },
+		goLabel: {}
 	}, {
 		modelValue: { default: 0 },
 		modelModifiers: {}
@@ -32,7 +33,7 @@ var m = ["aria-label"], h = ["aria-current"], g = { "aria-hidden": "true" }, _ =
 		}, [(c(), t(u(S(o, a.clickable, b.value) ? "button" : "div"), {
 			type: S(o, a.clickable, b.value) ? "button" : void 0,
 			class: "bless-steps__marker",
-			"aria-label": S(o, a.clickable, b.value) ? `Go to step ${o + 1}: ${e.label}` : void 0,
+			"aria-label": S(o, a.clickable, b.value) ? (a.goLabel ?? ((e, t) => `Go to step ${e}: ${t}`))(o + 1, e.label) : void 0,
 			onClick: (e) => S(o, a.clickable, b.value) && (x("select", o), b.value = o)
 		}, {
 			default: p(() => [i("span", g, d(o < b.value ? "✓" : o + 1), 1)]),

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

@@ -9,7 +9,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         controls?: boolean;
         /** how far (px) a drag must travel to count */
         threshold?: number;
-        labels?: Partial<Record<BlessSwipeDecision | "undo", string>>;
+        labels?: Partial<Record<BlessSwipeDecision | "undo" | "empty", string>>;
     } & {
         /** the cards still to decide, top of the deck first */
         modelValue?: T[];

package/dist/components/BlessSwipeDeck.vue_vue_type_script_setup_true_lang.js

@@ -40,6 +40,7 @@ var b = ["aria-label"], x = [
 			reject: "Reject",
 			skip: "Skip",
 			undo: "Undo",
+			empty: "No cards left",
 			...E.labels
 		})), A = [], j = m(0), M = m(""), N = {
 			accept: [1, 0],
@@ -157,7 +158,7 @@ var b = ["aria-label"], x = [
 					}, _(k.value.skip), 5)
 				], 64)) : i("", !0)], 46, x))), 128))]),
 				_: 3
-			}), D.value.length ? i("", !0) : (p(), a("div", S, [g(r.$slots, "empty", {}, () => [u[3] ||= s("No cards left", -1)])]))], 40, b),
+			}), D.value.length ? i("", !0) : (p(), a("div", S, [g(r.$slots, "empty", {}, () => [s(_(k.value.empty), 1)])]))], 40, b),
 			l.controls ? (p(), a("div", C, [
 				c(e, {
 					variant: "outline",

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

@@ -17,6 +17,15 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** show Start / Pause / Reset */
     controls?: boolean;
     label?: string;
+    /** button text and the wording said when a phase changes or the time is up */
+    labels?: Partial<{
+        start: string;
+        resume: string;
+        pause: string;
+        reset: string;
+        finished: string;
+        round: (round: number, rounds: number) => string;
+    }>;
 } & {
     running?: boolean;
 }, {
@@ -41,6 +50,15 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** show Start / Pause / Reset */
     controls?: boolean;
     label?: string;
+    /** button text and the wording said when a phase changes or the time is up */
+    labels?: Partial<{
+        start: string;
+        resume: string;
+        pause: string;
+        reset: string;
+        finished: string;
+        round: (round: number, rounds: number) => string;
+    }>;
 } & {
     running?: boolean;
 }> & Readonly<{

package/dist/components/BlessTimer.vue_vue_type_script_setup_true_lang.js

@@ -23,7 +23,8 @@ var v = ["aria-label"], y = {
 			type: Boolean,
 			default: !0
 		},
-		label: { default: "Timer" }
+		label: { default: "Timer" },
+		labels: {}
 	}, {
 		running: {
 			type: Boolean,
@@ -33,21 +34,29 @@ var v = ["aria-label"], y = {
 	}),
 	emits: /*@__PURE__*/ l(["finish", "phase"], ["update:running"]),
 	setup(c, { expose: l, emit: C }) {
-		let w = c, T = h(c, "running"), E = C, D = p(0), O = p(!1), k = p(""), A = 0, j = 0, M, N = t(() => w.mode === "interval" ? w.phases ?? [] : [{
+		let w = c, T = t(() => ({
+			start: "Start",
+			resume: "Resume",
+			pause: "Pause",
+			reset: "Reset",
+			finished: "Finished",
+			round: (e, t) => `round ${e} of ${t}`,
+			...w.labels
+		})), E = h(c, "running"), D = C, O = p(0), k = p(!1), A = p(""), j = 0, M = 0, N, P = t(() => w.mode === "interval" ? w.phases ?? [] : [{
 			label: "",
 			seconds: w.duration
-		}]), P = t(() => w.mode === "interval" ? w.rounds : 1), F = t(() => N.value.reduce((e, t) => e + t.seconds, 0) * 1e3), I = t(() => F.value * P.value), L = t(() => {
+		}]), F = t(() => w.mode === "interval" ? w.rounds : 1), I = t(() => P.value.reduce((e, t) => e + t.seconds, 0) * 1e3), L = t(() => I.value * F.value), R = t(() => {
 			if (w.mode === "stopwatch") return {
 				i: 0,
 				round: 1,
-				left: D.value
+				left: O.value
 			};
-			let e = Math.min(D.value, I.value), t = F.value ? e >= I.value ? F.value : e % F.value : 0, n = Math.min(P.value, Math.floor(e / (F.value || 1)) + 1), r = 0;
-			for (let i = 0; i < N.value.length; i++) {
-				let a = N.value[i].seconds * 1e3;
-				if (t < r + a || i === N.value.length - 1) return {
+			let e = Math.min(O.value, L.value), t = I.value ? e >= L.value ? I.value : e % I.value : 0, n = Math.min(F.value, Math.floor(e / (I.value || 1)) + 1), r = 0;
+			for (let i = 0; i < P.value.length; i++) {
+				let a = P.value[i].seconds * 1e3;
+				if (t < r + a || i === P.value.length - 1) return {
 					i,
-					round: e >= I.value ? P.value : n,
+					round: e >= L.value ? F.value : n,
 					left: Math.max(0, r + a - t)
 				};
 				r += a;
@@ -57,72 +66,72 @@ var v = ["aria-label"], y = {
 				round: 1,
 				left: 0
 			};
-		}), R = (e) => String(e).padStart(2, "0"), z = (e, t) => {
+		}), z = (e) => String(e).padStart(2, "0"), B = (e, t) => {
 			let n = t ? Math.floor(e / 1e3) : Math.ceil(e / 1e3), r = Math.floor(n / 3600), i = Math.floor(n % 3600 / 60);
-			return `${r ? `${r}:${R(i)}` : R(i)}:${R(n % 60)}`;
-		}, B = t(() => z(L.value.left, w.mode === "stopwatch")), V = t(() => w.mode === "interval" ? N.value[L.value.i] : void 0), H = t(() => V.value ? `${V.value.label} · round ${L.value.round} of ${P.value}` : "");
-		function U() {
-			D.value = A + (performance.now() - j), w.mode !== "stopwatch" && D.value >= I.value && (D.value = I.value, W(), O.value = !0, T.value = !1, k.value = "Finished", E("finish"));
-		}
+			return `${r ? `${r}:${z(i)}` : z(i)}:${z(n % 60)}`;
+		}, V = t(() => B(R.value.left, w.mode === "stopwatch")), H = t(() => w.mode === "interval" ? P.value[R.value.i] : void 0), U = t(() => H.value ? `${H.value.label} · ${T.value.round(R.value.round, F.value)}` : "");
 		function W() {
-			clearInterval(M), M = void 0;
+			O.value = j + (performance.now() - M), w.mode !== "stopwatch" && O.value >= L.value && (O.value = L.value, G(), k.value = !0, E.value = !1, A.value = T.value.finished, D("finish"));
 		}
 		function G() {
-			M || w.mode !== "stopwatch" && !I.value || (O.value && J(), A = D.value, j = performance.now(), M = setInterval(U, 100));
+			clearInterval(N), N = void 0;
 		}
 		function K() {
-			T.value = !0;
+			N || w.mode !== "stopwatch" && !L.value || (k.value && Y(), j = O.value, M = performance.now(), N = setInterval(W, 100));
 		}
 		function q() {
-			T.value = !1;
+			E.value = !0;
 		}
 		function J() {
-			W(), D.value = 0, A = 0, O.value = !1, k.value = "", T.value && G();
+			E.value = !1;
+		}
+		function Y() {
+			G(), O.value = 0, j = 0, k.value = !1, A.value = "", E.value && K();
 		}
-		return g(T, (e) => {
-			e ? G() : M && (U(), W());
-		}, { immediate: !1 }), w.autostart && (T.value = !0), g(() => [
+		return g(E, (e) => {
+			e ? K() : N && (W(), G());
+		}, { immediate: !1 }), w.autostart && (E.value = !0), g(() => [
 			w.mode,
 			w.duration,
 			w.phases,
 			w.rounds
-		], () => J()), g(() => `${L.value.i}:${L.value.round}`, (e, t) => {
-			let n = N.value[L.value.i];
-			t !== void 0 && n && w.mode === "interval" && T.value && (k.value = `${n.label}, round ${L.value.round} of ${P.value}`, E("phase", n, L.value.i, L.value.round));
-		}), d(W), l({
-			start: K,
-			pause: q,
-			reset: J,
-			toggle: () => T.value = !T.value
+		], () => Y()), g(() => `${R.value.i}:${R.value.round}`, (e, t) => {
+			let n = P.value[R.value.i];
+			t !== void 0 && n && w.mode === "interval" && E.value && (A.value = `${n.label}, ${T.value.round(R.value.round, F.value)}`, D("phase", n, R.value.i, R.value.round));
+		}), d(G), l({
+			start: q,
+			pause: J,
+			reset: Y,
+			toggle: () => E.value = !E.value
 		}), (t, l) => (f(), i("div", {
-			class: u(["bless-timer", { "bless-timer--done": O.value }]),
+			class: u(["bless-timer", { "bless-timer--done": k.value }]),
 			role: "timer",
 			"aria-label": c.label
 		}, [
-			H.value ? (f(), i("span", y, m(H.value), 1)) : r("", !0),
-			a("span", b, m(B.value), 1),
-			c.controls ? (f(), i("span", x, [T.value ? (f(), n(e, {
+			U.value ? (f(), i("span", y, m(U.value), 1)) : r("", !0),
+			a("span", b, m(V.value), 1),
+			c.controls ? (f(), i("span", x, [E.value ? (f(), n(e, {
 				key: 1,
 				variant: "outline",
-				onClick: q
+				onClick: J
 			}, {
-				default: _(() => [...l[0] ||= [o("Pause", -1)]]),
+				default: _(() => [o(m(T.value.pause), 1)]),
 				_: 1
 			})) : (f(), n(e, {
 				key: 0,
-				onClick: K
+				onClick: q
 			}, {
-				default: _(() => [o(m(D.value && !O.value ? "Resume" : "Start"), 1)]),
+				default: _(() => [o(m(O.value && !k.value ? T.value.resume : T.value.start), 1)]),
 				_: 1
 			})), s(e, {
 				variant: "ghost",
-				disabled: !D.value,
-				onClick: J
+				disabled: !O.value,
+				onClick: Y
 			}, {
-				default: _(() => [...l[1] ||= [o("Reset", -1)]]),
+				default: _(() => [o(m(T.value.reset), 1)]),
 				_: 1
 			}, 8, ["disabled"])])) : r("", !0),
-			a("span", S, m(k.value), 1)
+			a("span", S, m(A.value), 1)
 		], 10, v));
 	}
 });

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
         prev: string;
         done: string;
         skip: string;
+        step: (number: number) => string;
     }>;
     /** dim the page and cut a hole around the target */
     spotlight?: boolean;