blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessInfiniteCanvas.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,232 @@
+import e from "./BlessButton.js";
+import { clampZoom as t, fitRect as n, toWorld as r, zoomAt as i } from "../composables/canvasView.js";
+import { computed 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, normalizeStyle as m, openBlock as h, provide as g, ref as _, renderSlot as v, toDisplayString as y, useId as b, useModel as x, withCtx as S, withModifiers as C } from "vue";
+//#region src/components/BlessInfiniteCanvas.vue?vue&type=script&setup=true&lang.ts
+var w = ["aria-label"], T = {
+	class: "bless-canvas__live",
+	"aria-live": "polite"
+}, E = Symbol("blessCanvas"), D = /*@__PURE__*/ d({
+	name: "BlessInfiniteCanvas",
+	__name: "BlessInfiniteCanvas",
+	props: /*@__PURE__*/ f({
+		minZoom: { default: .25 },
+		maxZoom: { default: 4 },
+		grid: {
+			type: Boolean,
+			default: !0
+		},
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		wheelZoom: { type: Boolean },
+		label: { default: "Canvas" },
+		labels: {}
+	}, {
+		view: { default: () => ({
+			x: 0,
+			y: 0,
+			zoom: 1
+		}) },
+		viewModifiers: {}
+	}),
+	emits: ["update:view"],
+	setup(d, { expose: f }) {
+		let D = d, O = x(d, "view"), k = a(() => ({
+			zoomIn: "Zoom in",
+			zoomOut: "Zoom out",
+			reset: "Reset view",
+			zoom: (e) => `Zoom ${e}%`,
+			hint: "Arrow keys pan, plus and minus zoom, 0 resets.",
+			...D.labels
+		})), A = _(), j = _(""), M = `${b()}-hint`, N = a(() => Math.round(O.value.zoom * 100)), P = (e, t) => {
+			let n = A.value?.getBoundingClientRect();
+			return {
+				x: e - (n?.left ?? 0),
+				y: t - (n?.top ?? 0)
+			};
+		}, F = (e, t) => {
+			let n = P(e, t);
+			return r(O.value, n.x, n.y);
+		};
+		g(E, {
+			view: O,
+			toWorld: F
+		});
+		function I(e, t = !1) {
+			O.value = e, t && (j.value = k.value.zoom(Math.round(e.zoom * 100)));
+		}
+		function L(e, t) {
+			let n = A.value?.getBoundingClientRect(), r = t ?? {
+				x: (n?.width ?? 0) / 2,
+				y: (n?.height ?? 0) / 2
+			};
+			I(i(O.value, e, r.x, r.y, D.minZoom, D.maxZoom), !0);
+		}
+		let R = () => I({
+			x: 0,
+			y: 0,
+			zoom: 1
+		}, !0);
+		function z(e, t = 32) {
+			let r = A.value?.getBoundingClientRect();
+			r && I(n(e, r.width, r.height, D.minZoom, D.maxZoom, t), !0);
+		}
+		function B(e, t) {
+			let n = A.value?.getBoundingClientRect();
+			n && I({
+				zoom: O.value.zoom,
+				x: n.width / 2 - e * O.value.zoom,
+				y: n.height / 2 - t * O.value.zoom
+			});
+		}
+		f({
+			zoomBy: L,
+			reset: R,
+			fit: z,
+			centerOn: B,
+			toWorld: F
+		});
+		let V = /* @__PURE__ */ new Map(), H = 0, U = _(!1);
+		function W(e) {
+			(e.target === A.value || e.target.closest?.("[data-canvas-bg]") || e.button === 1) && (e.button > 1 || (A.value?.setPointerCapture?.(e.pointerId), V.set(e.pointerId, {
+				x: e.clientX,
+				y: e.clientY
+			}), H = V.size === 2 ? G() : 0, U.value = !0, e.button === 1 && e.preventDefault()));
+		}
+		let G = () => {
+			let [e, t] = [...V.values()];
+			return Math.hypot(e.x - t.x, e.y - t.y);
+		};
+		function K(e) {
+			let t = V.get(e.pointerId);
+			if (!t) return;
+			let n = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			if (V.set(e.pointerId, n), V.size === 2) {
+				let e = G(), [r, a] = [...V.values()], o = P((r.x + a.x) / 2, (r.y + a.y) / 2), s = H ? i(O.value, e / H, o.x, o.y, D.minZoom, D.maxZoom) : O.value;
+				H = e, I({
+					...s,
+					x: s.x + (n.x - t.x) / 2,
+					y: s.y + (n.y - t.y) / 2
+				});
+			} else I({
+				...O.value,
+				x: O.value.x + n.x - t.x,
+				y: O.value.y + n.y - t.y
+			});
+		}
+		function q(e) {
+			V.delete(e.pointerId), H = 0, V.size || (U.value = !1);
+		}
+		function J(e) {
+			e.preventDefault(), e.ctrlKey || e.metaKey || D.wheelZoom ? L(Math.exp(-e.deltaY * (e.ctrlKey ? .01 : .0015)), P(e.clientX, e.clientY)) : I({
+				...O.value,
+				x: O.value.x - e.deltaX,
+				y: O.value.y - e.deltaY
+			});
+		}
+		function Y(e) {
+			if (e.target !== A.value) return;
+			let t = e.shiftKey ? 160 : 40, n = e.key;
+			if (n === "ArrowLeft") I({
+				...O.value,
+				x: O.value.x + t
+			});
+			else if (n === "ArrowRight") I({
+				...O.value,
+				x: O.value.x - t
+			});
+			else if (n === "ArrowUp") I({
+				...O.value,
+				y: O.value.y + t
+			});
+			else if (n === "ArrowDown") I({
+				...O.value,
+				y: O.value.y - t
+			});
+			else if (n === "+" || n === "=") L(1.25);
+			else if (n === "-" || n === "_") L(.8);
+			else if (n === "0" || n === "Home") R();
+			else return;
+			e.preventDefault();
+		}
+		let X = a(() => ({ transform: `translate(${O.value.x}px, ${O.value.y}px) scale(${t(O.value.zoom, D.minZoom, D.maxZoom)})` })), Z = a(() => {
+			let e = 24 * O.value.zoom;
+			return {
+				backgroundSize: `${e}px ${e}px`,
+				backgroundPosition: `${O.value.x}px ${O.value.y}px`
+			};
+		});
+		return (t, n) => (h(), s("div", {
+			ref_key: "root",
+			ref: A,
+			class: p(["bless-canvas", {
+				"bless-canvas--grid": d.grid,
+				"bless-canvas--pan": U.value
+			}]),
+			style: m(d.grid ? Z.value : void 0),
+			role: "group",
+			"aria-roledescription": "canvas",
+			"aria-label": d.label,
+			"aria-describedby": M,
+			tabindex: "0",
+			onPointerdown: W,
+			onPointermove: K,
+			onPointerup: q,
+			onPointercancel: q,
+			onWheel: J,
+			onKeydown: Y
+		}, [
+			c("div", {
+				class: "bless-canvas__layer",
+				style: m(X.value)
+			}, [v(t.$slots, "default", {
+				view: O.value,
+				zoom: O.value.zoom
+			})], 4),
+			d.controls ? (h(), s("div", {
+				key: 0,
+				class: "bless-canvas__controls",
+				onPointerdown: n[2] ||= C(() => {}, ["stop"])
+			}, [
+				u(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": k.value.zoomOut,
+					onClick: n[0] ||= (e) => L(.8)
+				}, {
+					default: S(() => [...n[3] ||= [l("−", -1)]]),
+					_: 1
+				}, 8, ["aria-label"]),
+				u(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": k.value.reset,
+					onClick: R
+				}, {
+					default: S(() => [l(y(N.value) + "%", 1)]),
+					_: 1
+				}, 8, ["aria-label"]),
+				u(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": k.value.zoomIn,
+					onClick: n[1] ||= (e) => L(1.25)
+				}, {
+					default: S(() => [...n[4] ||= [l("+", -1)]]),
+					_: 1
+				}, 8, ["aria-label"])
+			], 32)) : o("", !0),
+			c("span", {
+				id: M,
+				hidden: ""
+			}, y(k.value.hint), 1),
+			c("span", T, y(j.value), 1)
+		], 46, w));
+	}
+});
+//#endregion
+export { E as blessCanvasKey, D as default };

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

