blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessAnnotator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,264 @@
+import e from "./BlessButton.js";
+import { boxFrom as t, isBox as n, moveRegion as r, nextId as i, resizeRegion as a } from "../composables/annotate.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, nextTick as h, normalizeClass as g, normalizeStyle as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useId as C, useModel as w, withCtx as T } from "vue";
+//#region src/components/BlessAnnotator.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "bless-annot" }, D = ["aria-label"], O = ["aria-label"], k = ["src", "alt"], A = [
+	"data-region",
+	"aria-pressed",
+	"aria-label",
+	"tabindex",
+	"onPointerdown",
+	"onKeydown",
+	"onFocus"
+], ee = {
+	class: "bless-annot__num",
+	"aria-hidden": "true"
+}, te = ["onPointerdown"], ne = {
+	key: 1,
+	class: "bless-annot__edit"
+}, re = { class: "bless-annot__field" }, ie = ["value"], ae = ["aria-label"], j = ["aria-pressed", "onClick"], M = {
+	class: "bless-annot__live",
+	"aria-live": "polite"
+}, N = /*@__PURE__*/ p({
+	name: "BlessAnnotator",
+	__name: "BlessAnnotator",
+	props: /*@__PURE__*/ m({
+		src: {},
+		alt: { default: "" },
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Annotated image" },
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {},
+		selected: { default: null },
+		selectedModifiers: {},
+		tool: { default: "box" },
+		toolModifiers: {}
+	}),
+	emits: [
+		"update:modelValue",
+		"update:selected",
+		"update:tool"
+	],
+	setup(p) {
+		let m = p, N = w(p, "modelValue"), P = w(p, "selected"), F = w(p, "tool"), I = s(() => ({
+			tools: "Tools",
+			select: "Select",
+			box: "Box",
+			pin: "Pin",
+			add: "Add at centre",
+			remove: "Remove",
+			name: "Name",
+			regions: "Marks",
+			regionName: (e, t, n) => `${e === "box" ? I.value.box : I.value.pin} ${t}${n ? `: ${n}` : ""}`,
+			added: (e) => `${e} added`,
+			removed: (e) => `${e} removed`,
+			moved: (e, t) => `${e}% across, ${t}% down`,
+			hint: "Arrow keys move the mark, Alt with arrows resizes a box, Delete removes it.",
+			...m.labels
+		})), L = `${C()}-hint`, R = y(), z = y(), B = y(""), V = (e) => I.value.regionName(n(e) ? "box" : "pin", N.value.indexOf(e) + 1, e.label), H = s(() => N.value.find((e) => e.id === P.value)), U = (e) => `${e * 100}%`, W = (e) => ({
+			left: U(e.x),
+			top: U(e.y),
+			...n(e) ? {
+				width: U(e.w),
+				height: U(e.h)
+			} : {}
+		}), G = (e) => {
+			let t = R.value.getBoundingClientRect();
+			return {
+				x: Math.min(1, Math.max(0, (e.clientX - t.left) / (t.width || 1))),
+				y: Math.min(1, Math.max(0, (e.clientY - t.top) / (t.height || 1)))
+			};
+		}, K = (e) => N.value = N.value.map((t) => t.id === e.id ? e : t);
+		function q(e) {
+			let t = {
+				id: i(N.value),
+				label: "",
+				...e
+			}, r = [...N.value, t];
+			N.value = r, P.value = t.id, B.value = I.value.added(I.value.regionName(n(t) ? "box" : "pin", r.length, "")), h(() => z.value?.focus());
+		}
+		function oe() {
+			F.value === "pin" ? q({
+				x: .5,
+				y: .5
+			}) : q({
+				x: .35,
+				y: .35,
+				w: .3,
+				h: .3
+			});
+		}
+		function J(e) {
+			let t = V(e), n = N.value.indexOf(e), r = N.value.filter((t) => t !== e);
+			N.value = r, P.value = r[Math.min(n, r.length - 1)]?.id ?? null, B.value = I.value.removed(t), h(() => P.value ? Y(P.value) : R.value?.focus());
+		}
+		let Y = (e) => R.value?.querySelector(`[data-region="${CSS.escape(e)}"]`)?.focus(), X = null, Z = y(null);
+		function se(e) {
+			if (e.button || e.target.closest("[data-region]") || (P.value = null, !m.editable || F.value === "select")) return;
+			let n = G(e);
+			if (F.value === "pin") return q({
+				x: n.x,
+				y: n.y
+			});
+			R.value.setPointerCapture?.(e.pointerId), X = {
+				kind: "draw",
+				from: n
+			}, Z.value = t(n, n);
+		}
+		function Q(e, t, n) {
+			t.button || (t.stopPropagation(), P.value = e.id, m.editable && (R.value.setPointerCapture?.(t.pointerId), X = {
+				kind: n,
+				r: e,
+				from: G(t)
+			}));
+		}
+		function ce(e) {
+			if (!X) return;
+			let n = G(e);
+			X.kind === "draw" ? Z.value = t(X.from, n) : X.kind === "move" ? K(r(X.r, n.x - X.from.x, n.y - X.from.y)) : K(a(X.r, n.x - X.from.x, n.y - X.from.y));
+		}
+		function $() {
+			let e = Z.value, t = X;
+			X = null, Z.value = null, t?.kind === "draw" && e && e.w >= .02 && e.h >= .02 && q(e);
+		}
+		function le(e, t) {
+			if (t.target.closest("input")) return;
+			let n = {
+				ArrowLeft: [-1, 0],
+				ArrowRight: [1, 0],
+				ArrowUp: [0, -1],
+				ArrowDown: [0, 1]
+			}[t.key];
+			if (n && m.editable) {
+				t.preventDefault();
+				let i = t.shiftKey ? .05 : .01, o = t.altKey ? a(e, n[0] * i, n[1] * i) : r(e, n[0] * i, n[1] * i);
+				K(o), B.value = I.value.moved(Math.round(o.x * 100), Math.round(o.y * 100));
+			} else (t.key === "Delete" || t.key === "Backspace") && m.editable ? (t.preventDefault(), J(e)) : (t.key === "Enter" || t.key === " ") && (t.preventDefault(), P.value = e.id, h(() => z.value?.focus()));
+		}
+		let ue = s(() => P.value ?? N.value[0]?.id), de = (e) => H.value && K({
+			...H.value,
+			label: e
+		});
+		return (t, r) => (v(), l("div", E, [
+			p.editable ? (v(), l("div", {
+				key: 0,
+				class: "bless-annot__bar",
+				role: "toolbar",
+				"aria-label": I.value.tools
+			}, [
+				(v(), l(o, null, b([
+					"select",
+					"box",
+					"pin"
+				], (t) => f(e, {
+					key: t,
+					size: "sm",
+					variant: F.value === t ? "solid" : "outline",
+					"aria-pressed": F.value === t,
+					onClick: (e) => F.value = t
+				}, {
+					default: T(() => [d(x(I.value[t]), 1)]),
+					_: 2
+				}, 1032, [
+					"variant",
+					"aria-pressed",
+					"onClick"
+				])), 64)),
+				f(e, {
+					size: "sm",
+					variant: "ghost",
+					onClick: oe
+				}, {
+					default: T(() => [d(x(I.value.add), 1)]),
+					_: 1
+				}),
+				f(e, {
+					size: "sm",
+					variant: "ghost",
+					disabled: !H.value,
+					onClick: r[0] ||= (e) => H.value && J(H.value)
+				}, {
+					default: T(() => [d(x(I.value.remove), 1)]),
+					_: 1
+				}, 8, ["disabled"])
+			], 8, D)) : c("", !0),
+			u("div", {
+				ref_key: "stage",
+				ref: R,
+				class: g(["bless-annot__stage", [`bless-annot__stage--${F.value}`, { "bless-annot__stage--ro": !p.editable }]]),
+				role: "group",
+				"aria-label": p.label,
+				"aria-describedby": L,
+				tabindex: "-1",
+				onPointerdown: se,
+				onPointermove: ce,
+				onPointerup: $,
+				onPointercancel: $
+			}, [
+				u("img", {
+					class: "bless-annot__img",
+					src: p.src,
+					alt: p.alt,
+					draggable: "false"
+				}, null, 8, k),
+				(v(!0), l(o, null, b(N.value, (e, t) => (v(), l("div", {
+					key: e.id,
+					class: g(["bless-annot__mark", [S(n)(e) ? "bless-annot__mark--box" : "bless-annot__mark--pin", { "bless-annot__mark--sel": P.value === e.id }]]),
+					style: _(W(e)),
+					"data-region": e.id,
+					role: "button",
+					"aria-pressed": P.value === e.id,
+					"aria-label": V(e),
+					tabindex: ue.value === e.id ? 0 : -1,
+					onPointerdown: (t) => Q(e, t, "move"),
+					onKeydown: (t) => le(e, t),
+					onFocus: (t) => P.value = e.id
+				}, [u("span", ee, x(t + 1), 1), p.editable && S(n)(e) && P.value === e.id ? (v(), l("span", {
+					key: 0,
+					class: "bless-annot__handle",
+					"aria-hidden": "true",
+					onPointerdown: (t) => Q(e, t, "size")
+				}, null, 40, te)) : c("", !0)], 46, A))), 128)),
+				Z.value ? (v(), l("div", {
+					key: 0,
+					class: "bless-annot__mark bless-annot__mark--box bless-annot__mark--draft",
+					style: _(W({
+						id: "",
+						label: "",
+						...Z.value
+					}))
+				}, null, 4)) : c("", !0)
+			], 42, O),
+			H.value && p.editable ? (v(), l("div", ne, [u("label", re, [u("span", null, x(I.value.name), 1), u("input", {
+				ref_key: "nameInput",
+				ref: z,
+				class: "bless-annot__input",
+				type: "text",
+				value: H.value.label,
+				onInput: r[1] ||= (e) => de(e.target.value)
+			}, null, 40, ie)])])) : c("", !0),
+			N.value.length ? (v(), l("ol", {
+				key: 2,
+				class: "bless-annot__list",
+				"aria-label": I.value.regions
+			}, [(v(!0), l(o, null, b(N.value, (e) => (v(), l("li", { key: e.id }, [u("button", {
+				type: "button",
+				class: "bless-annot__item",
+				"aria-pressed": P.value === e.id,
+				onClick: (t) => (P.value = e.id, Y(e.id))
+			}, x(V(e)), 9, j)]))), 128))], 8, ae)) : c("", !0),
+			u("span", {
+				id: L,
+				hidden: ""
+			}, x(I.value.hint), 1),
+			u("span", M, x(B.value), 1)
+		]));
+	}
+});
+//#endregion
+export { N as default };

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

