blessing-ui 0.1.0

package/dist/components/BlessModal.js

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

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

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    title?: string;
+    /** open when location.hash matches; open/close updates the hash (saenai-style deep links) */
+    hash?: string;
+    size?: "sm" | "md" | "lg" | "full";
+    /** click on backdrop closes */
+    dismissible?: boolean;
+    closeLabel?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg" | "full";
+    dismissible: boolean;
+    closeLabel: string;
+}, {}, {}, {}, 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/BlessModal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,85 @@
+import { useHash as e } from "../composables/useHash.js";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useId as m, useModel as h, watch as g, withModifiers as _ } from "vue";
+//#region src/components/BlessModal.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-labelledby"], y = {
+	class: "bless-modal__panel",
+	tabindex: "-1"
+}, b = ["aria-label"], x = {
+	key: 0,
+	class: "bless-modal__header"
+}, S = { class: "bless-modal__body" }, C = {
+	key: 1,
+	class: "bless-modal__footer"
+}, w = /*@__PURE__*/ a({
+	name: "BlessModal",
+	__name: "BlessModal",
+	props: /*@__PURE__*/ o({
+		title: {},
+		hash: {},
+		size: { default: "md" },
+		dismissible: {
+			type: Boolean,
+			default: !0
+		},
+		closeLabel: { default: "Close" }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["close"], ["update:modelValue"]),
+	setup(a, { emit: o }) {
+		let w = a, T = h(a, "modelValue"), E = o, D = d(), O = e();
+		function k(e) {
+			let t = D.value;
+			t && (e && !t.open ? (t.showModal(), t.contains(document.activeElement) || t.querySelector(".bless-modal__panel")?.focus()) : !e && t.open && t.close());
+		}
+		let A = !1;
+		g(T, (e) => {
+			s(() => k(e)), w.hash && (e && O.value !== w.hash ? (history.pushState(null, "", `#${w.hash}`), A = !0) : !e && O.value === w.hash && (A ? history.back() : history.replaceState(null, "", location.pathname + location.search)), e || (A = !1), O.value = e ? w.hash : "");
+		}), g(O, (e) => {
+			w.hash && (e === w.hash && !T.value && (A = !0), T.value = e === w.hash);
+		}, { immediate: !1 });
+		function j() {
+			T.value = !1, E("close");
+		}
+		let M = !1;
+		function N(e) {
+			M = e.target === D.value;
+		}
+		function P(e) {
+			w.dismissible && M && e.target === D.value && (T.value = !1);
+		}
+		l(() => {
+			w.hash && O.value === w.hash && (T.value = !0), k(T.value);
+		});
+		let F = `${m()}-title`;
+		return (e, o) => (u(), n("dialog", {
+			ref_key: "dialog",
+			ref: D,
+			class: c(["bless-modal", `bless-modal--${a.size}`]),
+			"aria-labelledby": a.title || e.$slots.title ? F : void 0,
+			onClose: j,
+			onCancel: o[1] ||= _((e) => T.value = !1, ["prevent"]),
+			onPointerdown: N,
+			onClick: P
+		}, [r("div", y, [
+			r("button", {
+				type: "button",
+				class: "bless-modal__close",
+				"aria-label": a.closeLabel,
+				onClick: o[0] ||= (e) => T.value = !1
+			}, [...o[2] ||= [r("span", { "aria-hidden": "true" }, "×", -1)]], 8, b),
+			a.title || e.$slots.title ? (u(), n("header", x, [r("h2", {
+				id: F,
+				class: "bless-modal__title"
+			}, [f(e.$slots, "title", {}, () => [i(p(a.title), 1)])])])) : t("", !0),
+			r("div", S, [f(e.$slots, "default")]),
+			e.$slots.footer ? (u(), n("footer", C, [f(e.$slots, "footer")])) : t("", !0)
+		])], 42, v));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/BlessNavigationMenu.css

@@ -0,0 +1 @@
+.bless-navmenu{font-family:var(--bless-font-sans)}.bless-navmenu__list{gap:var(--bless-space-1);margin:0;padding:0;list-style:none;display:flex}.bless-navmenu__trigger{align-items:center;gap:var(--bless-space-1);padding:var(--bless-space-2) var(--bless-space-3);color:var(--bless-color-text);font:inherit;font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase;cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);background:0 0;border:0;text-decoration:none;display:inline-flex}.bless-navmenu__trigger:hover{opacity:var(--bless-hover-opacity)}.bless-navmenu__trigger--open{color:var(--bless-color-accent-text)}.bless-navmenu__trigger--active{box-shadow:inset 0 -2px 0 var(--bless-color-accent)}.bless-navmenu__trigger:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-navmenu__chevron{border-inline-end:2px solid;width:6px;height:6px;transition:transform var(--bless-duration-base);border-bottom:2px solid;transform:translateY(-2px)rotate(45deg)}.bless-navmenu__trigger--open .bless-navmenu__chevron{transform:translateY(1px)rotate(-135deg)}.bless-navmenu__panel{border-radius:var(--bless-radius);inset:unset;padding:var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);box-shadow:var(--bless-shadow-plate);min-width:280px;margin:0;position:fixed}.bless-navmenu__panel:popover-open{animation:bless-pop-in var(--bless-duration-base) var(--bless-ease-out)}.bless-navmenu__grid{gap:var(--bless-space-1);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-width:640px;margin:0;padding:0;list-style:none;display:grid}.bless-navmenu__link{padding:var(--bless-space-2) var(--bless-space-3);color:var(--bless-color-text);transition:background var(--bless-duration-fast);gap:2px;text-decoration:none;display:grid}.bless-navmenu__link:hover,.bless-navmenu__link:focus-visible{background:var(--bless-color-surface)}.bless-navmenu__link:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-navmenu__link-label{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold)}.bless-navmenu__link-desc{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted);line-height:var(--bless-leading-tight)}

