blessing-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,110 @@
+import { CanvasView } from './BlessInfiniteCanvas.vue';
+import { GraphEdge as Edge } from '../composables/graph';
+export interface BlessGraphNode {
+    id: string;
+    x: number;
+    y: number;
+    label: string;
+}
+export type { GraphEdge as BlessGraphEdge } from '../composables/graph';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    /** size used for ports and links; put content that fits it in the `#node` slot */
+    nodeWidth?: number;
+    nodeHeight?: number;
+    /** snap dragged nodes to this grid, px; 0 is free */
+    snap?: number;
+    /** refuse a link that would close a loop */
+    acyclic?: boolean;
+    /** off: nodes can be selected and the view moved, nothing is dragged, linked or removed */
+    editable?: boolean;
+    grid?: boolean;
+    controls?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    label?: string;
+    labels?: Partial<{
+        node: (label: string, to: string[], from: string[]) => string;
+        linkFrom: (from: string) => string;
+        linkTo: (from: string, to: string, exists: boolean) => string;
+        linked: (from: string, to: string) => string;
+        unlinked: (from: string, to: string) => string;
+        refused: (from: string, to: string, why: "self" | "exists" | "cycle") => string;
+        cancelled: string;
+        removed: (label: string) => string;
+        hint: string;
+    }>;
+} & {
+    nodes?: BlessGraphNode[];
+    edges?: Edge[];
+    selected?: string | null;
+    view?: CanvasView;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    disconnect: (edge: Edge) => any;
+    remove: (id: string) => any;
+    "update:selected": (value: string | null) => any;
+    move: (id: string, x: number, y: number) => any;
+    "update:view": (value: CanvasView) => any;
+    "update:nodes": (value: BlessGraphNode[]) => any;
+    "update:edges": (value: Edge[]) => any;
+    connect: (edge: Edge) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** size used for ports and links; put content that fits it in the `#node` slot */
+    nodeWidth?: number;
+    nodeHeight?: number;
+    /** snap dragged nodes to this grid, px; 0 is free */
+    snap?: number;
+    /** refuse a link that would close a loop */
+    acyclic?: boolean;
+    /** off: nodes can be selected and the view moved, nothing is dragged, linked or removed */
+    editable?: boolean;
+    grid?: boolean;
+    controls?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    label?: string;
+    labels?: Partial<{
+        node: (label: string, to: string[], from: string[]) => string;
+        linkFrom: (from: string) => string;
+        linkTo: (from: string, to: string, exists: boolean) => string;
+        linked: (from: string, to: string) => string;
+        unlinked: (from: string, to: string) => string;
+        refused: (from: string, to: string, why: "self" | "exists" | "cycle") => string;
+        cancelled: string;
+        removed: (label: string) => string;
+        hint: string;
+    }>;
+} & {
+    nodes?: BlessGraphNode[];
+    edges?: Edge[];
+    selected?: string | null;
+    view?: CanvasView;
+}> & Readonly<{
+    onDisconnect?: ((edge: Edge) => any) | undefined;
+    onRemove?: ((id: string) => any) | undefined;
+    "onUpdate:selected"?: ((value: string | null) => any) | undefined;
+    onMove?: ((id: string, x: number, y: number) => any) | undefined;
+    "onUpdate:view"?: ((value: CanvasView) => any) | undefined;
+    "onUpdate:nodes"?: ((value: BlessGraphNode[]) => any) | undefined;
+    "onUpdate:edges"?: ((value: Edge[]) => any) | undefined;
+    onConnect?: ((edge: Edge) => any) | undefined;
+}>, {
+    label: string;
+    grid: boolean;
+    controls: boolean;
+    editable: boolean;
+    nodeWidth: number;
+    nodeHeight: number;
+    snap: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    node?: (props: {
+        node: BlessGraphNode;
+        selected: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessNodeGraph.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,321 @@
+import e from "./BlessInfiniteCanvas.js";
+import { edgeKey as t, edgePath as n, linkProblem as r, snapTo as i } from "../composables/graph.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as ee, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, useId as b, useModel as x, withCtx as S, withModifiers as C } from "vue";
+//#region src/components/BlessNodeGraph.vue?vue&type=script&setup=true&lang.ts
+var w = {
+	class: "bless-graph__edges",
+	"aria-hidden": "true"
+}, te = ["d", "marker-end"], ne = ["d", "onPointerdown"], re = ["d"], ie = [
+	"data-node-id",
+	"aria-label",
+	"tabindex",
+	"onPointerdown",
+	"onPointermove",
+	"onPointerup",
+	"onPointercancel",
+	"onKeydown"
+], T = { class: "bless-graph__label" }, E = ["onPointerdown"], D = {
+	class: "bless-graph__live",
+	"aria-live": "polite"
+}, O = /*@__PURE__*/ d({
+	name: "BlessNodeGraph",
+	__name: "BlessNodeGraph",
+	props: /*@__PURE__*/ f({
+		nodeWidth: { default: 160 },
+		nodeHeight: { default: 56 },
+		snap: { default: 0 },
+		acyclic: { type: Boolean },
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		grid: {
+			type: Boolean,
+			default: !0
+		},
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		minZoom: {},
+		maxZoom: {},
+		label: { default: "Graph" },
+		labels: {}
+	}, {
+		nodes: { default: () => [] },
+		nodesModifiers: {},
+		edges: { default: () => [] },
+		edgesModifiers: {},
+		selected: { default: null },
+		selectedModifiers: {},
+		view: { default: () => ({
+			x: 0,
+			y: 0,
+			zoom: 1
+		}) },
+		viewModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f([
+		"connect",
+		"disconnect",
+		"move",
+		"remove"
+	], [
+		"update:nodes",
+		"update:edges",
+		"update:selected",
+		"update:view"
+	]),
+	setup(d, { emit: f }) {
+		let O = d, k = x(d, "nodes"), A = x(d, "edges"), j = x(d, "selected"), M = x(d, "view"), N = f, P = o(() => ({
+			node: (e, t, n) => e + (t.length ? `. Links to ${t.join(", ")}` : "") + (n.length ? `. Linked from ${n.join(", ")}` : ""),
+			linkFrom: (e) => `Linking from ${e}. Arrow keys choose the target, Enter links or unlinks, Escape cancels.`,
+			linkTo: (e, t, n) => e === t ? `${e}: choose another node` : `${n ? "Unlink" : "Link"} ${e} to ${t}? Enter`,
+			linked: (e, t) => `Linked ${e} to ${t}`,
+			unlinked: (e, t) => `Unlinked ${e} from ${t}`,
+			refused: (e, t, n) => n === "cycle" ? `Not linked: ${t} already leads to ${e}` : `Not linked: ${e} to ${t}`,
+			cancelled: "Cancelled",
+			removed: (e) => `Removed ${e}`,
+			hint: "Arrow keys move the node, L starts a link, Delete removes it.",
+			...O.labels
+		})), F = g(), I = g(), L = g(""), R = `${b()}-hint`, z = `${b()}-arrow`, B = o(() => new Map(k.value.map((e) => [e.id, e]))), V = (e) => ({
+			x: e.x + O.nodeWidth,
+			y: e.y + O.nodeHeight / 2
+		}), H = (e) => ({
+			x: e.x,
+			y: e.y + O.nodeHeight / 2
+		}), U = o(() => A.value.flatMap((e) => {
+			let r = B.value.get(e.from), i = B.value.get(e.to);
+			return r && i ? [{
+				edge: e,
+				key: t(e),
+				d: n(V(r), H(i))
+			}] : [];
+		})), W = (e) => B.value.get(e)?.label ?? e, G = (e) => P.value.node(e.label, A.value.filter((t) => t.from === e.id).map((e) => W(e.to)), A.value.filter((t) => t.to === e.id).map((e) => W(e.from))), K = g(null);
+		function q(e, t) {
+			let n = r(A.value, e, t, O.acyclic);
+			if (n === "exists") {
+				let n = A.value.find((n) => n.from === e && n.to === t);
+				A.value = A.value.filter((e) => e !== n), N("disconnect", n), L.value = P.value.unlinked(W(e), W(t));
+			} else if (n) L.value = P.value.refused(W(e), W(t), n);
+			else {
+				let n = {
+					from: e,
+					to: t
+				};
+				A.value = [...A.value, n], N("connect", n), L.value = P.value.linked(W(e), W(t));
+			}
+		}
+		let J = g(null), Y = g(null), ae = (e) => F.value?.querySelector(`[data-node-id="${CSS.escape(e)}"]`);
+		function oe(e, t) {
+			j.value = e.id, K.value = null, O.editable && !t.button && (t.currentTarget.setPointerCapture?.(t.pointerId), J.value = {
+				id: e.id,
+				cx: t.clientX,
+				cy: t.clientY,
+				x: e.x,
+				y: e.y,
+				moved: !1
+			});
+		}
+		function se(e, t) {
+			let n = J.value;
+			if (!n || n.id !== e.id) return;
+			let r = M.value.zoom, a = i(n.x + (t.clientX - n.cx) / r, O.snap), o = i(n.y + (t.clientY - n.cy) / r, O.snap);
+			(a !== e.x || o !== e.y) && (n.moved = !0, k.value = k.value.map((t) => t.id === e.id ? {
+				...t,
+				x: a,
+				y: o
+			} : t));
+		}
+		function X(e) {
+			let t = J.value;
+			if (J.value = null, t?.moved) {
+				let t = B.value.get(e.id);
+				N("move", e.id, t.x, t.y);
+			}
+		}
+		function ce(e, t) {
+			if (!O.editable || t.button) return;
+			t.stopPropagation(), t.currentTarget.setPointerCapture?.(t.pointerId);
+			let n = I.value.toWorld(t.clientX, t.clientY);
+			Y.value = {
+				from: e.id,
+				...n
+			};
+		}
+		function le(e) {
+			Y.value &&= {
+				...Y.value,
+				...I.value.toWorld(e.clientX, e.clientY)
+			};
+		}
+		function ue(e) {
+			let t = Y.value;
+			if (Y.value = null, t) for (let n of document.elementsFromPoint(e.clientX, e.clientY)) {
+				let e = n.closest?.("[data-node-id]")?.getAttribute("data-node-id");
+				if (e && F.value?.contains(n)) return void q(t.from, e);
+			}
+		}
+		let Z = o(() => {
+			let e = Y.value && B.value.get(Y.value.from);
+			if (e && Y.value) return n(V(e), Y.value);
+			let t = Q.value, r = t && B.value.get(t.from), i = t && B.value.get(t.target);
+			return r && i && r !== i ? n(V(r), H(i)) : null;
+		}), Q = g(null), $ = (e) => ee(() => ae(e)?.focus());
+		function de(e, t) {
+			let n = Q.value;
+			if (n) {
+				let e = k.value, r = e.findIndex((e) => e.id === n.target), i = /^Arrow(Right|Down)$/.test(t.key) ? 1 : /^Arrow(Left|Up)$/.test(t.key) ? -1 : 0;
+				if (i) {
+					t.preventDefault();
+					let a = e[(r + i + e.length) % e.length];
+					Q.value = {
+						from: n.from,
+						target: a.id
+					}, L.value = P.value.linkTo(W(n.from), a.label, A.value.some((e) => e.from === n.from && e.to === a.id)), $(a.id);
+				} else t.key === "Enter" || t.key === " " ? (t.preventDefault(), Q.value = null, n.target !== n.from && q(n.from, n.target), $(n.from)) : t.key === "Escape" && (t.preventDefault(), Q.value = null, L.value = P.value.cancelled, $(n.from));
+				return;
+			}
+			if (t.key === "Enter" || t.key === " ") {
+				t.preventDefault(), j.value = e.id;
+				return;
+			}
+			if (!O.editable) return;
+			let r = t.shiftKey ? 32 : 8, i = {
+				ArrowLeft: [-r, 0],
+				ArrowRight: [r, 0],
+				ArrowUp: [0, -r],
+				ArrowDown: [0, r]
+			}[t.key];
+			if (i) {
+				t.preventDefault();
+				let n = e.x + i[0], r = e.y + i[1];
+				k.value = k.value.map((t) => t.id === e.id ? {
+					...t,
+					x: n,
+					y: r
+				} : t), N("move", e.id, n, r);
+			} else if (t.key === "l" || t.key === "L") t.preventDefault(), Q.value = {
+				from: e.id,
+				target: e.id
+			}, L.value = P.value.linkFrom(e.label);
+			else if (t.key === "Delete" || t.key === "Backspace") {
+				t.preventDefault();
+				let n = k.value.findIndex((t) => t.id === e.id);
+				k.value = k.value.filter((t) => t.id !== e.id), A.value = A.value.filter((t) => t.from !== e.id && t.to !== e.id), j.value === e.id && (j.value = null), N("remove", e.id), L.value = P.value.removed(e.label);
+				let r = k.value[Math.min(n, k.value.length - 1)];
+				r ? $(r.id) : F.value?.querySelector(".bless-canvas")?.focus();
+			}
+		}
+		function fe(e) {
+			if (!O.editable || !K.value || !/^(Delete|Backspace)$/.test(e.key) || e.target.closest?.("[data-node-id]")) return;
+			let t = U.value.find((e) => e.key === K.value);
+			t && (e.preventDefault(), A.value = A.value.filter((e) => e !== t.edge), N("disconnect", t.edge), L.value = P.value.unlinked(W(t.edge.from), W(t.edge.to)), K.value = null);
+		}
+		let pe = o(() => j.value && B.value.has(j.value) ? j.value : k.value[0]?.id);
+		return (t, n) => (h(), c("div", {
+			ref_key: "root",
+			ref: F,
+			class: "bless-graph",
+			onKeydown: fe
+		}, [
+			u(e, {
+				ref_key: "canvas",
+				ref: I,
+				view: M.value,
+				"onUpdate:view": n[1] ||= (e) => M.value = e,
+				grid: d.grid,
+				controls: d.controls,
+				"min-zoom": d.minZoom,
+				"max-zoom": d.maxZoom,
+				label: d.label
+			}, {
+				default: S(() => [(h(), c("svg", w, [
+					l("defs", null, [l("marker", {
+						id: z,
+						viewBox: "0 0 8 8",
+						refX: "7",
+						refY: "4",
+						markerWidth: "8",
+						markerHeight: "8",
+						orient: "auto"
+					}, [...n[2] ||= [l("path", {
+						d: "M0 0L8 4L0 8z",
+						class: "bless-graph__arrow"
+					}, null, -1)]])]),
+					(h(!0), c(a, null, _(U.value, (e) => (h(), c("g", { key: e.key }, [l("path", {
+						class: p(["bless-graph__edge", { "bless-graph__edge--sel": K.value === e.key }]),
+						d: e.d,
+						"marker-end": `url(#${z})`
+					}, null, 10, te), l("path", {
+						class: "bless-graph__edge-hit",
+						d: e.d,
+						onPointerdown: C((t) => (K.value = e.key, j.value = null), ["stop"])
+					}, null, 40, ne)]))), 128)),
+					Z.value ? (h(), c("path", {
+						key: 0,
+						class: "bless-graph__edge bless-graph__edge--preview",
+						d: Z.value
+					}, null, 8, re)) : s("", !0)
+				])), (h(!0), c(a, null, _(k.value, (e) => (h(), c("div", {
+					key: e.id,
+					class: p(["bless-graph__node", {
+						"bless-graph__node--sel": j.value === e.id,
+						"bless-graph__node--target": Q.value?.target === e.id && Q.value.from !== e.id,
+						"bless-graph__node--drag": J.value?.id === e.id
+					}]),
+					"data-node-id": e.id,
+					role: "group",
+					"aria-roledescription": "node",
+					"aria-label": G(e),
+					"aria-describedby": R,
+					tabindex: pe.value === e.id ? 0 : -1,
+					style: m({
+						left: `${e.x}px`,
+						top: `${e.y}px`,
+						width: `${d.nodeWidth}px`,
+						height: `${d.nodeHeight}px`
+					}),
+					onPointerdown: (t) => oe(e, t),
+					onPointermove: (t) => se(e, t),
+					onPointerup: (t) => X(e),
+					onPointercancel: (t) => X(e),
+					onKeydown: C((t) => de(e, t), ["self"])
+				}, [
+					n[3] ||= l("span", {
+						class: "bless-graph__port bless-graph__port--in",
+						"aria-hidden": "true"
+					}, null, -1),
+					v(t.$slots, "node", {
+						node: e,
+						selected: j.value === e.id
+					}, () => [l("span", T, y(e.label), 1)]),
+					d.editable ? (h(), c("span", {
+						key: 0,
+						class: "bless-graph__port bless-graph__port--out",
+						"aria-hidden": "true",
+						onPointerdown: (t) => ce(e, t),
+						onPointermove: le,
+						onPointerup: ue,
+						onPointercancel: n[0] ||= (e) => Y.value = null
+					}, null, 40, E)) : s("", !0)
+				], 46, ie))), 128))]),
+				_: 3
+			}, 8, [
+				"view",
+				"grid",
+				"controls",
+				"min-zoom",
+				"max-zoom",
+				"label"
+			]),
+			l("span", {
+				id: R,
+				hidden: ""
+			}, y(P.value.hint), 1),
+			l("span", D, y(L.value), 1)
+		], 544));
+	}
+});
+//#endregion
+export { O as default };

package/dist/components/BlessOnboardingChecklist.css

@@ -0,0 +1 @@
+.bless-checklist{gap:var(--bless-space-2);box-sizing:border-box;width:min(100%,360px);padding:var(--bless-space-3);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid}.bless-checklist--floating{z-index:var(--bless-z-nav);box-shadow:var(--bless-shadow-plate);position:fixed;inset-block-end:var(--bless-space-4);inset-inline-end:var(--bless-space-4)}.bless-checklist__head{align-items:center;gap:var(--bless-space-2);display:flex}.bless-checklist__toggle{align-items:center;gap:var(--bless-space-2);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;flex:1;padding:0;display:flex}.bless-checklist__toggle:focus-visible,.bless-checklist__close:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-checklist__title{font-weight:var(--bless-font-weight-bold,700)}.bless-checklist__count{color:var(--bless-color-text-muted);margin-inline-start:auto}.bless-checklist__close{padding:0 var(--bless-space-2);color:var(--bless-color-text-muted);font:inherit;font-size:var(--bless-text-lg);cursor:pointer;background:0 0;border:0;line-height:1}.bless-checklist__list{gap:var(--bless-space-2);margin:0;padding:0;list-style:none;display:grid}.bless-checklist__item{justify-content:space-between;align-items:flex-start;gap:var(--bless-space-2);display:flex}.bless-checklist__all{margin:var(--bless-space-2) 0 0;color:var(--bless-color-text);font-weight:var(--bless-font-weight-bold,700)}

package/dist/components/BlessOnboardingChecklist.js

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

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

@@ -0,0 +1,72 @@
+export interface BlessChecklistItem {
+    id: string;
+    label: string;
+    description?: string;
+    /** text of a button that takes the person to the step; it emits `select` */
+    action?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    items: BlessChecklistItem[];
+    title?: string;
+    /** remember progress, collapsed state and dismissal under this key (localStorage) */
+    persist?: string;
+    /** pin it to the bottom corner of the window */
+    floating?: boolean;
+    /** a close button that dismisses it for good */
+    dismissible?: boolean;
+    labels?: Partial<{
+        progress: (done: number, total: number) => string;
+        complete: string;
+        dismiss: string;
+    }>;
+} & {
+    /** ids of the finished steps */
+    done?: string[];
+    collapsed?: boolean;
+    dismissed?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: BlessChecklistItem) => any;
+    dismiss: () => any;
+    complete: () => any;
+    "update:dismissed": (value: boolean) => any;
+    "update:done": (value: string[]) => any;
+    "update:collapsed": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    items: BlessChecklistItem[];
+    title?: string;
+    /** remember progress, collapsed state and dismissal under this key (localStorage) */
+    persist?: string;
+    /** pin it to the bottom corner of the window */
+    floating?: boolean;
+    /** a close button that dismisses it for good */
+    dismissible?: boolean;
+    labels?: Partial<{
+        progress: (done: number, total: number) => string;
+        complete: string;
+        dismiss: string;
+    }>;
+} & {
+    /** ids of the finished steps */
+    done?: string[];
+    collapsed?: boolean;
+    dismissed?: boolean;
+}> & Readonly<{
+    onSelect?: ((item: BlessChecklistItem) => any) | undefined;
+    onDismiss?: (() => any) | undefined;
+    onComplete?: (() => any) | undefined;
+    "onUpdate:dismissed"?: ((value: boolean) => any) | undefined;
+    "onUpdate:done"?: ((value: string[]) => any) | undefined;
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    dismissible: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    complete?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessOnboardingChecklist.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,157 @@
+import e from "./BlessButton.js";
+import t from "./BlessCheckbox.js";
+import n from "./BlessProgress.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useId as x, useModel as S, vShow as C, watch as w, withCtx as T, withDirectives as E } from "vue";
+//#region src/components/BlessOnboardingChecklist.vue?vue&type=script&setup=true&lang.ts
+var D = ["aria-labelledby"], O = { class: "bless-checklist__head" }, k = ["aria-expanded", "aria-controls"], A = ["id"], j = { class: "bless-checklist__count" }, M = {
+	class: "bless-checklist__chev",
+	"aria-hidden": "true"
+}, N = ["aria-label"], P = ["id"], F = {
+	class: "bless-checklist__list",
+	role: "list"
+}, I = {
+	key: 0,
+	class: "bless-checklist__all",
+	role: "status"
+}, L = /*@__PURE__*/ d({
+	name: "BlessOnboardingChecklist",
+	__name: "BlessOnboardingChecklist",
+	props: /*@__PURE__*/ f({
+		items: {},
+		title: { default: "Getting started" },
+		persist: {},
+		floating: { type: Boolean },
+		dismissible: {
+			type: Boolean,
+			default: !0
+		},
+		labels: {}
+	}, {
+		done: { default: () => [] },
+		doneModifiers: {},
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {},
+		dismissed: {
+			type: Boolean,
+			default: !1
+		},
+		dismissedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f([
+		"select",
+		"complete",
+		"dismiss"
+	], [
+		"update:done",
+		"update:collapsed",
+		"update:dismissed"
+	]),
+	setup(d, { emit: f }) {
+		let L = d, R = S(d, "done"), z = S(d, "collapsed"), B = S(d, "dismissed"), V = f, H = i(() => ({
+			progress: (e, t) => `${e} of ${t} done`,
+			complete: "All done — nicely finished.",
+			dismiss: "Dismiss",
+			...L.labels
+		})), U = x(), W = i(() => L.items.filter((e) => R.value.includes(e.id)).length), G = i(() => L.items.length), K = i(() => G.value > 0 && W.value === G.value), q = i(() => L.persist ? `bless-checklist:${L.persist}` : null), J = g(!1);
+		m(() => {
+			try {
+				let e = q.value && localStorage.getItem(q.value);
+				if (e) {
+					let t = JSON.parse(e);
+					t.done && (R.value = t.done), typeof t.collapsed == "boolean" && (z.value = t.collapsed), t.dismissed && (B.value = !0);
+				}
+			} catch {}
+			J.value = !0;
+		}), w([
+			R,
+			z,
+			B
+		], () => {
+			if (J.value && q.value) try {
+				localStorage.setItem(q.value, JSON.stringify({
+					done: R.value,
+					collapsed: z.value,
+					dismissed: B.value
+				}));
+			} catch {}
+		});
+		let Y = !1;
+		w(K, (e) => {
+			e && !Y && (Y = !0, V("complete")), e || (Y = !1);
+		});
+		function X() {
+			B.value = !0, V("dismiss");
+		}
+		return (i, f) => B.value ? o("", !0) : (h(), s("section", {
+			key: 0,
+			class: p(["bless-checklist", {
+				"bless-checklist--floating": d.floating,
+				"bless-checklist--done": K.value
+			}]),
+			"aria-labelledby": `${b(U)}-t`
+		}, [
+			c("header", O, [c("button", {
+				type: "button",
+				class: "bless-checklist__toggle",
+				"aria-expanded": !z.value,
+				"aria-controls": `${b(U)}-b`,
+				onClick: f[0] ||= (e) => z.value = !z.value
+			}, [
+				c("span", {
+					id: `${b(U)}-t`,
+					class: "bless-checklist__title"
+				}, y(d.title), 9, A),
+				c("span", j, y(W.value) + "/" + y(G.value), 1),
+				c("span", M, y(z.value ? "▸" : "▾"), 1)
+			], 8, k), d.dismissible ? (h(), s("button", {
+				key: 0,
+				type: "button",
+				class: "bless-checklist__close",
+				"aria-label": H.value.dismiss,
+				onClick: X
+			}, " × ", 8, N)) : o("", !0)]),
+			u(n, {
+				value: W.value,
+				max: Math.max(1, G.value),
+				size: "sm",
+				label: H.value.progress(W.value, G.value)
+			}, null, 8, [
+				"value",
+				"max",
+				"label"
+			]),
+			E(c("div", {
+				id: `${b(U)}-b`,
+				class: "bless-checklist__body"
+			}, [c("ul", F, [(h(!0), s(r, null, _(d.items, (n) => (h(), s("li", {
+				key: n.id,
+				class: "bless-checklist__item"
+			}, [u(t, {
+				modelValue: R.value,
+				"onUpdate:modelValue": f[1] ||= (e) => R.value = e,
+				value: n.id,
+				description: n.description
+			}, {
+				default: T(() => [l(y(n.label), 1)]),
+				_: 2
+			}, 1032, [
+				"modelValue",
+				"value",
+				"description"
+			]), n.action && !R.value.includes(n.id) ? (h(), a(e, {
+				key: 0,
+				size: "sm",
+				variant: "outline",
+				onClick: (e) => V("select", n)
+			}, {
+				default: T(() => [l(y(n.action), 1)]),
+				_: 2
+			}, 1032, ["onClick"])) : o("", !0)]))), 128))]), K.value ? (h(), s("p", I, [v(i.$slots, "complete", {}, () => [l(y(H.value.complete), 1)])])) : o("", !0)], 8, P), [[C, !z.value]])
+		], 10, D));
+	}
+});
+//#endregion
+export { L as default };

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

@@ -4,6 +4,11 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         label?: string;
         /** hide the ↑ ↓ buttons (drag only) */
         buttons?: boolean;
+        labels?: Partial<{
+            up: (position: number) => string;
+            down: (position: number) => string;
+            moved: (position: number, total: number) => string;
+        }>;
     } & {
         modelValue?: T[];
     }) & {