@@ -16,6 +16,11 @@ type __VLS_Props = {
     disabled?: boolean;
     invalid?: boolean;
     label?: string;
+    /** names of the − and + buttons */
+    labels?: Partial<{
+        decrease: string;
+        increase: string;
+    }>;
 };
 type __VLS_ModelProps = {
     modelValue?: number | null;

package/dist/components/BlessInputNumber.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { joinIds as e, useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useModel as h } from "vue";
 //#region src/components/BlessInputNumber.vue?vue&type=script&setup=true&lang.ts
-var g = ["disabled"], _ = {
+var g = ["aria-label", "disabled"], _ = {
 	key: 1,
 	class: "bless-number__affix"
 }, v = [
@@ -18,7 +18,7 @@ var g = ["disabled"], _ = {
 ], y = ["name", "value"], b = {
 	key: 3,
 	class: "bless-number__affix"
-}, x = ["disabled"], S = /*@__PURE__*/ s({
+}, x = ["aria-label", "disabled"], S = /*@__PURE__*/ s({
 	name: "BlessInputNumber",
 	inheritAttrs: !1,
 	__name: "BlessInputNumber",
@@ -39,91 +39,96 @@ var g = ["disabled"], _ = {
 		size: { default: "md" },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
-		label: {}
+		label: {},
+		labels: {}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(s) {
-		let c = s, S = h(s, "modelValue"), C = t(c), w = n(), T = f(!1), E = r(() => new Intl.NumberFormat(c.locale, c.format)), D = r(() => new Intl.NumberFormat(c.locale).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? "."), O = r(() => S.value == null ? "" : T.value || !c.format ? String(S.value).replace(".", D.value) : E.value.format(S.value)), k = r(() => S.value == null ? void 0 : [
+		let c = s, S = r(() => ({
+			decrease: "Decrease",
+			increase: "Increase",
+			...c.labels
+		})), C = h(s, "modelValue"), w = t(c), T = n(), E = f(!1), D = r(() => new Intl.NumberFormat(c.locale, c.format)), O = r(() => new Intl.NumberFormat(c.locale).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? "."), k = r(() => C.value == null ? "" : E.value || !c.format ? String(C.value).replace(".", O.value) : D.value.format(C.value)), A = r(() => C.value == null ? void 0 : [
 			c.prefix,
-			c.format ? E.value.format(S.value) : S.value,
+			c.format ? D.value.format(C.value) : C.value,
 			c.suffix
-		].filter((e) => e != null && e !== "").join(" ")), A = r(() => (String(c.step).split(".")[1] ?? "").length);
-		function j(e) {
-			let t = c.min ?? 0, n = Number((t + Math.round((e - t) / c.step) * c.step).toFixed(A.value));
+		].filter((e) => e != null && e !== "").join(" ")), j = r(() => (String(c.step).split(".")[1] ?? "").length);
+		function M(e) {
+			let t = c.min ?? 0, n = Number((t + Math.round((e - t) / c.step) * c.step).toFixed(j.value));
 			return Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, n));
 		}
-		function M(e) {
+		function N(e) {
 			let t = e.target.value;
-			D.value !== "." && (t = t.replaceAll(".", "").replace(D.value, ".")), t = t.replace(/[^\d.-]/g, ""), S.value = t === "" || t === "-" ? null : Number(t);
+			O.value !== "." && (t = t.replaceAll(".", "").replace(O.value, ".")), t = t.replace(/[^\d.-]/g, ""), C.value = t === "" || t === "-" ? null : Number(t);
 		}
-		function N() {
-			T.value = !1, S.value != null && (S.value = j(S.value));
+		function P() {
+			E.value = !1, C.value != null && (C.value = M(C.value));
 		}
-		let P = (e) => S.value = j((S.value ?? c.min ?? 0) + e * c.step);
-		function F(e) {
+		let F = (e) => C.value = M((C.value ?? c.min ?? 0) + e * c.step);
+		function I(e) {
 			let t = {
 				ArrowUp: 1,
 				ArrowDown: -1,
 				PageUp: 10,
 				PageDown: -10
 			}[e.key], n = e.key === "Home" ? c.min : e.key === "End" ? c.max : void 0;
-			if (t) P(t);
-			else if (n != null) S.value = n;
+			if (t) F(t);
+			else if (n != null) C.value = n;
 			else return;
 			e.preventDefault();
 		}
 		return (t, n) => (d(), a("div", { class: u(["bless-number bless-lean--field", [`bless-number--${s.size}`, {
 			"bless-number--disabled": s.disabled,
-			"bless-number--invalid": s.invalid || m(w).invalid.value
+			"bless-number--invalid": s.invalid || m(T).invalid.value
 		}]]) }, [
 			s.buttons ? (d(), a("button", {
 				key: 0,
 				type: "button",
 				class: "bless-number__btn",
-				"aria-label": "Decrease",
-				disabled: s.disabled || s.min != null && (S.value ?? 0) <= s.min,
+				"aria-label": S.value.decrease,
+				disabled: s.disabled || s.min != null && (C.value ?? 0) <= s.min,
 				tabindex: "-1",
-				onClick: n[0] ||= (e) => P(-1)
+				onClick: n[0] ||= (e) => F(-1)
 			}, " − ", 8, g)) : i("", !0),
 			s.prefix ? (d(), a("span", _, p(s.prefix), 1)) : i("", !0),
 			o("input", l(t.$attrs, {
-				id: m(C)(),
+				id: m(w)(),
 				type: "text",
 				inputmode: "decimal",
 				class: "bless-number__control",
-				value: O.value,
+				value: k.value,
 				disabled: s.disabled,
 				"aria-label": s.label,
-				"aria-invalid": s.invalid || m(w).invalid.value || void 0,
-				"aria-describedby": m(e)(m(w).describedby.value, t.$attrs["aria-describedby"]),
+				"aria-invalid": s.invalid || m(T).invalid.value || void 0,
+				"aria-describedby": m(e)(m(T).describedby.value, t.$attrs["aria-describedby"]),
 				role: "spinbutton",
-				"aria-valuenow": S.value ?? void 0,
-				"aria-valuetext": k.value,
+				"aria-valuenow": C.value ?? void 0,
+				"aria-valuetext": A.value,
 				"aria-valuemin": s.min,
 				"aria-valuemax": s.max,
-				onFocus: n[1] ||= (e) => T.value = !0,
-				onBlur: N,
-				onInput: M,
-				onKeydown: F
+				onFocus: n[1] ||= (e) => E.value = !0,
+				onBlur: P,
+				onInput: N,
+				onKeydown: I
 			}), null, 16, v),
 			s.name ? (d(), a("input", {
 				key: 2,
 				type: "hidden",
 				name: s.name,
-				value: S.value ?? ""
+				value: C.value ?? ""
 			}, null, 8, y)) : i("", !0),
 			s.suffix ? (d(), a("span", b, p(s.suffix), 1)) : i("", !0),
 			s.buttons ? (d(), a("button", {
 				key: 4,
 				type: "button",
 				class: "bless-number__btn",
-				"aria-label": "Increase",
-				disabled: s.disabled || s.max != null && (S.value ?? 0) >= s.max,
+				"aria-label": S.value.increase,
+				disabled: s.disabled || s.max != null && (C.value ?? 0) >= s.max,
 				tabindex: "-1",
-				onClick: n[2] ||= (e) => P(1)
+				onClick: n[2] ||= (e) => F(1)
 			}, " + ", 8, x)) : i("", !0)
 		], 2));
 	}

package/dist/components/BlessKanban.css

@@ -0,0 +1 @@
+.bless-kanban{gap:var(--bless-space-3);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);grid-auto-columns:minmax(220px,1fr);grid-auto-flow:column;align-items:start;display:grid;position:relative;overflow-x:auto}.bless-kanban__col{min-width:0;padding:var(--bless-space-2);background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border)}.bless-kanban__head{justify-content:space-between;align-items:baseline;gap:var(--bless-space-2);padding:var(--bless-space-1) var(--bless-space-1) var(--bless-space-2);display:flex}.bless-kanban__title{font-size:var(--bless-text-sm);margin:0;font-weight:600}.bless-kanban__count{color:var(--bless-color-text-muted);font-size:var(--bless-text-xs)}.bless-kanban__col--full .bless-kanban__count{color:var(--bless-color-danger-text)}.bless-kanban__list{gap:var(--bless-space-2);padding:0 0 var(--bless-space-3);min-height:2rem;margin:0;list-style:none;display:grid}.bless-kanban__list--end{box-shadow:inset 0 -2px 0 var(--bless-color-accent)}.bless-kanban__card{align-items:flex-start;gap:var(--bless-space-2);padding:var(--bless-space-2);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-kanban__card--drag{opacity:.4}.bless-kanban__card--held{border-color:var(--bless-color-accent)}.bless-kanban__card--before{box-shadow:0 -5px 0 -3px var(--bless-color-accent);border-top-color:var(--bless-color-accent)}.bless-kanban__grip{padding:0 var(--bless-space-1);color:var(--bless-color-text-muted);font:inherit;letter-spacing:-3px;cursor:grab;touch-action:none;background:0 0;border:0;flex:none}.bless-kanban__grip:active{cursor:grabbing}.bless-kanban__grip:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-kanban__body{flex:1;min-width:0}.bless-kanban__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessKanban.js

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

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

@@ -0,0 +1,67 @@
+export interface BlessKanbanColumn<T = unknown> {
+    id: string;
+    title: string;
+    items: T[];
+    /** most cards the column takes; a full column refuses drops */
+    limit?: number;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+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) => string | number;
+        label?: string;
+        /** screen-reader wording; each message that carries names or numbers is a function of them */
+        labels?: Partial<{
+            card: (index: number, column: string) => string;
+            moved: (column: string, position: number, total: number) => string;
+            position: (column: string, position: number, total: number) => string;
+            dropped: (column: string, position: number) => string;
+            full: (column: string) => string;
+            grabbed: string;
+            cancelled: string;
+            hint: string;
+            roleDescription: string;
+        }>;
+    } & {
+        modelValue?: BlessKanbanColumn<T>[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: BlessKanbanColumn<T>[]) => any) | undefined;
+        onMove?: ((item: T, from: {
+            column: string;
+            index: number;
+        }, to: {
+            column: string;
+            index: number;
+        }) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        header?: (props: {
+            column: BlessKanbanColumn<T>;
+        }) => any;
+    } & {
+        card?: (props: {
+            item: T;
+            column: BlessKanbanColumn<T>;
+            index: number;
+        }) => any;
+    };
+    emit: ((evt: "move", item: T, from: {
+        column: string;
+        index: number;
+    }, to: {
+        column: string;
+        index: number;
+    }) => void) & ((event: "update:modelValue", value: BlessKanbanColumn<T>[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessKanban.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,195 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { useAutoScroll as t } from "../composables/useAutoScroll.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, onBeforeUnmount as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, useId as v, useModel as y } from "vue";
+//#region src/components/BlessKanban.vue?vue&type=script&setup=true&lang.ts
+var b = ["aria-label"], x = ["data-kanban-col", "aria-label"], S = { class: "bless-kanban__head" }, C = { class: "bless-kanban__title" }, w = { class: "bless-kanban__count" }, T = [
+	"data-grip",
+	"aria-label",
+	"aria-roledescription",
+	"aria-pressed",
+	"onPointerdown",
+	"onKeydown"
+], E = { class: "bless-kanban__body" }, D = {
+	class: "bless-kanban__live",
+	"aria-live": "polite"
+}, O = /*@__PURE__*/ c({
+	name: "BlessKanban",
+	__name: "BlessKanban",
+	props: /*@__PURE__*/ l({
+		rowKey: { type: Function },
+		label: {},
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["move"], ["update:modelValue"]),
+	setup(c, { emit: l }) {
+		let O = c, k = r(() => ({
+			card: (e, t) => `Move card ${e} of ${t}`,
+			moved: (e, t, n) => `Moved to ${e}, position ${t} of ${n}`,
+			position: (e, t, n) => `${e}, position ${t} of ${n}`,
+			dropped: (e, t) => `Dropped in ${e}, position ${t}`,
+			full: (e) => `${e} is full`,
+			grabbed: "Grabbed. Up and down move it in the column, left and right to another column, Space drops it, Escape cancels.",
+			cancelled: "Cancelled, order restored",
+			hint: "Press Space to grab a card. Up and down move it in its column, left and right to another column. Space drops it, Escape cancels.",
+			roleDescription: "sortable card",
+			...O.labels
+		})), A = y(c, "modelValue"), j = l, M = m(), N = m(""), P = `${v()}-hint`, F = m(null), I = m(null), L = m(null), R = [], z = {
+			col: 0,
+			index: 0
+		}, B = (e, t) => {
+			let n = A.value[e];
+			return e !== t && n.limit != null && n.items.length >= n.limit;
+		};
+		function V(e, t, n, r) {
+			let i = A.value.map((e) => ({
+				...e,
+				items: e.items.slice()
+			})), [a] = i[e].items.splice(t, 1);
+			i[n].items.splice(r, 0, a), A.value = i, j("move", a, {
+				column: A.value[e].id,
+				index: t
+			}, {
+				column: A.value[n].id,
+				index: r
+			});
+		}
+		function H(e, t) {
+			for (let n of document.elementsFromPoint(e, t)) {
+				let e = n.closest?.("[data-kanban-col]");
+				if (e && M.value?.contains(e)) return e;
+			}
+			return null;
+		}
+		let U = {
+			x: 0,
+			y: 0
+		}, W = t(() => M.value, () => K(U.x, U.y));
+		f(W.stop);
+		function G(e) {
+			U = {
+				x: e.clientX,
+				y: e.clientY
+			}, W.point(e.clientX, e.clientY), K(e.clientX, e.clientY);
+		}
+		function K(e, t) {
+			if (!F.value) return;
+			let n = H(e, t);
+			if (!n) return void (I.value = null);
+			let r = Number(n.dataset.kanbanCol);
+			if (B(r, F.value.col)) return void (I.value = null);
+			let i = Array.from(n.querySelectorAll("[data-kanban-card]")).filter((e) => {
+				let n = e.getBoundingClientRect();
+				return n.top + n.height / 2 < t;
+			}).length;
+			I.value = {
+				col: r,
+				index: i
+			};
+		}
+		function q(e, t, n) {
+			n.button || (n.currentTarget.setPointerCapture?.(n.pointerId), F.value = {
+				col: e,
+				index: t
+			}, I.value = {
+				col: e,
+				index: t
+			}, U = {
+				x: n.clientX,
+				y: n.clientY
+			}, W.point(n.clientX, n.clientY), W.start());
+		}
+		function J() {
+			let e = F.value, t = I.value;
+			if (W.stop(), F.value = I.value = null, !e || !t) return;
+			let n = t.col === e.col && t.index > e.index ? t.index - 1 : t.index;
+			(t.col !== e.col || n !== e.index) && (V(e.col, e.index, t.col, n), N.value = k.value.moved(A.value[t.col].title, n + 1, A.value[t.col].items.length));
+		}
+		let Y = () => {
+			W.stop(), F.value = I.value = null;
+		}, X = (e, t) => u(() => M.value?.querySelector(`[data-grip="${e}:${t}"]`)?.focus());
+		function Z(e, t, n, r) {
+			let i = A.value.length;
+			if (n < 0 || n >= i) return;
+			if (B(n, e)) {
+				N.value = k.value.full(A.value[n].title);
+				return;
+			}
+			let a = A.value[n].items.length - +(n === e);
+			r = Math.min(Math.max(r, 0), a), (n !== e || r !== t) && (V(e, t, n, r), L.value = {
+				col: n,
+				index: r
+			}, N.value = k.value.position(A.value[n].title, r + 1, A.value[n].items.length), X(n, r));
+		}
+		function Q(t, n, r) {
+			let i = e(r), a = L.value;
+			r.key === " " || r.key === "Enter" ? (r.preventDefault(), a ? (L.value = null, N.value = k.value.dropped(A.value[t].title, n + 1)) : (L.value = {
+				col: t,
+				index: n
+			}, z = {
+				col: t,
+				index: n
+			}, R = A.value.map((e) => ({
+				...e,
+				items: e.items.slice()
+			})), N.value = k.value.grabbed)) : r.key === "Escape" && a ? (r.preventDefault(), A.value = R, L.value = null, N.value = k.value.cancelled, X(z.col, z.index)) : a && (i === "ArrowUp" ? (r.preventDefault(), Z(t, n, t, n - 1)) : i === "ArrowDown" ? (r.preventDefault(), Z(t, n, t, n + 1)) : i === "ArrowLeft" ? (r.preventDefault(), Z(t, n, t - 1, n)) : i === "ArrowRight" && (r.preventDefault(), Z(t, n, t + 1, n)));
+		}
+		let ee = () => requestAnimationFrame(() => {
+			L.value && !M.value?.contains(document.activeElement) && (L.value = null);
+		}), $ = (e, t) => {
+			let n = I.value;
+			return !n || n.col !== e || !F.value ? null : n.index === t ? "before" : null;
+		}, te = (e) => I.value?.col === e && F.value && I.value.index >= A.value[e].items.length;
+		return (e, t) => (p(), a("div", {
+			ref_key: "root",
+			ref: M,
+			class: "bless-kanban",
+			role: "group",
+			"aria-label": c.label ?? "Board"
+		}, [
+			(p(!0), a(n, null, h(A.value, (r, l) => (p(), a("section", {
+				key: r.id,
+				class: d(["bless-kanban__col", { "bless-kanban__col--full": r.limit != null && r.items.length >= r.limit }]),
+				"data-kanban-col": l,
+				"aria-label": r.title
+			}, [o("header", S, [g(e.$slots, "header", { column: r }, () => [o("h3", C, _(r.title), 1)]), o("span", w, [s(_(r.items.length), 1), r.limit == null ? i("", !0) : (p(), a(n, { key: 0 }, [s(" / " + _(r.limit), 1)], 64))])]), o("ul", {
+				class: d(["bless-kanban__list", { "bless-kanban__list--end": te(l) }]),
+				role: "list"
+			}, [(p(!0), a(n, null, h(r.items, (n, i) => (p(), a("li", {
+				key: c.rowKey ? c.rowKey(n) : i,
+				"data-kanban-card": "",
+				class: d(["bless-kanban__card", [{
+					"bless-kanban__card--drag": F.value?.col === l && F.value.index === i,
+					"bless-kanban__card--held": L.value?.col === l && L.value.index === i
+				}, $(l, i) && `bless-kanban__card--${$(l, i)}`]])
+			}, [o("button", {
+				type: "button",
+				class: "bless-kanban__grip",
+				"data-grip": `${l}:${i}`,
+				"aria-label": k.value.card(i + 1, r.title),
+				"aria-roledescription": k.value.roleDescription,
+				"aria-pressed": L.value?.col === l && L.value.index === i,
+				"aria-describedby": P,
+				onPointerdown: (e) => q(l, i, e),
+				onPointermove: G,
+				onPointerup: J,
+				onPointercancel: Y,
+				onKeydown: (e) => Q(l, i, e),
+				onBlur: ee
+			}, [...t[0] ||= [o("span", { "aria-hidden": "true" }, "⋮⋮", -1)]], 40, T), o("div", E, [g(e.$slots, "card", {
+				item: n,
+				column: r,
+				index: i
+			}, () => [s(_(n), 1)])])], 2))), 128))], 2)], 10, x))), 128)),
+			o("span", {
+				id: P,
+				hidden: ""
+			}, _(k.value.hint), 1),
+			o("span", D, _(N.value), 1)
+		], 8, b));
+	}
+});
+//#endregion
+export { O as default };

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

@@ -2,9 +2,11 @@ type __VLS_Props = {
     height?: string;
     position?: "top" | "bottom";
     color?: "accent" | "text";
+    label?: 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: "accent" | "text";
+    label: string;
     position: "top" | "bottom";
     height: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;