blessing-ui 0.2.0 → 0.3.0

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;
+    };
+};

package/dist/components/BlessCoachmark.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import e from "./BlessButton.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, useId as g, useModel as _, withCtx as v, withKeys as y, withModifiers as b } from "vue";
+//#region src/components/BlessCoachmark.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-label", "aria-expanded"], S = /*@__PURE__*/ c({
+	name: "BlessCoachmark",
+	__name: "BlessCoachmark",
+	props: /*@__PURE__*/ l({
+		text: {},
+		id: {},
+		placement: { default: "top-end" },
+		dismissOnUse: {
+			type: Boolean,
+			default: !0
+		},
+		labels: {}
+	}, {
+		dismissed: {
+			type: Boolean,
+			default: !1
+		},
+		dismissedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["dismiss"], ["update:dismissed"]),
+	setup(c, { emit: l }) {
+		let S = c, C = _(c, "dismissed"), w = l, T = n(() => ({
+			dot: (e) => `New: ${e}`,
+			ok: "Got it",
+			...S.labels
+		})), E = n(() => S.id ? `bless-coachmark:${S.id}` : null), D = p(!1), O = p(!1), k = `${g()}-bubble`;
+		d(() => {
+			try {
+				E.value && localStorage.getItem(E.value) && (C.value = !0);
+			} catch {}
+			O.value = !0;
+		});
+		function A() {
+			if (!C.value) {
+				C.value = !0, D.value = !1;
+				try {
+					E.value && localStorage.setItem(E.value, "1");
+				} catch {}
+				w("dismiss");
+			}
+		}
+		let j = (e) => {
+			S.dismissOnUse && !e.target.closest?.(".bless-coachmark__dot, .bless-coachmark__bubble") && A();
+		};
+		return (n, l) => (f(), i("span", {
+			class: "bless-coachmark",
+			onClickCapture: j,
+			onKeydown: l[1] ||= y((e) => D.value = !1, ["esc"])
+		}, [m(n.$slots, "default"), O.value && !C.value ? (f(), i(t, { key: 0 }, [a("button", {
+			type: "button",
+			class: u(["bless-coachmark__dot", `bless-coachmark__dot--${c.placement}`]),
+			"aria-label": T.value.dot(S.text),
+			"aria-expanded": D.value,
+			"aria-controls": k,
+			onClick: l[0] ||= b((e) => D.value = !D.value, ["stop"])
+		}, null, 10, x), D.value ? (f(), i("span", {
+			key: 0,
+			id: k,
+			class: u(["bless-coachmark__bubble", `bless-coachmark__bubble--${c.placement}`]),
+			role: "status"
+		}, [o(h(S.text) + " ", 1), s(e, {
+			size: "sm",
+			onClick: A
+		}, {
+			default: v(() => [o(h(T.value.ok), 1)]),
+			_: 1
+		})], 2)) : r("", !0)], 64)) : r("", !0)], 32));
+	}
+});
+//#endregion
+export { S as default };

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

@@ -18,6 +18,11 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     /** wrap long lines instead of scrolling sideways */
     wrap?: boolean;
     label?: string;
