blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessOrderList.vue_vue_type_script_setup_true_lang.js

@@ -1,114 +1,120 @@
-import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, useId as p, useModel as m, withModifiers as h } from "vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, ref as u, renderList as d, renderSlot as f, toDisplayString as p, useId as m, useModel as h, withModifiers as g } from "vue";
 //#region src/components/BlessOrderList.vue?vue&type=script&setup=true&lang.ts
-var g = ["aria-label"], _ = [
+var _ = ["aria-label"], v = [
 	"onDragstart",
 	"onDragover",
 	"onDragleave",
 	"onDrop",
 	"onKeydown"
-], v = { class: "bless-order__body" }, y = {
+], y = { class: "bless-order__body" }, b = {
 	key: 0,
 	class: "bless-order__btns"
-}, b = [
+}, x = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], x = [
+], S = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], S = {
+], C = {
 	class: "bless-order__live",
 	"aria-live": "polite"
-}, C = /*@__PURE__*/ a({
+}, w = /*@__PURE__*/ o({
 	name: "BlessOrderList",
 	__name: "BlessOrderList",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ s({
 		rowKey: {},
 		label: { default: "Reorder" },
 		buttons: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		labels: {}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ o(["move"], ["update:modelValue"]),
-	setup(a, { emit: o }) {
-		let C = a, w = m(a, "modelValue"), T = o, E = l(null), D = l(null), O = l("");
-		function k(e, t) {
-			if (e === t || t < 0 || t >= w.value.length) return;
-			let n = w.value.slice(), [r] = n.splice(e, 1);
-			n.splice(t, 0, r), w.value = n, T("move", e, t), O.value = `Moved to position ${t + 1} of ${n.length}`;
+	emits: /*@__PURE__*/ s(["move"], ["update:modelValue"]),
+	setup(o, { emit: s }) {
+		let w = o, T = t(() => ({
+			up: (e) => `Move item ${e} up`,
+			down: (e) => `Move item ${e} down`,
+			moved: (e, t) => `Moved to position ${e} of ${t}`,
+			...w.labels
+		})), E = h(o, "modelValue"), D = s, O = u(null), k = u(null), A = u("");
+		function j(e, t) {
+			if (e === t || t < 0 || t >= E.value.length) return;
+			let n = E.value.slice(), [r] = n.splice(e, 1);
+			n.splice(t, 0, r), E.value = n, D("move", e, t), A.value = T.value.moved(t + 1, n.length);
 		}
-		function A(e) {
-			E.value != null && k(E.value, e), E.value = D.value = null;
+		function M(e) {
+			O.value != null && j(O.value, e), O.value = k.value = null;
 		}
-		function j(e, t) {
-			t.altKey && (t.key === "ArrowUp" && (t.preventDefault(), k(e, e - 1), P(e - 1)), t.key === "ArrowDown" && (t.preventDefault(), k(e, e + 1), P(e + 1)));
+		function N(e, t) {
+			t.altKey && (t.key === "ArrowUp" && (t.preventDefault(), j(e, e - 1), I(e - 1)), t.key === "ArrowDown" && (t.preventDefault(), j(e, e + 1), I(e + 1)));
 		}
-		let M = l(), N = `${p()}-hint`, P = (e) => requestAnimationFrame(() => M.value?.querySelectorAll(".bless-order__item")[e]?.focus());
-		function F(e, t) {
-			k(e, e + t), requestAnimationFrame(() => {
-				let n = M.value?.querySelectorAll(".bless-order__item")[e + t], r = n?.querySelector(t < 0 ? ".bless-order__up" : ".bless-order__down");
+		let P = u(), F = `${m()}-hint`, I = (e) => requestAnimationFrame(() => P.value?.querySelectorAll(".bless-order__item")[e]?.focus());
+		function L(e, t) {
+			j(e, e + t), requestAnimationFrame(() => {
+				let n = P.value?.querySelectorAll(".bless-order__item")[e + t], r = n?.querySelector(t < 0 ? ".bless-order__up" : ".bless-order__down");
 				(r && !r.disabled ? r : n)?.focus();
 			});
 		}
-		return (o, l) => (c(), n("div", {
+		return (t, s) => (l(), r("div", {
 			ref_key: "root",
-			ref: M,
+			ref: P,
 			class: "bless-order"
 		}, [
-			r("ul", {
+			i("ul", {
 				class: "bless-order__list",
 				role: "list",
-				"aria-label": a.label
-			}, [(c(!0), n(e, null, u(w.value, (e, u) => (c(), n("li", {
-				key: a.rowKey ? a.rowKey(e, u) : u,
-				class: s(["bless-order__item", {
-					"bless-order__item--drag": E.value === u,
-					"bless-order__item--over": D.value === u
+				"aria-label": o.label
+			}, [(l(!0), r(e, null, d(E.value, (e, u) => (l(), r("li", {
+				key: o.rowKey ? o.rowKey(e, u) : u,
+				class: c(["bless-order__item", {
+					"bless-order__item--drag": O.value === u,
+					"bless-order__item--over": k.value === u
 				}]),
 				draggable: "true",
 				tabindex: "0",
-				"aria-describedby": N,
-				onDragstart: (e) => E.value = u,
-				onDragover: h((e) => D.value = u, ["prevent"]),
-				onDragleave: (e) => D.value === u && (D.value = null),
-				onDrop: h((e) => A(u), ["prevent"]),
-				onDragend: l[0] ||= (e) => E.value = D.value = null,
-				onKeydown: (e) => j(u, e)
+				"aria-describedby": F,
+				onDragstart: (e) => O.value = u,
+				onDragover: g((e) => k.value = u, ["prevent"]),
+				onDragleave: (e) => k.value === u && (k.value = null),
+				onDrop: g((e) => M(u), ["prevent"]),
+				onDragend: s[0] ||= (e) => O.value = k.value = null,
+				onKeydown: (e) => N(u, e)
 			}, [
-				l[1] ||= r("span", {
+				s[1] ||= i("span", {
 					class: "bless-order__grip",
 					"aria-hidden": "true"
 				}, "⋮⋮", -1),
-				r("span", v, [d(o.$slots, "default", {
+				i("span", y, [f(t.$slots, "default", {
 					item: e,
 					index: u
-				}, () => [i(f(e), 1)])]),
-				C.buttons ? (c(), n("span", y, [r("button", {
+				}, () => [a(p(e), 1)])]),
+				w.buttons ? (l(), r("span", b, [i("button", {
 					type: "button",
 					class: "bless-order__up",
-					"aria-label": `Move item ${u + 1} up`,
+					"aria-label": T.value.up(u + 1),
 					disabled: u === 0,
-					onClick: (e) => F(u, -1)
-				}, " ↑ ", 8, b), r("button", {
+					onClick: (e) => L(u, -1)
+				}, " ↑ ", 8, x), i("button", {
 					type: "button",
 					class: "bless-order__down",
-					"aria-label": `Move item ${u + 1} down`,
-					disabled: u === w.value.length - 1,
-					onClick: (e) => F(u, 1)
-				}, " ↓ ", 8, x)])) : t("", !0)
-			], 42, _))), 128))], 8, g),
-			r("span", {
-				id: N,
+					"aria-label": T.value.down(u + 1),
+					disabled: u === E.value.length - 1,
+					onClick: (e) => L(u, 1)
+				}, " ↓ ", 8, S)])) : n("", !0)
+			], 42, v))), 128))], 8, _),
+			i("span", {
+				id: F,
 				hidden: ""
 			}, "Alt plus arrow keys move it."),
-			r("span", S, f(O.value), 1)
+			i("span", C, p(A.value), 1)
 		], 512));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };

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

@@ -5,6 +5,8 @@ type __VLS_Props = {
     label?: string;
     prevLabel?: string;
     nextLabel?: string;
+    /** name of a page link, from its number */
+    pageLabel?: (page: number) => string;
     /** render <a href> using this fn instead of buttons */
     href?: (page: number) => string;
 };

package/dist/components/BlessPagination.vue_vue_type_script_setup_true_lang.js

@@ -18,6 +18,7 @@ var v = ["aria-label"], y = {
 		label: { default: "Pagination" },
 		prevLabel: { default: "Previous" },
 		nextLabel: { default: "Next" },
+		pageLabel: {},
 		href: {}
 	}, {
 		modelValue: { default: 1 },
@@ -63,7 +64,7 @@ var v = ["aria-label"], y = {
 				class: ["bless-pagination__btn", { "bless-pagination__btn--current": t === S.value }],
 				color: t === S.value ? "accent" : "none",
 				"aria-current": t === S.value ? "page" : void 0,
-				"aria-label": `Page ${t}`,
+				"aria-label": (l.pageLabel ?? ((e) => `Page ${e}`))(t),
 				onClick: (e) => !l.href && w(t)
 			}), {
 				default: _(() => [s(m(t), 1)]),

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

@@ -4,6 +4,11 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
         sourceLabel?: string;
         targetLabel?: string;
         rows?: number;
+        labels?: Partial<{
+            moveSelected: (to: string) => string;
+            moveAll: (to: string) => string;
+            moved: (count: number, to: string) => string;
+        }>;
     } & {
         source?: BlessOption<T>[];
         target?: BlessOption<T>[];

package/dist/components/BlessPickList.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,18 @@
 import e from "./BlessButton.js";
 import t from "./BlessListbox.js";
-import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, nextTick as s, openBlock as c, ref as l, toDisplayString as u, useModel as d, withCtx as f } from "vue";
+import { computed as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, nextTick as c, openBlock as l, ref as u, toDisplayString as d, useModel as f, withCtx as p } from "vue";
 //#region src/components/BlessPickList.vue?vue&type=script&setup=true&lang.ts
-var p = { class: "bless-picklist__col" }, m = { class: "bless-picklist__title" }, h = { class: "bless-picklist__btns" }, g = { class: "bless-picklist__col" }, _ = { class: "bless-picklist__title" }, v = {
+var m = { class: "bless-picklist__col" }, h = { class: "bless-picklist__title" }, g = { class: "bless-picklist__btns" }, _ = { class: "bless-picklist__col" }, v = { class: "bless-picklist__title" }, y = {
 	class: "bless-picklist__live",
 	"aria-live": "polite"
-}, y = /*@__PURE__*/ a({
+}, b = /*@__PURE__*/ o({
 	name: "BlessPickList",
 	__name: "BlessPickList",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ s({
 		sourceLabel: { default: "Available" },
 		targetLabel: { default: "Selected" },
-		rows: { default: 6 }
+		rows: { default: 6 },
+		labels: {}
 	}, {
 		source: { default: () => [] },
 		sourceModifiers: {},
@@ -19,102 +20,107 @@ var p = { class: "bless-picklist__col" }, m = { class: "bless-picklist__title" }
 		targetModifiers: {}
 	}),
 	emits: ["update:source", "update:target"],
-	setup(a) {
-		let o = a, y = d(a, "source"), b = d(a, "target"), x = l([]), S = l([]), C = l(), w = l("");
-		function T(e, t) {
-			let [n, r] = e === "source" ? [y, b] : [b, y], i = n.value.filter((e) => t.includes(e.value));
-			n.value = n.value.filter((e) => !t.includes(e.value)), r.value = [...r.value, ...i], x.value = [], S.value = [];
-			let a = e === "source" ? o.targetLabel : o.sourceLabel;
-			w.value = `Moved ${i.length} to ${a}`, s(() => C.value?.querySelectorAll("[role=listbox]")[+(e === "source")]?.focus());
+	setup(o) {
+		let s = o, b = n(() => ({
+			moveSelected: (e) => `Move selected to ${e}`,
+			moveAll: (e) => `Move all to ${e}`,
+			moved: (e, t) => `Moved ${e} to ${t}`,
+			...s.labels
+		})), x = f(o, "source"), S = f(o, "target"), C = u([]), w = u([]), T = u(), E = u("");
+		function D(e, t) {
+			let [n, r] = e === "source" ? [x, S] : [S, x], i = n.value.filter((e) => t.includes(e.value));
+			n.value = n.value.filter((e) => !t.includes(e.value)), r.value = [...r.value, ...i], C.value = [], w.value = [];
+			let a = e === "source" ? s.targetLabel : s.sourceLabel;
+			E.value = b.value.moved(i.length, a), c(() => T.value?.querySelectorAll("[role=listbox]")[+(e === "source")]?.focus());
 		}
-		return (o, s) => (c(), n("div", {
+		return (n, s) => (l(), r("div", {
 			ref_key: "root",
-			ref: C,
+			ref: T,
 			class: "bless-picklist"
 		}, [
-			r("div", p, [r("span", m, u(a.sourceLabel) + " · " + u(y.value.length), 1), i(t, {
-				modelValue: x.value,
-				"onUpdate:modelValue": s[0] ||= (e) => x.value = e,
-				options: y.value,
+			i("div", m, [i("span", h, d(o.sourceLabel) + " · " + d(x.value.length), 1), a(t, {
+				modelValue: C.value,
+				"onUpdate:modelValue": s[0] ||= (e) => C.value = e,
+				options: x.value,
 				multiple: "",
-				rows: a.rows,
-				label: a.sourceLabel
+				rows: o.rows,
+				label: o.sourceLabel
 			}, null, 8, [
 				"modelValue",
 				"options",
 				"rows",
 				"label"
 			])]),
-			r("div", h, [
-				i(e, {
+			i("div", g, [
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !x.value.length,
-					"aria-label": `Move selected to ${a.targetLabel}`,
-					onClick: s[1] ||= (e) => T("source", x.value)
+					disabled: !C.value.length,
+					"aria-label": b.value.moveSelected(o.targetLabel),
+					onClick: s[1] ||= (e) => D("source", C.value)
 				}, {
-					default: f(() => [...s[6] ||= [r("span", {
+					default: p(() => [...s[6] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "›", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"]),
-				i(e, {
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !y.value.length,
-					"aria-label": `Move all to ${a.targetLabel}`,
-					onClick: s[2] ||= (e) => T("source", y.value.map((e) => e.value))
+					disabled: !x.value.length,
+					"aria-label": b.value.moveAll(o.targetLabel),
+					onClick: s[2] ||= (e) => D("source", x.value.map((e) => e.value))
 				}, {
-					default: f(() => [...s[7] ||= [r("span", {
+					default: p(() => [...s[7] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "»", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"]),
-				i(e, {
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !S.value.length,
-					"aria-label": `Move selected to ${a.sourceLabel}`,
-					onClick: s[3] ||= (e) => T("target", S.value)
+					disabled: !w.value.length,
+					"aria-label": b.value.moveSelected(o.sourceLabel),
+					onClick: s[3] ||= (e) => D("target", w.value)
 				}, {
-					default: f(() => [...s[8] ||= [r("span", {
+					default: p(() => [...s[8] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "‹", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"]),
-				i(e, {
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !b.value.length,
-					"aria-label": `Move all to ${a.sourceLabel}`,
-					onClick: s[4] ||= (e) => T("target", b.value.map((e) => e.value))
+					disabled: !S.value.length,
+					"aria-label": b.value.moveAll(o.sourceLabel),
+					onClick: s[4] ||= (e) => D("target", S.value.map((e) => e.value))
 				}, {
-					default: f(() => [...s[9] ||= [r("span", {
+					default: p(() => [...s[9] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "«", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"])
 			]),
-			r("div", g, [r("span", _, u(a.targetLabel) + " · " + u(b.value.length), 1), i(t, {
-				modelValue: S.value,
-				"onUpdate:modelValue": s[5] ||= (e) => S.value = e,
-				options: b.value,
+			i("div", _, [i("span", v, d(o.targetLabel) + " · " + d(S.value.length), 1), a(t, {
+				modelValue: w.value,
+				"onUpdate:modelValue": s[5] ||= (e) => w.value = e,
+				options: S.value,
 				multiple: "",
-				rows: a.rows,
-				label: a.targetLabel
+				rows: o.rows,
+				label: o.targetLabel
 			}, null, 8, [
 				"modelValue",
 				"options",
 				"rows",
 				"label"
 			])]),
-			r("span", v, u(w.value), 1)
+			i("span", y, d(E.value), 1)
 		], 512));
 	}
 });
 //#endregion
-export { y as default };
+export { b 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];
+}) & {};

package/dist/components/BlessRadialMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,146 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { keepInside as t, polar as n, sectorAt as r } from "../composables/radial.js";
+import { Fragment as i, computed as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useId as S, useModel as C, watch as w, withModifiers as T } from "vue";
+//#region src/components/BlessRadialMenu.vue?vue&type=script&setup=true&lang.ts
+var E = ["id", "aria-label"], ee = {
+	class: "bless-radial__core",
+	"aria-hidden": "true"
+}, te = [
+	"aria-label",
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onPointerenter"
+], D = /*@__PURE__*/ l({
+	name: "BlessRadialMenu",
+	inheritAttrs: !1,
+	__name: "BlessRadialMenu",
+	props: /*@__PURE__*/ u({
+		items: {},
+		radius: { default: 84 },
+		holdMs: { default: 450 },
+		disabled: { type: Boolean },
+		label: { default: "Actions" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["select"], ["update:open"]),
+	setup(l, { emit: u }) {
+		let D = l, O = C(l, "open"), k = u, A = S(), j = _(), M = _(), N = _({
+			x: 0,
+			y: 0
+		}), P = _(null), F = !1, I, L = null, R = a(() => D.radius + 22), z = a(() => D.items.map((e, t) => n(t, D.items.length, D.radius))), B = a(() => D.items.map((e, t) => e.disabled ? -1 : t).filter((e) => e >= 0));
+		function V(e, n, r = !1) {
+			!D.disabled && D.items.length && (N.value = t(e, n, R.value, window.innerWidth, window.innerHeight), P.value = null, F = r, O.value = !0);
+		}
+		function H(e = !0) {
+			F = !1, O.value && (O.value = !1, e && (j.value?.querySelector("[tabindex],button,a,input") ?? j.value)?.focus?.());
+		}
+		function U(e) {
+			let t = D.items[e];
+			t && !t.disabled && (k("select", t), H());
+		}
+		function W(e) {
+			D.disabled || (e.preventDefault(), clearTimeout(I), O.value || V(e.clientX, e.clientY));
+		}
+		function G(e) {
+			D.disabled || e.pointerType === "mouse" || (L = {
+				x: e.clientX,
+				y: e.clientY
+			}, clearTimeout(I), I = setTimeout(() => {
+				L && V(L.x, L.y, !0);
+			}, D.holdMs));
+		}
+		function K(e) {
+			L && !O.value && Math.hypot(e.clientX - L.x, e.clientY - L.y) > 8 && (clearTimeout(I), L = null);
+		}
+		function q() {
+			clearTimeout(I), L = null;
+		}
+		function J(e) {
+			if (e.key === "ContextMenu" || e.shiftKey && e.key === "F10") {
+				e.preventDefault();
+				let t = e.target.getBoundingClientRect();
+				V(t.left + t.width / 2, t.top + t.height / 2);
+			}
+		}
+		function Y(e) {
+			if (!O.value) return;
+			let t = r(e.clientX - N.value.x, e.clientY - N.value.y, D.items.length);
+			F && (P.value = t !== null && !D.items[t]?.disabled ? t : null);
+		}
+		function X() {
+			O.value && F && (F = !1, L = null, P.value !== null && U(P.value));
+		}
+		function Z(t) {
+			let n = e(t), r = B.value;
+			if (!r.length) return;
+			let i = P.value === null ? -1 : r.indexOf(P.value);
+			n === "ArrowRight" || n === "ArrowDown" ? (t.preventDefault(), Q(r[(i + 1) % r.length])) : n === "ArrowLeft" || n === "ArrowUp" ? (t.preventDefault(), Q(r[(i - 1 + r.length) % r.length])) : t.key === "Home" ? (t.preventDefault(), Q(r[0])) : t.key === "End" ? (t.preventDefault(), Q(r.at(-1))) : t.key === "Escape" ? (t.preventDefault(), t.stopPropagation(), H()) : t.key === "Tab" && H(!1);
+		}
+		function Q(e) {
+			P.value = e, f(() => M.value?.querySelectorAll("[role=\"menuitem\"]")[e]?.focus());
+		}
+		w(O, async (e) => {
+			await f();
+			let t = M.value;
+			t && typeof t.showPopover == "function" && (e ? (t.matches(":popover-open") || t.showPopover(), window.addEventListener("pointermove", Y), window.addEventListener("pointerup", X), window.addEventListener("pointercancel", X), window.addEventListener("pointerdown", $, !0), F || Q(B.value[0] ?? 0)) : (t.matches(":popover-open") && t.hidePopover(), window.removeEventListener("pointermove", Y), window.removeEventListener("pointerup", X), window.removeEventListener("pointercancel", X), window.removeEventListener("pointerdown", $, !0)));
+		});
+		function $(e) {
+			!M.value?.contains(e.target) && !F && H(!1);
+		}
+		return h(() => {
+			clearTimeout(I), window.removeEventListener("pointermove", Y), window.removeEventListener("pointerup", X), window.removeEventListener("pointercancel", X), window.removeEventListener("pointerdown", $, !0);
+		}), (e, t) => (g(), o(i, null, [s("div", d({
+			ref_key: "area",
+			ref: j,
+			class: "bless-radial__area"
+		}, e.$attrs, {
+			onContextmenu: W,
+			onPointerdown: G,
+			onPointermove: K,
+			onPointerup: q,
+			onPointercancel: q,
+			onKeydown: J
+		}), [y(e.$slots, "default")], 16), s("div", {
+			id: x(A),
+			ref_key: "panel",
+			ref: M,
+			popover: "manual",
+			class: "bless-radial",
+			role: "menu",
+			"aria-label": l.label,
+			style: m({
+				left: `${N.value.x - R.value}px`,
+				top: `${N.value.y - R.value}px`,
+				width: `${R.value * 2}px`,
+				height: `${R.value * 2}px`
+			}),
+			onKeydown: Z,
+			onContextmenu: t[0] ||= T(() => {}, ["prevent"])
+		}, [s("span", ee, b(P.value === null ? "" : l.items[P.value]?.label), 1), (g(!0), o(i, null, v(l.items, (t, n) => (g(), o("button", {
+			key: t.id,
+			type: "button",
+			role: "menuitem",
+			class: p(["bless-radial__item", { "bless-radial__item--on": P.value === n }]),
+			style: m({
+				left: `calc(50% + ${z.value[n].x}px)`,
+				top: `calc(50% + ${z.value[n].y}px)`
+			}),
+			"aria-label": t.label,
+			"aria-disabled": t.disabled || void 0,
+			tabindex: P.value === n ? 0 : -1,
+			onClick: (e) => U(n),
+			onPointerenter: (e) => !t.disabled && !x(F) && (P.value = n)
+		}, [y(e.$slots, "item", {
+			item: t,
+			index: n
+		}, () => [c(b(t.icon ?? t.label.slice(0, 1)), 1)])], 46, te))), 128))], 44, E)], 64));
+	}
+});
+//#endregion
+export { D as default };

package/dist/components/BlessRangeCalendar.css

@@ -0,0 +1 @@
+.bless-range{gap:var(--bless-space-2);width:max-content;max-width:100%;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid;position:relative}.bless-range__bar,.bless-range__foot{justify-content:space-between;align-items:center;gap:var(--bless-space-2);display:flex}.bless-range__title{text-transform:capitalize}.bless-range__grid{-webkit-user-select:none;user-select:none;gap:2px;display:grid}.bless-range__row{grid-template-columns:repeat(7,40px);gap:2px;display:grid}.bless-range__head{padding:var(--bless-space-1) 0;color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);text-align:center}.bless-range__day{background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);height:40px;color:inherit;font:inherit;cursor:pointer;touch-action:none;padding:0}.bless-range__day[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-range__day--today{font-weight:var(--bless-font-weight-bold,700);text-decoration:underline}.bless-range__day--on{background:var(--bless-color-accent);border-color:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-range__day--set{border-color:var(--bless-color-accent);background:color-mix(in srgb, var(--bless-color-accent) 25%, var(--bless-color-bg));color:var(--bless-color-text)}.bless-range__day--clear{border-style:dashed;border-color:var(--bless-color-danger);background:var(--bless-color-bg);color:var(--bless-color-text)}.bless-range__day:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px;z-index:1}.bless-range__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessRangeCalendar.js

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