package/dist/components/BlessNavigationMenu.js

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

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

@@ -0,0 +1,42 @@
+export interface BlessNavMenuItem {
+    label: string;
+    href?: string;
+    /** items → renders a panel */
+    items?: {
+        label: string;
+        href: string;
+        description?: string;
+    }[];
+    active?: boolean;
+}
+type __VLS_Props = {
+    items: BlessNavMenuItem[];
+    label?: string;
+};
+declare var __VLS_11: {
+    item: BlessNavMenuItem;
+};
+type __VLS_Slots = {} & {
+    panel?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: {
+        label: string;
+        href: string;
+    }, e: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: {
+        label: string;
+        href: string;
+    }, e: MouseEvent) => any) | undefined;
+}>, {
+    label: string;
+}, {}, {}, {}, 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/BlessNavigationMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,116 @@
+import { useLink as e } from "../composables/useLink.js";
+import { logicalKey as t } from "../composables/rtl.js";
+import { useFloating as n } from "../composables/useFloating.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeProps as u, nextTick as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as b, withCtx as x, withKeys as S } from "vue";
+//#region src/components/BlessNavigationMenu.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-label"], w = {
+	role: "list",
+	class: "bless-navmenu__list"
+}, T = ["onPointerenter"], E = {
+	key: 0,
+	class: "bless-navmenu__chevron",
+	"aria-hidden": "true"
+}, D = ["id"], O = {
+	role: "list",
+	class: "bless-navmenu__grid"
+}, k = { class: "bless-navmenu__link-label" }, A = {
+	key: 0,
+	class: "bless-navmenu__link-desc"
+}, j = /*@__PURE__*/ l({
+	name: "BlessNavigationMenu",
+	__name: "BlessNavigationMenu",
+	props: {
+		items: {},
+		label: { default: "Main" }
+	},
+	emits: ["select"],
+	setup(l, { emit: j }) {
+		let M = e(), N = j, P = b(), F = m(null), I = m([]), L = m(), R = m(), z = m(!1), { x: B, y: V } = n(R, L, z, {
+			placement: "bottom-start",
+			offset: 6
+		}), H;
+		function U(e, t) {
+			t && (I.value[e] = t.$el ?? t);
+		}
+		function W(e) {
+			clearTimeout(H), R.value = I.value[e], F.value = e, z.value = !0, d(() => L.value?.matches(":popover-open") || L.value?.showPopover?.());
+		}
+		function G() {
+			clearTimeout(H);
+		}
+		function K(e = 150) {
+			clearTimeout(H), H = setTimeout(() => {
+				F.value = null, z.value = !1, L.value?.matches(":popover-open") && L.value?.hidePopover?.();
+			}, e);
+		}
+		function q(e) {
+			let t = F.value;
+			t !== null && e?.preventDefault(), K(0), t !== null && I.value[t]?.focus();
+		}
+		function J(e) {
+			let t = e.relatedTarget;
+			t && (L.value?.contains(t) || I.value.some((e) => e?.contains(t))) || K(0);
+		}
+		function Y(e, n, r) {
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && r.items ? (e.preventDefault(), W(n), d(() => L.value?.querySelector("a")?.focus())) : e.key === "Escape" && F.value !== null ? (e.preventDefault(), K(0)) : t(e) === "ArrowRight" ? I.value[(n + 1) % I.value.length]?.focus() : t(e) === "ArrowLeft" && I.value[(n - 1 + I.value.length) % I.value.length]?.focus();
+		}
+		return (e, t) => (p(), o("nav", {
+			class: "bless-navmenu",
+			"aria-label": l.label
+		}, [s("ul", w, [(p(!0), o(r, null, h(l.items, (e, n) => (p(), o("li", {
+			key: e.label,
+			class: "bless-navmenu__item",
+			onPointerenter: (t) => t.pointerType === "mouse" && (e.items ? W(n) : K(0)),
+			onPointerleave: t[1] ||= (e) => e.pointerType === "mouse" && K()
+		}, [(p(), i(_(y(M)(e.items ? void 0 : e.href, void 0, "button").is), u({ ref_for: !0 }, y(M)(e.items ? void 0 : e.href, void 0, "button").attrs, {
+			ref_for: !0,
+			ref: (e) => U(n, e),
+			type: e.items ? "button" : void 0,
+			class: ["bless-navmenu__trigger", {
+				"bless-navmenu__trigger--active": e.active,
+				"bless-navmenu__trigger--open": F.value === n
+			}],
+			"aria-expanded": e.items ? F.value === n : void 0,
+			"aria-controls": e.items ? `${y(P)}-panel` : void 0,
+			"aria-current": e.active ? "page" : void 0,
+			onClick: (t) => e.items ? F.value === n ? K(0) : W(n) : void 0,
+			onKeydown: (t) => Y(t, n, e),
+			onFocusout: t[0] ||= (e) => z.value && J(e)
+		}), {
+			default: x(() => [c(v(e.label) + " ", 1), e.items ? (p(), o("span", E)) : a("", !0)]),
+			_: 2
+		}, 1040, [
+			"type",
+			"class",
+			"aria-expanded",
+			"aria-controls",
+			"aria-current",
+			"onClick",
+			"onKeydown"
+		]))], 40, T))), 128))]), s("div", {
+			ref_key: "panel",
+			ref: L,
+			id: `${y(P)}-panel`,
+			popover: "manual",
+			class: "bless-navmenu__panel",
+			style: f({
+				left: `${y(B)}px`,
+				top: `${y(V)}px`
+			}),
+			onPointerenter: G,
+			onPointerleave: t[2] ||= (e) => e.pointerType === "mouse" && K(),
+			onKeydown: S(q, ["esc"]),
+			onFocusout: J
+		}, [F.value !== null && l.items[F.value]?.items ? g(e.$slots, "panel", { item: l.items[F.value] }, () => [s("ul", O, [(p(!0), o(r, null, h(l.items[F.value].items, (e) => (p(), o("li", { key: e.href }, [(p(), i(_(y(M)(e.href).is), u({ ref_for: !0 }, y(M)(e.href).attrs, {
+			class: "bless-navmenu__link",
+			onClick: (t) => {
+				N("select", e, t), K(0);
+			}
+		}), {
+			default: x(() => [s("span", k, v(e.label), 1), e.description ? (p(), o("span", A, v(e.description), 1)) : a("", !0)]),
+			_: 2
+		}, 1040, ["onClick"]))]))), 128))])], void 0, 0) : a("", !0)], 44, D)], 8, C));
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/BlessOrderList.css

@@ -0,0 +1 @@
+.bless-order{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-order__list{margin:0;padding:0;list-style:none}.bless-order__item{border-radius:var(--bless-radius);align-items:center;gap:var(--bless-space-2);padding:var(--bless-space-2) var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);cursor:grab;display:flex}.bless-order__item+.bless-order__item{margin-top:calc(-1 * var(--bless-border-width))}.bless-order__item:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px;z-index:1}.bless-order__item--drag{opacity:.4}.bless-order__item--over{border-top:2px solid var(--bless-color-accent)}.bless-order__grip{color:var(--bless-color-text-muted);letter-spacing:-3px}.bless-order__body{flex:1;min-width:0}.bless-order__btns{gap:2px;display:inline-flex}.bless-order__btns button{background:var(--bless-color-surface);width:24px;height:24px;color:inherit;font:inherit;cursor:pointer;transform:skewX(var(--bless-skew));transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);border:0}.bless-order__btns button:hover:not(:disabled){opacity:var(--bless-hover-opacity)}.bless-order__btns button:disabled{opacity:.3;cursor:not-allowed}.bless-order__btns button:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-order__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessOrderList.js

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

package/dist/components/BlessOrderList.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<({
+        rowKey?: (item: T, index: number) => string | number;
+        label?: string;
+        /** hide the ↑ ↓ buttons (drag only) */
+        buttons?: boolean;
+    } & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+        onMove?: ((from: number, to: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            item: T;
+            index: number;
+        }) => any;
+    };
+    emit: ((evt: "move", from: number, to: number) => void) & ((event: "update:modelValue", value: T[]) => void);
+}>) => 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/BlessOrderList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,114 @@
+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";
+//#region src/components/BlessOrderList.vue?vue&type=script&setup=true&lang.ts
+var g = ["aria-label"], _ = [
+	"onDragstart",
+	"onDragover",
+	"onDragleave",
+	"onDrop",
+	"onKeydown"
+], v = { class: "bless-order__body" }, y = {
+	key: 0,
+	class: "bless-order__btns"
+}, b = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], x = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], S = {
+	class: "bless-order__live",
+	"aria-live": "polite"
+}, C = /*@__PURE__*/ a({
+	name: "BlessOrderList",
+	__name: "BlessOrderList",
+	props: /*@__PURE__*/ o({
+		rowKey: {},
+		label: { default: "Reorder" },
+		buttons: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		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}`;
+		}
+		function A(e) {
+			E.value != null && k(E.value, e), E.value = D.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)));
+		}
+		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");
+				(r && !r.disabled ? r : n)?.focus();
+			});
+		}
+		return (o, l) => (c(), n("div", {
+			ref_key: "root",
+			ref: M,
+			class: "bless-order"
+		}, [
+			r("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
+				}]),
+				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)
+			}, [
+				l[1] ||= r("span", {
+					class: "bless-order__grip",
+					"aria-hidden": "true"
+				}, "⋮⋮", -1),
+				r("span", v, [d(o.$slots, "default", {
+					item: e,
+					index: u
+				}, () => [i(f(e), 1)])]),
+				C.buttons ? (c(), n("span", y, [r("button", {
+					type: "button",
+					class: "bless-order__up",
+					"aria-label": `Move item ${u + 1} up`,
+					disabled: u === 0,
+					onClick: (e) => F(u, -1)
+				}, " ↑ ", 8, b), r("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,
+				hidden: ""
+			}, "Alt plus arrow keys move it."),
+			r("span", S, f(O.value), 1)
+		], 512));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BlessOrgChart.css

@@ -0,0 +1 @@
+.bless-org{padding:var(--bless-space-2);font-family:var(--bless-font-sans);color:var(--bless-color-text);overflow-x:auto}.bless-org>ul.bless-org__level{justify-content:center;margin:0;padding:0;list-style:none;display:flex}.bless-org ul>li.bless-org__item{padding:var(--bless-space-4) var(--bless-space-2) 0;flex-direction:column;align-items:center;margin:0;display:flex;position:relative}.bless-org li.bless-org__item:before{content:"";top:0;width:var(--bless-border-width);height:var(--bless-space-4);background:var(--bless-color-border);position:absolute;inset-inline-start:50%}.bless-org li.bless-org__item:after{content:"";top:0;height:var(--bless-border-width);background:var(--bless-color-border);position:absolute;inset-inline:0}.bless-org li.bless-org__item:first-child:after{inset-inline-start:50%}.bless-org li.bless-org__item:last-child:after{inset-inline-end:50%}.bless-org li.bless-org__item:only-child:after,.bless-org>.bless-org__level>.bless-org__item:before,.bless-org>.bless-org__level>.bless-org li.bless-org__item:after{display:none}.bless-org>ul.bless-org__level>li.bless-org__item{padding-top:0}.bless-org li>ul.bless-org__children{padding:var(--bless-space-4) 0 0;justify-content:center;margin:0;list-style:none;display:flex;position:relative}.bless-org ul.bless-org__children:before{content:"";top:0;width:var(--bless-border-width);height:var(--bless-space-4);background:var(--bless-color-border);position:absolute;inset-inline-start:50%}.bless-org__node{border-radius:var(--bless-radius-plate);min-width:120px;padding:var(--bless-space-2) var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:inherit;font:inherit;text-align:center;cursor:pointer;transform:skewX(var(--bless-skew));flex-direction:column;align-items:center;gap:2px;display:inline-flex}.bless-org__node>*{transform:skewX(var(--bless-skew-counter))}.bless-org__node:hover{border-color:var(--bless-color-text-muted)}.bless-org__node:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-org__node--selected{border-color:var(--bless-color-accent-text);color:var(--bless-color-accent-text)}.bless-org__label{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold)}.bless-org__desc{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}

package/dist/components/BlessOrgChart.js

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

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

@@ -0,0 +1,33 @@
+import { BlessTreeNode } from './tree';
+type __VLS_Props = {
+    nodes: BlessTreeNode[];
+    label?: string;
+};
+type __VLS_ModelProps = {
+    "selected"?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_10: {
+    node: BlessTreeNode;
+    selected: boolean;
+};
+type __VLS_Slots = {} & {
+    node?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (node: BlessTreeNode, id: string) => any;
+    "update:selected": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((node: BlessTreeNode, id: string) => any) | undefined;
+    "onUpdate:selected"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    label: string;
+}, {}, {}, {}, 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/BlessOrgChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,41 @@
+import e from "./BlessOrgChartNode.js";
+import { Fragment as t, createBlock as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, openBlock as c, renderList as l, renderSlot as u, useModel as d, withCtx as f } from "vue";
+//#region src/components/BlessOrgChart.vue?vue&type=script&setup=true&lang.ts
+var p = ["aria-label"], m = {
+	class: "bless-org__level",
+	role: "list"
+}, h = /*@__PURE__*/ a({
+	name: "BlessOrgChart",
+	__name: "BlessOrgChart",
+	props: /*@__PURE__*/ o({
+		nodes: {},
+		label: { default: "Organisation" }
+	}, {
+		selected: {},
+		selectedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["select"], ["update:selected"]),
+	setup(a, { emit: o }) {
+		let h = d(a, "selected"), g = o;
+		return (o, d) => (c(), r("div", {
+			class: "bless-org",
+			role: "group",
+			"aria-label": a.label
+		}, [i("ul", m, [(c(!0), r(t, null, l(a.nodes, (t, r) => (c(), n(e, {
+			key: t.id ?? r,
+			node: t,
+			path: String(t.id ?? r),
+			selected: h.value,
+			onSelect: d[0] ||= (e, t) => (h.value = t, g("select", e, t))
+		}, {
+			node: f((e) => [u(o.$slots, "node", s({ ref_for: !0 }, e))]),
+			_: 3
+		}, 8, [
+			"node",
+			"path",
+			"selected"
+		]))), 128))])], 8, p));
+	}
+});
+//#endregion
+export { h as default };

package/dist/components/BlessOrgChartNode.js

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

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

@@ -0,0 +1,25 @@
+import { BlessTreeNode } from './tree';
+type __VLS_Props = {
+    node: BlessTreeNode;
+    path: string;
+    selected?: string;
+};
+type __VLS_Slots = {
+    node?: (p: {
+        node: BlessTreeNode;
+        selected: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (node: BlessTreeNode, id: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((node: BlessTreeNode, id: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/BlessOrgChartNode.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, openBlock as c, renderList as l, renderSlot as u, resolveComponent as d, toDisplayString as f, withCtx as p } from "vue";
+//#region src/components/BlessOrgChartNode.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "bless-org__item" }, h = ["aria-pressed"], g = {
+	key: 0,
+	class: "bless-org__icon",
+	"aria-hidden": "true"
+}, _ = { class: "bless-org__label" }, v = {
+	key: 1,
+	class: "bless-org__desc"
+}, y = {
+	key: 0,
+	class: "bless-org__children",
+	role: "list"
+}, b = /*@__PURE__*/ a({
+	name: "BlessOrgChartNode",
+	__name: "BlessOrgChartNode",
+	props: {
+		node: {},
+		path: {},
+		selected: {}
+	},
+	emits: ["select"],
+	setup(a, { emit: b }) {
+		let x = a, S = b, C = () => x.node.id ?? x.path;
+		return (b, x) => {
+			let w = d("BlessOrgChartNode", !0);
+			return c(), r("li", m, [i("button", {
+				type: "button",
+				class: s(["bless-org__node", { "bless-org__node--selected": a.selected === C() }]),
+				"aria-pressed": a.selected === C(),
+				onClick: x[0] ||= (e) => S("select", a.node, C())
+			}, [u(b.$slots, "node", {
+				node: a.node,
+				selected: a.selected === C()
+			}, () => [
+				a.node.icon ? (c(), r("span", g, f(a.node.icon), 1)) : n("", !0),
+				i("span", _, f(a.node.label), 1),
+				a.node.href ? (c(), r("span", v, f(a.node.href), 1)) : n("", !0)
+			])], 10, h), a.node.children?.length ? (c(), r("ul", y, [(c(!0), r(e, null, l(a.node.children, (e, n) => (c(), t(w, {
+				key: e.id ?? n,
+				node: e,
+				path: `${a.path}/${e.id ?? n}`,
+				selected: a.selected,
+				onSelect: x[1] ||= (e, t) => S("select", e, t)
+			}, {
+				node: p((e) => [u(b.$slots, "node", o({ ref_for: !0 }, e))]),
+				_: 3
+			}, 8, [
+				"node",
+				"path",
+				"selected"
+			]))), 128))])) : n("", !0)]);
+		};
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessPagination.css

@@ -0,0 +1 @@
+.bless-pagination__list{align-items:center;gap:var(--bless-space-1);font-family:var(--bless-font-sans);margin:0;padding:0;list-style:none;display:flex}.bless-pagination__btn{border-radius:var(--bless-radius-plate);min-width:36px;height:36px;padding:0 var(--bless-space-2);border:var(--bless-border-width) solid transparent;color:var(--bless-color-text);font:inherit;font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);text-align:center;cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), border-color var(--bless-duration-slow), var(--bless-lean-transition);line-height:34px;text-decoration:none}.bless-pagination__btn:hover:not(:disabled):not(.bless-pagination__btn--current){border-color:var(--bless-color-text)}.bless-pagination__btn--current{cursor:default}.bless-pagination__btn:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-pagination__btn:disabled{opacity:.3;cursor:not-allowed}.bless-pagination__btn--nav{font-size:var(--bless-text-lg)}.bless-pagination__ellipsis{text-align:center;min-width:24px;color:var(--bless-color-text-muted);display:inline-block}

package/dist/components/BlessPagination.js

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