blessing-ui 0.1.0 → 0.2.0

package/dist/components/BlessLoupe.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,93 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeStyle as a, openBlock as o, ref as s } from "vue";
+//#region src/components/BlessLoupe.vue?vue&type=script&setup=true&lang.ts
+var c = ["src", "alt"], l = /*@__PURE__*/ i({
+	name: "BlessLoupe",
+	__name: "BlessLoupe",
+	props: {
+		src: {},
+		alt: {},
+		zoomSrc: {},
+		zoom: { default: 2.5 },
+		size: { default: 140 }
+	},
+	setup(i) {
+		let l = i, u = s(), d = s(null), f = s({
+			w: 1,
+			h: 1
+		}), p = s(!1), m = s({
+			x: .5,
+			y: .5
+		});
+		function h(e, t) {
+			let n = u.value.getBoundingClientRect();
+			f.value = {
+				w: n.width,
+				h: n.height
+			}, d.value = {
+				x: Math.min(n.width, Math.max(0, e - n.left)),
+				y: Math.min(n.height, Math.max(0, t - n.top))
+			};
+		}
+		function g(e) {
+			p.value = e.pointerType === "touch" || e.pointerType === "pen", h(e.clientX, e.clientY);
+		}
+		let _ = () => d.value = null;
+		function v() {
+			let e = u.value.getBoundingClientRect();
+			h(e.left + m.value.x * e.width, e.top + m.value.y * e.height);
+		}
+		function y(e) {
+			let t = e.shiftKey ? .2 : .05, n = {
+				ArrowLeft: [-t, 0],
+				ArrowRight: [t, 0],
+				ArrowUp: [0, -t],
+				ArrowDown: [0, t]
+			};
+			if (e.key === "Escape") return _();
+			n[e.key] && (e.preventDefault(), p.value = !1, m.value = {
+				x: Math.min(1, Math.max(0, m.value.x + n[e.key][0])),
+				y: Math.min(1, Math.max(0, m.value.y + n[e.key][1]))
+			}, v());
+		}
+		let b = e(() => {
+			let e = d.value;
+			if (!e) return;
+			let { zoom: t, size: n } = l, r = p.value ? n / 2 + 28 : 0;
+			return {
+				width: `${n}px`,
+				height: `${n}px`,
+				left: `${e.x - n / 2}px`,
+				top: `${e.y - n / 2 - r}px`,
+				backgroundImage: `url(${l.zoomSrc ?? l.src})`,
+				backgroundSize: `${f.value.w * t}px ${f.value.h * t}px`,
+				backgroundPosition: `${n / 2 - e.x * t}px ${n / 2 - e.y * t}px`
+			};
+		});
+		return (e, s) => (o(), n("div", {
+			ref_key: "root",
+			ref: u,
+			class: "bless-loupe",
+			tabindex: "0",
+			onPointerenter: g,
+			onPointermove: g,
+			onPointerleave: _,
+			onPointercancel: _,
+			onPointerup: s[0] ||= (e) => p.value && _(),
+			onFocus: v,
+			onBlur: _,
+			onKeydown: y
+		}, [r("img", {
+			src: i.src,
+			alt: i.alt,
+			class: "bless-loupe__img",
+			draggable: "false"
+		}, null, 8, c), b.value ? (o(), n("span", {
+			key: 0,
+			class: "bless-loupe__lens",
+			style: a(b.value),
+			"aria-hidden": "true"
+		}, null, 4)) : t("", !0)], 544));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BlessMarquee.css

@@ -0,0 +1 @@
+.bless-marquee{align-items:center;gap:var(--bless-space-2);--bless-marquee-dir:1;min-width:0;max-width:100%;font-family:var(--bless-font-sans);color:var(--bless-color-text);display:flex;position:relative}[dir=rtl] .bless-marquee{--bless-marquee-dir:-1}.bless-marquee__viewport{flex:1;min-width:0;overflow:hidden}.bless-marquee__track{width:max-content;animation:bless-marquee var(--bless-marquee-time) linear infinite;display:flex}.bless-marquee--reverse .bless-marquee__track{animation-direction:reverse}.bless-marquee__run{align-items:center;gap:var(--bless-space-6);flex:none;padding-inline-end:var(--bless-space-6);display:flex}.bless-marquee--paused .bless-marquee__track,.bless-marquee--hover:hover .bless-marquee__track,.bless-marquee--hover:focus-within .bless-marquee__track{animation-play-state:paused}.bless-marquee--still .bless-marquee__track{flex-wrap:wrap;width:auto;animation:none}.bless-marquee--still .bless-marquee__run:last-child{display:none}.bless-marquee__btn{padding:var(--bless-space-1) var(--bless-space-2);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:inherit;font:inherit;font-size:var(--bless-text-xs);cursor:pointer;flex:none}.bless-marquee__btn:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}@keyframes bless-marquee{to{transform:translateX(calc(var(--bless-marquee-dir) * -50%))}}@media (prefers-reduced-motion:reduce){.bless-marquee__track{animation:none}}

package/dist/components/BlessMarquee.js

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

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

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    /** px per second */
+    speed?: number;
+    /** run the other way (toward the start of the line) */
+    reverse?: boolean;
+    /** stop while the pointer is over it or focus is inside */
+    pauseOnHover?: boolean;
+    /** show the Pause button (needed when it moves for more than five seconds, WCAG 2.2.2) */
+    controls?: boolean;
+    label?: string;
+};
+type __VLS_ModelProps = {
+    /** true while paused by the button */
+    "paused"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:paused": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:paused"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    controls: boolean;
+    speed: number;
+    pauseOnHover: 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/BlessMarquee.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, normalizeStyle as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useModel as m } from "vue";
+//#region src/components/BlessMarquee.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = { class: "bless-marquee__viewport" }, _ = { class: "bless-marquee__track" }, v = {
+	class: "bless-marquee__run",
+	"aria-hidden": "true",
+	inert: ""
+}, y = ["aria-pressed"], b = /*@__PURE__*/ i({
+	name: "BlessMarquee",
+	__name: "BlessMarquee",
+	props: /*@__PURE__*/ a({
+		speed: { default: 40 },
+		reverse: { type: Boolean },
+		pauseOnHover: {
+			type: Boolean,
+			default: !0
+		},
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Scrolling items" }
+	}, {
+		paused: {
+			type: Boolean,
+			default: !1
+		},
+		pausedModifiers: {}
+	}),
+	emits: ["update:paused"],
+	setup(i) {
+		let a = i, b = m(i, "paused"), x = d(), S = d(!1), C = d(20), w;
+		function T() {
+			let e = x.value?.scrollWidth ?? 0;
+			C.value = e && a.speed > 0 ? e / a.speed : 20;
+		}
+		return l(() => {
+			S.value = e(), T(), typeof ResizeObserver < "u" && x.value && (w = new ResizeObserver(T), w.observe(x.value));
+		}), c(() => w?.disconnect()), (e, a) => (u(), n("div", {
+			class: o(["bless-marquee", {
+				"bless-marquee--paused": b.value,
+				"bless-marquee--hover": i.pauseOnHover,
+				"bless-marquee--still": S.value,
+				"bless-marquee--reverse": i.reverse
+			}]),
+			role: "group",
+			"aria-roledescription": "marquee",
+			"aria-label": i.label,
+			style: s({ "--bless-marquee-time": `${C.value}s` })
+		}, [r("div", g, [r("div", _, [r("div", {
+			ref_key: "run",
+			ref: x,
+			class: "bless-marquee__run"
+		}, [f(e.$slots, "default")], 512), r("div", v, [f(e.$slots, "default")])])]), i.controls && !S.value ? (u(), n("button", {
+			key: 0,
+			type: "button",
+			class: "bless-marquee__btn",
+			"aria-pressed": b.value,
+			onClick: a[0] ||= (e) => b.value = !b.value
+		}, p(b.value ? "Play" : "Pause"), 9, y)) : t("", !0)], 14, h));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessMasonry.css

@@ -0,0 +1 @@
+.bless-masonry{gap:var(--bless-masonry-gap,16px);min-width:0;display:grid;position:relative}.bless-masonry--ready{display:block}.bless-masonry--ready>.bless-masonry__cell{position:absolute;inset-block-start:0;inset-inline-start:0}.bless-masonry--animate>.bless-masonry__cell{transition:transform var(--bless-duration-slow) var(--bless-ease-out)}[dir=rtl] .bless-masonry--ready>.bless-masonry__cell{inset-inline:auto 0}@media (prefers-reduced-motion:reduce){.bless-masonry--animate>.bless-masonry__cell{transition:none}}

package/dist/components/BlessMasonry.js

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

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

@@ -0,0 +1,33 @@
+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<{
+        items: T[];
+        rowKey?: (item: T, index: number) => string | number;
+        /** a fixed number of columns; leave out to fit as many as `minWidth` allows */
+        columns?: number;
+        /** narrowest a column may get, in px, when `columns` is not set */
+        minWidth?: number;
+        /** space between cards, in px */
+        gap?: number;
+        label?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            item: T;
+            index: number;
+        }) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessMasonry.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,79 @@
+import { Fragment as e, createElementBlock as t, createTextVNode as n, defineComponent as r, nextTick as i, normalizeClass as a, normalizeStyle as o, onBeforeUnmount as s, onMounted as c, openBlock as l, ref as u, renderList as d, renderSlot as f, toDisplayString as p, watch as m } from "vue";
+//#region src/components/BlessMasonry.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = /*@__PURE__*/ r({
+	name: "BlessMasonry",
+	__name: "BlessMasonry",
+	props: {
+		items: {},
+		rowKey: {},
+		columns: {},
+		minWidth: { default: 240 },
+		gap: { default: 16 },
+		label: {}
+	},
+	setup(r) {
+		let g = r, _ = u(), v = u([]), y = u(!1), b = u(0), x = u([]), S = u(0), C = u(!1), w = u(!1), T = (e, t) => {
+			e && (v.value[t] = e);
+		};
+		function E() {
+			let e = _.value;
+			if (!e) return;
+			let t = e.clientWidth, n = g.columns ?? Math.max(1, Math.floor((t + g.gap) / (g.minWidth + g.gap)));
+			b.value = (t - g.gap * (n - 1)) / n, i(D);
+		}
+		function D() {
+			let e = _.value;
+			if (!e || !b.value) return;
+			C.value = getComputedStyle(e).direction === "rtl";
+			let t = e.clientWidth, n = Math.max(1, Math.round((t + g.gap) / (b.value + g.gap))), r = Array(n).fill(0);
+			x.value = g.items.map((e, t) => {
+				let n = r.indexOf(Math.min(...r)), i = {
+					left: n * (b.value + g.gap),
+					top: r[n]
+				};
+				return r[n] = i.top + (v.value[t]?.offsetHeight ?? 0) + g.gap, i;
+			}), S.value = Math.max(0, Math.max(...r) - g.gap), y.value = !0, requestAnimationFrame(() => w.value = !0);
+		}
+		let O, k = /* @__PURE__ */ new Set();
+		function A() {
+			if (O) for (let e of v.value) e && !k.has(e) && (O.observe(e), k.add(e));
+		}
+		return c(() => {
+			typeof ResizeObserver < "u" && (O = new ResizeObserver((e) => {
+				e.some((e) => e.target === _.value) ? E() : D();
+			}), _.value && O.observe(_.value)), E(), i(A);
+		}), s(() => O?.disconnect()), m(() => [
+			g.items,
+			g.columns,
+			g.minWidth,
+			g.gap
+		], () => i(() => {
+			v.value.length = g.items.length, k = new Set([...k].filter((e) => e.isConnected)), A(), E();
+		})), (i, s) => (l(), t("div", {
+			ref_key: "root",
+			ref: _,
+			class: a(["bless-masonry", {
+				"bless-masonry--ready": y.value,
+				"bless-masonry--animate": w.value
+			}]),
+			role: "list",
+			"aria-label": r.label,
+			style: o(y.value ? { height: `${S.value}px` } : { "--bless-masonry-gap": `${r.gap}px` })
+		}, [(l(!0), t(e, null, d(r.items, (e, a) => (l(), t("div", {
+			key: r.rowKey ? r.rowKey(e, a) : a,
+			ref_for: !0,
+			ref: (e) => T(e, a),
+			class: "bless-masonry__cell",
+			role: "listitem",
+			style: o(b.value ? {
+				width: `${b.value}px`,
+				...y.value && { transform: `translate(${(C.value ? -1 : 1) * (x.value[a]?.left ?? 0)}px, ${x.value[a]?.top ?? 0}px)` }
+			} : void 0)
+		}, [f(i.$slots, "default", {
+			item: e,
+			index: a
+		}, () => [n(p(e), 1)])], 4))), 128))], 14, h));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BlessMention.css

@@ -0,0 +1 @@
+.bless-mention{position:relative}.bless-mention__panel{inset:unset;border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:var(--bless-color-text);box-shadow:var(--bless-shadow-plate);margin:0;padding:0;position:fixed}.bless-mention__list{max-height:240px;padding:var(--bless-space-1) 0;scrollbar-width:thin;overflow-y:auto}.bless-mention__option{align-items:baseline;gap:var(--bless-space-2);padding:var(--bless-space-2) var(--bless-space-3);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-mention__option small{color:var(--bless-color-text-muted);font-size:var(--bless-text-xs)}.bless-mention__option--active{background:var(--bless-color-surface)}

package/dist/components/BlessMention.js

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

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

@@ -0,0 +1,32 @@
+export interface BlessMentionOption {
+    /** inserted after the trigger: `@mika` */
+    value: string;
+    label: string;
+    /** muted second line, e.g. a role or an email */
+    hint?: string;
+}
+type __VLS_Props = {
+    /** one list for every trigger, or `{ "@": [...], "#": [...] }` to give each its own */
+    options: BlessMentionOption[] | Record<string, BlessMentionOption[]>;
+    /** characters that open the list when they start a word; ignored when `options` is a record */
+    triggers?: string[];
+    limit?: number;
+    label?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (option: BlessMentionOption, trigger: string) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((option: BlessMentionOption, trigger: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    label: string;
+    triggers: string[];
+    limit: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessMention.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,116 @@
+import e from "./BlessTextarea.js";
+import { useFloating as t } from "../composables/useFloating.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, nextTick as d, normalizeClass as f, normalizeStyle 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, withKeys as S, withModifiers as C } from "vue";
+//#region src/components/BlessMention.vue?vue&type=script&setup=true&lang.ts
+var w = ["id", "aria-label"], T = [
+	"id",
+	"aria-selected",
+	"onMousedown",
+	"onMousemove"
+], E = { key: 0 }, D = /*@__PURE__*/ c({
+	name: "BlessMention",
+	inheritAttrs: !1,
+	__name: "BlessMention",
+	props: /*@__PURE__*/ l({
+		options: {},
+		triggers: { default: () => ["@"] },
+		limit: { default: 8 },
+		label: { default: "Suggestions" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["select"], ["update:modelValue"]),
+	setup(c, { emit: l }) {
+		let D = c, O = b(c, "modelValue"), k = l, A = y(), j = h(), M = h(), N = h(!1), P = h(0), F = h({
+			trigger: "",
+			query: "",
+			start: 0
+		}), { x: I, y: L } = t(j, M, N, {
+			placement: "bottom-start",
+			offset: 4
+		}), R = r(() => Array.isArray(D.options) ? D.triggers : Object.keys(D.options)), z = r(() => {
+			let e = Array.isArray(D.options) ? D.options : D.options[F.value.trigger] ?? [], t = F.value.query.toLowerCase();
+			return e.filter((e) => !t || e.label.toLowerCase().includes(t) || e.value.toLowerCase().includes(t)).slice(0, D.limit);
+		}), B = () => j.value?.querySelector("textarea") ?? null;
+		function V() {
+			let e = B();
+			if (!e || e.selectionStart !== e.selectionEnd) return H();
+			let t = e.selectionStart, n = e.value.slice(0, t), r = /(^|\s)(\S)([^\s]*)$/.exec(n);
+			if (!r || !R.value.includes(r[2])) return H();
+			let i = {
+				trigger: r[2],
+				query: r[3],
+				start: t - r[2].length - r[3].length
+			};
+			(i.trigger !== F.value.trigger || i.query !== F.value.query) && (P.value = 0), F.value = i, N.value = z.value.length > 0;
+		}
+		let H = () => N.value = !1;
+		function U(e) {
+			let t = B();
+			if (!t) return;
+			let { trigger: n, start: r } = F.value, i = `${n}${e.value} `, a = t.selectionStart;
+			O.value = t.value.slice(0, r) + i + t.value.slice(a), k("select", e, n), H(), d(() => {
+				t.focus(), t.setSelectionRange(r + i.length, r + i.length);
+			});
+		}
+		function W(e) {
+			if (!N.value || e.isComposing) return;
+			let t = z.value.length;
+			e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), P.value = (P.value + (e.key === "ArrowDown" ? 1 : t - 1)) % t) : e.key === "Enter" || e.key === "Tab" ? (e.preventDefault(), U(z.value[P.value])) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), H());
+		}
+		let G = () => d(V);
+		return x(N, (e) => d(() => {
+			let t = M.value;
+			t && typeof t.showPopover == "function" && (e && !t.matches(":popover-open") ? t.showPopover() : !e && t.matches(":popover-open") && t.hidePopover());
+		})), (t, r) => (m(), a("div", {
+			ref_key: "root",
+			ref: j,
+			class: "bless-mention",
+			onInput: G,
+			onKeydown: W,
+			onKeyup: [S(G, ["left"]), S(G, ["right"])],
+			onClick: G,
+			onFocusout: H
+		}, [s(e, u(t.$attrs, {
+			modelValue: O.value,
+			"onUpdate:modelValue": r[0] ||= (e) => O.value = e,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-haspopup": "listbox",
+			"aria-expanded": N.value,
+			"aria-controls": `${v(A)}-list`,
+			"aria-activedescendant": N.value ? `${v(A)}-opt-${P.value}` : void 0
+		}), null, 16, [
+			"modelValue",
+			"aria-expanded",
+			"aria-controls",
+			"aria-activedescendant"
+		]), o("div", {
+			ref_key: "panel",
+			ref: M,
+			popover: "manual",
+			class: "bless-mention__panel",
+			style: p({
+				left: `${v(I)}px`,
+				top: `${v(L)}px`,
+				minWidth: j.value ? `${Math.min(j.value.offsetWidth, 280)}px` : void 0
+			})
+		}, [o("div", {
+			id: `${v(A)}-list`,
+			role: "listbox",
+			"aria-label": c.label,
+			class: "bless-mention__list"
+		}, [(m(!0), a(n, null, g(N.value ? z.value : [], (e, t) => (m(), a("div", {
+			id: `${v(A)}-opt-${t}`,
+			key: e.value,
+			role: "option",
+			class: f(["bless-mention__option", { "bless-mention__option--active": t === P.value }]),
+			"aria-selected": t === P.value,
+			onMousedown: C((t) => U(e), ["prevent"]),
+			onMousemove: (e) => P.value = t
+		}, [o("span", null, _(e.label), 1), e.hint ? (m(), a("small", E, _(e.hint), 1)) : i("", !0)], 42, T))), 128))], 8, w)], 4)], 544));
+	}
+});
+//#endregion
+export { D as default };

package/dist/components/BlessRadialMenu.css

@@ -0,0 +1 @@
+.bless-radial__area{-webkit-touch-callout:none}.bless-radial{inset:unset;font-family:var(--bless-font-sans);color:var(--bless-color-text);touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;margin:0;padding:0;position:fixed;overflow:visible}.bless-radial::backdrop{background:0 0}.bless-radial__core{max-width:64px;padding:var(--bless-space-1);text-align:center;font-size:var(--bless-text-xs);pointer-events:none;line-height:1.2;position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.bless-radial__item{border:var(--bless-border-width) solid var(--bless-color-text);background:var(--bless-color-bg);width:44px;height:44px;color:inherit;font:inherit;font-size:var(--bless-text-md);box-shadow:var(--bless-shadow-plate);cursor:pointer;place-items:center;padding:0;display:grid;position:absolute;translate:-50% -50%}.bless-radial__item--on{background:var(--bless-color-accent);border-color:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-radial__item[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-radial__item:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}@media (prefers-reduced-motion:no-preference){.bless-radial:popover-open .bless-radial__item{animation:bless-radial-in var(--bless-duration-base) var(--bless-ease-out)}}@keyframes bless-radial-in{0%{opacity:0;scale:.6}}

package/dist/components/BlessRadialMenu.js

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

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

@@ -0,0 +1,45 @@
+export interface BlessRadialItem {
+    id: string | number;
+    label: string;
+    /** a character or emoji for the button; `#item` replaces it */
+    icon?: string;
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends BlessRadialItem = BlessRadialItem>(__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<({
+        items: T[];
+        /** distance from the centre to the buttons, in px */
+        radius?: number;
+        /** how long a touch has to stay down to open it, in ms */
+        holdMs?: number;
+        disabled?: boolean;
+        label?: string;
+    } & {
+        open?: boolean;
+    }) & {
+        onSelect?: ((item: T) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    } & {
+        item?: (props: {
+            item: T;
+            index: number;
+        }) => any;
+    };
+    emit: ((evt: "select", item: T) => void) & ((event: "update:open", value: boolean) => 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];
+}) & {};