@@ -12,6 +12,8 @@ type __VLS_Props = {
     size?: "sm" | "md";
     removable?: boolean;
     removeLabel?: string;
+    /** shown for `state="error"` */
+    errorText?: string;
 };
 declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
@@ -27,8 +29,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     onRemove?: (() => any) | undefined;
 }>, {
     size: "sm" | "md";
-    state: "idle" | "uploading" | "error";
     removeLabel: string;
+    state: "idle" | "uploading" | "error";
+    errorText: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/BlessAttachment.vue_vue_type_script_setup_true_lang.js

@@ -26,7 +26,8 @@ var p = ["aria-busy"], m = { class: "bless-attachment__media" }, h = ["src"], g
 		progress: {},
 		size: { default: "md" },
 		removable: { type: Boolean },
-		removeLabel: { default: "Remove" }
+		removeLabel: { default: "Remove" },
+		errorText: { default: "Upload failed" }
 	},
 	emits: ["remove"],
 	setup(c, { emit: C }) {
@@ -56,7 +57,7 @@ var p = ["aria-busy"], m = { class: "bless-attachment__media" }, h = ["src"], g
 					href: c.href,
 					class: "bless-attachment__name bless-attachment__link"
 				}, f(c.name), 9, v)) : (u(), a("span", y, f(c.name), 1)),