+    labels?: Partial<{
+        copy: string;
+        copied: string;
+        copiedLive: string;
+    }>;
 } & {
     active?: number;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -36,6 +41,11 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     /** wrap long lines instead of scrolling sideways */
     wrap?: boolean;
     label?: string;
+    labels?: Partial<{
+        copy: string;
+        copied: string;
+        copiedLive: string;
+    }>;
 } & {
     active?: number;
 }> & Readonly<{

package/dist/components/BlessCodeBlock.vue_vue_type_script_setup_true_lang.js

@@ -42,18 +42,24 @@ var y = { class: "bless-code" }, b = {
 			default: !0
 		},
 		wrap: { type: Boolean },
-		label: { default: "Code" }
+		label: { default: "Code" },
+		labels: {}
 	}, {
 		active: { default: 0 },
 		activeModifiers: {}
 	}),
 	emits: /*@__PURE__*/ s(["copy"], ["update:active"]),
 	setup(o, { emit: s }) {
-		let O = o, k = v(o, "active"), A = s, j = _(), M = t(() => (O.files?.length ? O.files[Math.min(k.value, O.files.length - 1)] : void 0) ?? {
+		let O = o, k = t(() => ({
+			copy: "Copy",
+			copied: "Copied",
+			copiedLive: "Copied to clipboard",
+			...O.labels
+		})), A = v(o, "active"), j = s, M = _(), N = t(() => (O.files?.length ? O.files[Math.min(A.value, O.files.length - 1)] : void 0) ?? {
 			name: O.filename ?? "",
 			code: O.code ?? "",
 			lang: O.lang
-		}), N = t(() => M.value.lang ?? O.lang), P = t(() => {
+		}), P = t(() => N.value.lang ?? O.lang), F = t(() => {
 			let e = /* @__PURE__ */ new Set();
 			if (Array.isArray(O.lines)) O.lines.forEach((t) => e.add(t));
 			else for (let t of (O.lines ?? "").split(",")) {
@@ -61,72 +67,72 @@ var y = { class: "bless-code" }, b = {
 				if (n) for (let t = n; t <= (r ?? n); t++) e.add(t);
 			}
 			return e;
-		}), F = t(() => M.value.code.replace(/\n$/, "").split("\n").map((e, t) => ({
+		}), I = t(() => N.value.code.replace(/\n$/, "").split("\n").map((e, t) => ({
 			n: t + 1,
 			text: e,
-			hl: P.value.has(t + 1)
-		}))), I = f();
-		function L(e) {
-			let t = O.files?.length ?? 0, n = e.key === "ArrowRight" ? k.value + 1 : e.key === "ArrowLeft" ? k.value - 1 : e.key === "Home" ? 0 : e.key === "End" ? t - 1 : null;
-			n != null && (e.preventDefault(), k.value = (n + t) % t, c(() => I.value?.querySelectorAll("[role=\"tab\"]")[k.value]?.focus()));
+			hl: F.value.has(t + 1)
+		}))), L = f();
+		function R(e) {
+			let t = O.files?.length ?? 0, n = e.key === "ArrowRight" ? A.value + 1 : e.key === "ArrowLeft" ? A.value - 1 : e.key === "Home" ? 0 : e.key === "End" ? t - 1 : null;
+			n != null && (e.preventDefault(), A.value = (n + t) % t, c(() => L.value?.querySelectorAll("[role=\"tab\"]")[A.value]?.focus()));
 		}
-		let R = f(!1), z;
-		async function B() {
-			let e = M.value.code;
+		let z = f(!1), B;
+		async function V() {
+			let e = N.value.code;
 			try {
 				await navigator.clipboard.writeText(e);
 			} catch {
 				let t = document.createElement("textarea");
 				t.value = e, t.style.position = "fixed", t.style.opacity = "0", document.body.append(t), t.select(), document.execCommand("copy"), t.remove();
 			}
-			A("copy", e), R.value = !0, clearTimeout(z), z = setTimeout(() => R.value = !1, 2e3);
+			j("copy", e), z.value = !0, clearTimeout(B), B = setTimeout(() => z.value = !1, 2e3);
 		}
-		return u(() => clearTimeout(z)), (t, s) => (d(), r("figure", y, [
-			o.files?.length || o.filename || N.value || o.copy ? (d(), r("figcaption", b, [
+		return u(() => clearTimeout(B)), (t, s) => (d(), r("figure", y, [
+			o.files?.length || o.filename || P.value || o.copy ? (d(), r("figcaption", b, [
 				o.files?.length ? (d(), r("div", {
 					key: 0,
 					ref_key: "tabs",
-					ref: I,
+					ref: L,
 					class: "bless-code__tabs",
 					role: "tablist",
 					"aria-label": o.label
 				}, [(d(!0), r(e, null, p(o.files, (e, t) => (d(), r("button", {
-					id: `${g(j)}-t${t}`,
+					id: `${g(M)}-t${t}`,
 					key: e.name,
 					type: "button",
 					role: "tab",
 					class: "bless-code__tab",
-					"aria-selected": t === k.value,
-					"aria-controls": `${g(j)}-p`,
-					tabindex: t === k.value ? 0 : -1,
-					onClick: (e) => k.value = t,
-					onKeydown: L
+					"aria-selected": t === A.value,
+					"aria-controls": `${g(M)}-p`,
+					tabindex: t === A.value ? 0 : -1,
+					onClick: (e) => A.value = t,
+					onKeydown: R
 				}, h(e.name), 41, S))), 128))], 8, x)) : o.filename ? (d(), r("span", C, h(o.filename), 1)) : n("", !0),
 				s[0] ||= i("span", { class: "bless-code__spacer" }, null, -1),
-				N.value ? (d(), r("span", w, h(N.value), 1)) : n("", !0),
+				P.value ? (d(), r("span", w, h(P.value), 1)) : n("", !0),
 				o.copy ? (d(), r("button", {
 					key: 3,
 					type: "button",
 					class: "bless-code__copy",
-					onClick: B
-				}, h(R.value ? "Copied" : "Copy"), 1)) : n("", !0)
+					onClick: V
+				}, h(z.value ? k.value.copied : k.value.copy), 1)) : n("", !0)
 			])) : n("", !0),
 			i("div", {
-				id: `${g(j)}-p`,
+				id: `${g(M)}-p`,
 				class: "bless-code__scroll",
 				tabindex: "0",
 				role: o.files?.length ? "tabpanel" : "region",
-				"aria-labelledby": o.files?.length ? `${g(j)}-t${k.value}` : void 0,
-				"aria-label": o.files?.length ? void 0 : M.value.name || o.label
+				"aria-labelledby": o.files?.length ? `${g(M)}-t${A.value}` : void 0,
+				"aria-label": o.files?.length ? void 0 : N.value.name || o.label
 			}, [m(t.$slots, "code", {
-				code: M.value.code,
-				lang: N.value,
-				lines: F.value
-			}, () => [i("pre", { class: l(["bless-code__pre", { "bless-code__pre--wrap": o.wrap }]) }, [i("code", null, [(d(!0), r(e, null, p(F.value, (e) => (d(), r("span", {
+				code: N.value.code,
+				lang: P.value,
+				lines: I.value
+			}, () => [i("pre", { class: l(["bless-code__pre", { "bless-code__pre--wrap": o.wrap }]) }, [i("code", null, [(d(!0), r(e, null, p(I.value, (e) => (d(), r("span", {
 				key: e.n,
 				class: l(["bless-code__line", { "bless-code__line--hl": e.hl }])
 			}, [o.lineNumbers ? (d(), r("span", E, h(e.n), 1)) : n("", !0), a(h(e.text) + "\n", 1)], 2))), 128))])], 2)])], 8, T),
-			i("span", D, h(R.value ? "Copied to clipboard" : ""), 1)
+			i("span", D, h(z.value ? k.value.copiedLive : ""), 1)
 		]));
 	}
 });

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

@@ -13,6 +13,8 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
         size?: "sm" | "md" | "lg";
         /** accessible name when there is no <label for> */
         label?: string;
+        /** name of a chip's remove button, from the option's label */
+        removeLabel?: (name: string) => string;
     } & {
         modelValue?: T | T[] | undefined;
     }) & {

package/dist/components/BlessCombobox.vue_vue_type_script_setup_true_lang.js

@@ -38,7 +38,8 @@ var O = ["aria-label", "onClick"], ee = [
 		invalid: { type: Boolean },
 		emptyText: { default: "No results." },
 		size: { default: "md" },
-		label: {}
+		label: {},
+		removeLabel: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
@@ -105,7 +106,7 @@ var O = ["aria-label", "onClick"], ee = [
 				default: T(() => [u(b(q(t)) + " ", 1), l("button", {
 					type: "button",
 					class: "bless-combobox__chip-x",
-					"aria-label": `Remove ${q(t)}`,
+					"aria-label": (d.removeLabel ?? ((e) => `Remove ${e}`))(q(t)),
 					tabindex: "-1",
 					onClick: D((e) => $(t), ["stop"])
 				}, " × ", 8, O)]),

package/dist/components/BlessCommand.css

@@ -1 +1 @@
-.bless-command .bless-modal__body{padding:0}.bless-command .bless-modal__close{display:none}.bless-command .bless-modal__panel{--_w:560px}.bless-command--inline{border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg)}.bless-command__box{border-radius:var(--bless-radius);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-command__search{border-radius:var(--bless-radius-plate);align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-3) var(--bless-space-4);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-command__icon{font-size:var(--bless-text-lg);color:var(--bless-color-text-muted);transform:skewX(var(--bless-skew-counter)) rotate(-45deg)}.bless-command__input{min-width:0;font:inherit;font-size:var(--bless-text-md);color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-command__input::placeholder{color:var(--bless-color-text-muted)}.bless-command__list{max-height:320px;padding:var(--bless-space-2) 0;scrollbar-width:thin;overflow-y:auto}.bless-command__empty:empty{display:none}.bless-command__empty{padding:var(--bless-space-6);text-align:center;font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);margin:0}.bless-command__group{padding:var(--bless-space-2) var(--bless-space-4) var(--bless-space-1);font-size:var(--bless-text-2xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);text-transform:uppercase;color:var(--bless-color-text-muted)}.bless-command__item{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-4);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-command__item--active{background:var(--bless-color-surface)}.bless-command__item[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-command__mark{text-align:center;flex:none;width:1.2em}.bless-command__label{flex:1}.bless-command__footer{gap:var(--bless-space-4);padding:var(--bless-space-2) var(--bless-space-4);border-top:var(--bless-border-width) solid var(--bless-color-border);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted);display:flex}.bless-command__search{transform:skewX(var(--bless-skew))}.bless-command__search>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}
+.bless-command .bless-modal__body{padding:0}.bless-command .bless-modal__close{display:none}.bless-command .bless-modal__panel{--_w:560px}.bless-command--inline{border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg)}.bless-command__box{border-radius:var(--bless-radius);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-command__search{border-radius:var(--bless-radius-plate);align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-3) var(--bless-space-4);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-command__icon{font-size:var(--bless-text-lg);color:var(--bless-color-text-muted);transform:skewX(var(--bless-skew-counter)) rotate(-45deg)}.bless-command__input{min-width:0;font:inherit;font-size:var(--bless-text-md);color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-command__input::placeholder{color:var(--bless-color-text-muted)}.bless-command__list{max-height:320px;padding:var(--bless-space-2) 0;scrollbar-width:thin;overflow-y:auto}.bless-command__empty:empty{display:none}.bless-command__empty{padding:var(--bless-space-6);text-align:center;font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);margin:0}.bless-command__scope{padding:0 var(--bless-space-2);background:var(--bless-color-accent);color:var(--bless-color-on-accent);font:inherit;font-size:var(--bless-text-xs);cursor:pointer;border:0;flex:none}.bless-command__scope:focus-visible{outline:2px solid var(--bless-color-text);outline-offset:2px}.bless-command__hint{padding:var(--bless-space-1) var(--bless-space-3);color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);margin:0}.bless-command__group{padding:var(--bless-space-2) var(--bless-space-4) var(--bless-space-1);font-size:var(--bless-text-2xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);text-transform:uppercase;color:var(--bless-color-text-muted)}.bless-command__item{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-4);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-command__item--active{background:var(--bless-color-surface)}.bless-command__item[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-command__mark{text-align:center;flex:none;width:1.2em}.bless-command__label{flex:1}.bless-command__footer{gap:var(--bless-space-4);padding:var(--bless-space-2) var(--bless-space-4);border-top:var(--bless-border-width) solid var(--bless-color-border);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted);display:flex}.bless-command__search{transform:skewX(var(--bless-skew))}.bless-command__search>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}