-				c.description || c.state === "error" ? (u(), a("span", b, [d(n.$slots, "description", {}, () => [s(f(c.state === "error" ? "Upload failed" : c.description), 1)])])) : i("", !0),
+				c.description || c.state === "error" ? (u(), a("span", b, [d(n.$slots, "description", {}, () => [s(f(c.state === "error" ? c.errorText : c.description), 1)])])) : i("", !0),
 				c.state === "uploading" && c.progress != null ? (u(), r(t, {
 					key: 3,
 					value: c.progress,

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

@@ -9,6 +9,10 @@ type __VLS_Props = {
     disabledDates?: (iso: string) => boolean;
     /** month shown initially (YYYY-MM); defaults to model or today */
     month?: string;
+    labels?: Partial<{
+        prev: string;
+        next: string;
+    }>;
 };
 type __VLS_ModelProps = {
     modelValue?: string | [string, string] | undefined;

package/dist/components/BlessCalendar.vue_vue_type_script_setup_true_lang.js

@@ -2,16 +2,16 @@ import { logicalKey as e } from "../composables/rtl.js";
 import { addDays as t, addMonths as n, fromISO as r, isoToday as i, toISO as a } from "../composables/date.js";
 import { Fragment as o, computed as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, onMounted as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useId as y, useModel as b, watch as x } from "vue";
 //#region src/components/BlessCalendar.vue?vue&type=script&setup=true&lang.ts
-var S = ["aria-label"], C = { class: "bless-calendar__head" }, w = {
+var S = ["aria-label"], C = { class: "bless-calendar__head" }, w = ["aria-label"], T = {
 	class: "bless-calendar__month",
 	"aria-live": "polite"
-}, T = {
+}, E = ["aria-label"], D = {
 	key: 0,
 	class: "bless-calendar__grid bless-calendar__grid--pending"
-}, E = {
+}, O = {
 	role: "row",
 	class: "bless-calendar__row bless-calendar__row--head"
-}, D = [
+}, k = [
 	"id",
 	"tabindex",
 	"aria-selected",
@@ -20,7 +20,7 @@ var S = ["aria-label"], C = { class: "bless-calendar__head" }, w = {
 	"onClick",
 	"onMouseenter",
 	"onFocus"
-], O = /*@__PURE__*/ u({
+], A = /*@__PURE__*/ u({
 	name: "BlessCalendar",
 	__name: "BlessCalendar",
 	props: /*@__PURE__*/ d({
@@ -30,25 +30,30 @@ var S = ["aria-label"], C = { class: "bless-calendar__head" }, w = {
 		weekStart: { default: 1 },
 		locale: { default: "ja-JP" },
 		disabledDates: {},
-		month: {}
+		month: {},
+		labels: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(u) {
-		let d = u, O = b(u, "modelValue"), k = y(), A = s(() => Array.isArray(O.value) ? O.value[0] : O.value), j = d.month ? `${d.month}-01` : A.value, M = h(""), N = h(!!j), P = h(r(j ?? i())), F = h(A.value ?? j ?? i());
+		let d = u, A = s(() => ({
+			prev: "Previous month",
+			next: "Next month",
+			...d.labels
+		})), j = b(u, "modelValue"), M = y(), N = s(() => Array.isArray(j.value) ? j.value[0] : j.value), P = d.month ? `${d.month}-01` : N.value, F = h(""), I = h(!!P), L = h(r(P ?? i())), R = h(N.value ?? P ?? i());
 		p(() => {
-			M.value = i(), j || (P.value = r(M.value), F.value = M.value, N.value = !0);
+			F.value = i(), P || (L.value = r(F.value), R.value = F.value, I.value = !0);
 		});
-		let I = h(), L = h(), R = s(() => new Intl.DateTimeFormat(d.locale, {
+		let z = h(), B = h(), V = s(() => new Intl.DateTimeFormat(d.locale, {
 			year: "numeric",
 			month: "long"
-		}).format(P.value)), z = s(() => new Intl.DateTimeFormat(d.locale, { dateStyle: "full" })), B = s(() => {
+		}).format(L.value)), H = s(() => new Intl.DateTimeFormat(d.locale, { dateStyle: "full" })), U = s(() => {
 			let e = new Intl.DateTimeFormat(d.locale, { weekday: "short" }), n = new Date(2024, 0, 7 + d.weekStart);
 			return Array.from({ length: 7 }, (r, i) => e.format(t(n, i)));
-		}), V = s(() => {
-			let e = P.value.getFullYear(), t = P.value.getMonth(), n = (new Date(e, t, 1).getDay() - d.weekStart + 7) % 7, r = [];
+		}), W = s(() => {
+			let e = L.value.getFullYear(), t = L.value.getMonth(), n = (new Date(e, t, 1).getDay() - d.weekStart + 7) % 7, r = [];
 			for (let i = -n; r.length < 42; i++) {
 				let n = new Date(e, t, 1 + i);
 				r.push({
@@ -58,63 +63,63 @@ var S = ["aria-label"], C = { class: "bless-calendar__head" }, w = {
 				});
 			}
 			return r;
-		}), H = (e) => d.min && e < d.min || d.max && e > d.max || !!d.disabledDates?.(e), U = s(() => {
+		}), G = (e) => d.min && e < d.min || d.max && e > d.max || !!d.disabledDates?.(e), K = s(() => {
 			if (!d.range) return null;
-			if (L.value) {
-				let e = I.value ?? F.value;
-				return e < L.value ? [e, L.value] : [L.value, e];
+			if (B.value) {
+				let e = z.value ?? R.value;
+				return e < B.value ? [e, B.value] : [B.value, e];
 			}
-			return Array.isArray(O.value) ? O.value : null;
-		}), W = (e) => d.range ? U.value?.[0] === e || U.value?.[1] === e : O.value === e, G = (e) => !!U.value && e > U.value[0] && e < U.value[1];
-		function K(e) {
-			if (!H(e)) {
-				if (F.value = e, !d.range) return void (O.value = e);
-				L.value ? (O.value = e < L.value ? [e, L.value] : [L.value, e], L.value = void 0) : L.value = e;
+			return Array.isArray(j.value) ? j.value : null;
+		}), q = (e) => d.range ? K.value?.[0] === e || K.value?.[1] === e : j.value === e, J = (e) => !!K.value && e > K.value[0] && e < K.value[1];
+		function Y(e) {
+			if (!G(e)) {
+				if (R.value = e, !d.range) return void (j.value = e);
+				B.value ? (j.value = e < B.value ? [e, B.value] : [B.value, e], B.value = void 0) : B.value = e;
 			}
 		}
-		function q(e) {
-			let n = r(F.value);
-			n = t(n, e), F.value = a(n), (n.getMonth() !== P.value.getMonth() || n.getFullYear() !== P.value.getFullYear()) && (P.value = new Date(n.getFullYear(), n.getMonth(), 1)), requestAnimationFrame(() => document.getElementById(`${k}-${F.value}`)?.focus());
+		function X(e) {
+			let n = r(R.value);
+			n = t(n, e), R.value = a(n), (n.getMonth() !== L.value.getMonth() || n.getFullYear() !== L.value.getFullYear()) && (L.value = new Date(n.getFullYear(), n.getMonth(), 1)), requestAnimationFrame(() => document.getElementById(`${M}-${R.value}`)?.focus());
 		}
-		function J(t) {
+		function Z(t) {
 			let n = {
 				ArrowLeft: -1,
 				ArrowRight: 1,
 				ArrowUp: -7,
 				ArrowDown: 7
 			};
-			t.key in n ? (t.preventDefault(), q(n[e(t)])) : t.key === "PageUp" ? (t.preventDefault(), Y(t.shiftKey ? -12 : -1, !0)) : t.key === "PageDown" ? (t.preventDefault(), Y(t.shiftKey ? 12 : 1, !0)) : t.key === "Home" ? (t.preventDefault(), q(-((r(F.value).getDay() - d.weekStart + 7) % 7))) : t.key === "End" ? (t.preventDefault(), q(6 - (r(F.value).getDay() - d.weekStart + 7) % 7)) : (t.key === "Enter" || t.key === " ") && (t.preventDefault(), K(F.value));
+			t.key in n ? (t.preventDefault(), X(n[e(t)])) : t.key === "PageUp" ? (t.preventDefault(), Q(t.shiftKey ? -12 : -1, !0)) : t.key === "PageDown" ? (t.preventDefault(), Q(t.shiftKey ? 12 : 1, !0)) : t.key === "Home" ? (t.preventDefault(), X(-((r(R.value).getDay() - d.weekStart + 7) % 7))) : t.key === "End" ? (t.preventDefault(), X(6 - (r(R.value).getDay() - d.weekStart + 7) % 7)) : (t.key === "Enter" || t.key === " ") && (t.preventDefault(), Y(R.value));
 		}
-		function Y(e, t = !1) {
-			P.value = n(P.value, e), t && requestAnimationFrame(() => document.getElementById(`${k}-${F.value}`)?.focus());
+		function Q(e, t = !1) {
+			L.value = n(L.value, e), t && requestAnimationFrame(() => document.getElementById(`${M}-${R.value}`)?.focus());
 		}
-		return x(A, (e) => e && (P.value = n(r(e), 0))), x(P, (e) => {
-			let t = r(F.value);
-			(t.getFullYear() !== e.getFullYear() || t.getMonth() !== e.getMonth()) && (F.value = a(new Date(e.getFullYear(), e.getMonth(), Math.min(t.getDate(), 28))));
+		return x(N, (e) => e && (L.value = n(r(e), 0))), x(L, (e) => {
+			let t = r(R.value);
+			(t.getFullYear() !== e.getFullYear() || t.getMonth() !== e.getMonth()) && (R.value = a(new Date(e.getFullYear(), e.getMonth(), Math.min(t.getDate(), 28))));
 		}, { immediate: !0 }), (e, t) => (m(), c("div", {
 			class: "bless-calendar",
 			role: "group",
-			"aria-label": N.value ? R.value : void 0
+			"aria-label": I.value ? V.value : void 0
 		}, [l("div", C, [
 			l("button", {
 				type: "button",
 				class: "bless-calendar__nav",
-				"aria-label": "Previous month",
-				onClick: t[0] ||= (e) => Y(-1)
-			}, [...t[3] ||= [l("span", { "aria-hidden": "true" }, "‹", -1)]]),
-			l("span", w, _(N.value ? R.value : ""), 1),
+				"aria-label": A.value.prev,
+				onClick: t[0] ||= (e) => Q(-1)
+			}, [...t[3] ||= [l("span", { "aria-hidden": "true" }, "‹", -1)]], 8, w),
+			l("span", T, _(I.value ? V.value : ""), 1),
 			l("button", {
 				type: "button",
 				class: "bless-calendar__nav",
-				"aria-label": "Next month",
-				onClick: t[1] ||= (e) => Y(1)
-			}, [...t[4] ||= [l("span", { "aria-hidden": "true" }, "›", -1)]])
-		]), N.value ? (m(), c("div", {
+				"aria-label": A.value.next,
+				onClick: t[1] ||= (e) => Q(1)
+			}, [...t[4] ||= [l("span", { "aria-hidden": "true" }, "›", -1)]], 8, E)
+		]), I.value ? (m(), c("div", {
 			key: 1,
 			class: "bless-calendar__grid",
 			role: "grid",
-			onKeydown: J
-		}, [l("div", E, [(m(!0), c(o, null, g(B.value, (e) => (m(), c("span", {
+			onKeydown: Z
+		}, [l("div", O, [(m(!0), c(o, null, g(U.value, (e) => (m(), c("span", {
 			key: e,
 			role: "columnheader",
 			class: "bless-calendar__dow"
@@ -122,29 +127,29 @@ var S = ["aria-label"], C = { class: "bless-calendar__head" }, w = {
 			key: e,
 			role: "row",
 			class: "bless-calendar__row"
-		}, [(m(!0), c(o, null, g(V.value.slice((e - 1) * 7, e * 7), (e) => (m(), c("button", {
+		}, [(m(!0), c(o, null, g(W.value.slice((e - 1) * 7, e * 7), (e) => (m(), c("button", {
 			key: e.iso,
-			id: `${v(k)}-${e.iso}`,
+			id: `${v(M)}-${e.iso}`,
 			type: "button",
 			role: "gridcell",
 			class: f(["bless-calendar__day", {
 				"bless-calendar__day--outside": e.outside,
-				"bless-calendar__day--today": e.iso === M.value,
-				"bless-calendar__day--selected": W(e.iso),
-				"bless-calendar__day--in-range": G(e.iso),
-				"bless-calendar__day--start": U.value?.[0] === e.iso,
-				"bless-calendar__day--end": U.value?.[1] === e.iso
+				"bless-calendar__day--today": e.iso === F.value,
+				"bless-calendar__day--selected": q(e.iso),
+				"bless-calendar__day--in-range": J(e.iso),
+				"bless-calendar__day--start": K.value?.[0] === e.iso,
+				"bless-calendar__day--end": K.value?.[1] === e.iso
 			}]),
-			tabindex: e.iso === F.value ? 0 : -1,
-			"aria-selected": W(e.iso) || void 0,
-			"aria-disabled": H(e.iso) || void 0,
-			"aria-label": z.value.format(e.date),
-			onClick: (t) => K(e.iso),
-			onMouseenter: (t) => I.value = e.iso,
-			onMouseleave: t[2] ||= (e) => I.value = void 0,
-			onFocus: (t) => F.value = e.iso
-		}, _(e.date.getDate()), 43, D))), 128))])), 64))], 32)) : (m(), c("div", T))], 8, S));
+			tabindex: e.iso === R.value ? 0 : -1,
+			"aria-selected": q(e.iso) || void 0,
+			"aria-disabled": G(e.iso) || void 0,
+			"aria-label": H.value.format(e.date),
+			onClick: (t) => Y(e.iso),
+			onMouseenter: (t) => z.value = e.iso,
+			onMouseleave: t[2] ||= (e) => z.value = void 0,
+			onFocus: (t) => R.value = e.iso
+		}, _(e.date.getDate()), 43, k))), 128))])), 64))], 32)) : (m(), c("div", D))], 8, S));
 	}
 });
 //#endregion
-export { O as default };
+export { A as default };

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

@@ -12,6 +12,8 @@ type __VLS_Props = {
     nextLabel?: string;
     /** the autoplay button's name; its pressed state says whether it's paused */
     pauseLabel?: string;
+    /** accessible name of the slide dots */
+    dotsLabel?: string;
 };
 declare function go(i: number, smooth?: boolean): void;
 type __VLS_ModelProps = {
@@ -41,6 +43,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     dots: boolean;
     arrows: boolean;
     pauseLabel: string;
+    dotsLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/BlessCarousel.vue_vue_type_script_setup_true_lang.js

@@ -2,12 +2,7 @@ import { reducedMotion as e, scrollBehavior as t } from "../composables/useMedia
 import { logicalKey as n } from "../composables/rtl.js";
 import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, useModel as y, watch as b } from "vue";
 //#region src/components/BlessCarousel.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-label"], S = ["aria-label", "aria-disabled"], C = ["aria-label", "aria-disabled"], w = {
-	key: 1,
-	class: "bless-carousel__dots",
-	role: "group",
-	"aria-label": "Slides"
-}, T = [
+var x = ["aria-label"], S = ["aria-label", "aria-disabled"], C = ["aria-label", "aria-disabled"], w = ["aria-label"], T = [
 	"aria-current",
 	"aria-label",
 	"onClick"
@@ -33,7 +28,8 @@ var x = ["aria-label"], S = ["aria-label", "aria-disabled"], C = ["aria-label",
 		label: { default: "Carousel" },
 		prevLabel: { default: "Previous slide" },
 		nextLabel: { default: "Next slide" },
-		pauseLabel: { default: "Pause slides" }
+		pauseLabel: { default: "Pause slides" },
+		dotsLabel: { default: "Slides" }
 	}, {
 		modelValue: { default: 0 },
 		modelModifiers: {}
@@ -120,14 +116,19 @@ var x = ["aria-label"], S = ["aria-label", "aria-disabled"], C = ["aria-label",
 				"aria-disabled": !R.value || void 0,
 				onClick: t[1] ||= (e) => R.value && V(A.value + 1)
 			}, [...t[3] ||= [s("span", { "aria-hidden": "true" }, "›", -1)]], 8, C)], 64)) : a("", !0),
-			c.dots && I.value > 1 ? (m(), o("div", w, [(m(!0), o(r, null, g(I.value, (e) => (m(), o("button", {
+			c.dots && I.value > 1 ? (m(), o("div", {
+				key: 1,
+				class: "bless-carousel__dots",
+				role: "group",
+				"aria-label": c.dotsLabel
+			}, [(m(!0), o(r, null, g(I.value, (e) => (m(), o("button", {
 				key: e,
 				type: "button",
 				class: u(["bless-carousel__dot", { "bless-carousel__dot--active": e - 1 === A.value }]),
 				"aria-current": e - 1 === A.value || void 0,
 				"aria-label": `Slide ${e}`,
 				onClick: (t) => V(e - 1)
-			}, null, 10, T))), 128))])) : a("", !0),
+			}, null, 10, T))), 128))], 8, w)) : a("", !0),
 			c.autoplay > 0 ? (m(), o("button", {
 				key: 2,
 				type: "button",

package/dist/components/BlessCoachmark.css

@@ -0,0 +1 @@
+.bless-coachmark{display:inline-flex;position:relative}.bless-coachmark__dot{background:var(--bless-color-badge);cursor:pointer;border:0;width:12px;height:12px;padding:0;position:absolute}.bless-coachmark__dot:before{content:"";position:absolute;inset:-10px}.bless-coachmark__dot:after{content:"";border:2px solid var(--bless-color-badge);animation:bless-coachmark-pulse 1.8s var(--bless-ease-out) infinite;position:absolute;inset:-4px}.bless-coachmark__dot:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:3px}.bless-coachmark__dot--top-end{top:-4px;inset-inline-end:-4px}.bless-coachmark__dot--top-start{top:-4px;inset-inline-start:-4px}.bless-coachmark__dot--bottom-end{bottom:-4px;inset-inline-end:-4px}.bless-coachmark__dot--bottom-start{bottom:-4px;inset-inline-start:-4px}.bless-coachmark__bubble{z-index:2;gap:var(--bless-space-2);width:max-content;max-width:220px;padding:var(--bless-space-3);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-accent);box-shadow:var(--bless-shadow-plate);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid;position:absolute}.bless-coachmark__bubble--top-end,.bless-coachmark__bubble--top-start{top:calc(100% + 12px)}.bless-coachmark__bubble--bottom-end,.bless-coachmark__bubble--bottom-start{bottom:calc(100% + 12px)}.bless-coachmark__bubble--top-end,.bless-coachmark__bubble--bottom-end{inset-inline-end:0}.bless-coachmark__bubble--top-start,.bless-coachmark__bubble--bottom-start{inset-inline-start:0}@keyframes bless-coachmark-pulse{0%{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}@media (prefers-reduced-motion:reduce){.bless-coachmark__dot:after{opacity:.5;animation:none;transform:none}}

package/dist/components/BlessCoachmark.js

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

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

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    /** what is new, said in the bubble and to screen readers */
+    text: string;
+    /** remembers a dismissal under this key (localStorage), so it shows once; omit to show until `dismissed` is set */
+    id?: string;
+    /** which corner of the wrapped element the dot sits on */
+    placement?: "top-end" | "top-start" | "bottom-end" | "bottom-start";
+    /** using the wrapped element (a click inside it) counts as seen */
+    dismissOnUse?: boolean;
+    labels?: Partial<{
+        dot: (text: string) => string;
+        ok: string;
+    }>;
+};
+type __VLS_ModelProps = {
+    "dismissed"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dismiss: () => any;
+    "update:dismissed": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+    "onUpdate:dismissed"?: ((value: boolean) => any) | undefined;
+}>, {
+    placement: "top-end" | "top-start" | "bottom-end" | "bottom-start";
+    dismissOnUse: boolean;
+}, {}, {}, {}, 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;
+    };
+};