blessing-ui 0.1.0

package/dist/components/BlessMenuList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,148 @@
+import { useLink as e } from "../composables/useLink.js";
+import { logicalKey as t } from "../composables/rtl.js";
+import n from "./BlessKbd.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, openBlock as f, ref as p, renderList as m, resolveComponent as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, withCtx as y, withKeys as b, withModifiers as x } from "vue";
+//#region src/components/BlessMenuList.vue?vue&type=script&setup=true&lang.ts
+var S = {
+	key: 0,
+	class: "bless-menu__sep",
+	role: "separator"
+}, C = {
+	key: 1,
+	class: "bless-menu__label"
+}, w = [
+	"data-sub",
+	"aria-expanded",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+], T = { class: "bless-menu__text" }, E = {
+	class: "bless-menu__mark",
+	"aria-hidden": "true"
+}, D = { class: "bless-menu__text" }, O = /*@__PURE__*/ l({
+	name: "BlessMenuList",
+	__name: "BlessMenuList",
+	props: {
+		items: {},
+		checked: {},
+		radios: {}
+	},
+	emits: ["select", "close"],
+	setup(l, { expose: O, emit: k }) {
+		let A = e(), j = k, M = p(), N = p(null), P = "", F, I = () => Array.from(M.value?.querySelectorAll("[role^=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
+		function L() {
+			d(() => I()[0]?.focus());
+		}
+		function R() {
+			d(() => I().at(-1)?.focus());
+		}
+		function z(e) {
+			if (e.target.closest("[role=\"menu\"]") !== M.value) return;
+			let n = I(), r = n.indexOf(document.activeElement), i = (t) => {
+				e.preventDefault(), n[(t + n.length) % n.length]?.focus();
+			};
+			switch (t(e)) {
+				case "ArrowDown": return i(r + 1);
+				case "ArrowUp": return i(r - 1);
+				case "Home": return i(0);
+				case "End": return i(n.length - 1);
+				case "Escape": return e.preventDefault(), j("close");
+				case "ArrowRight": {
+					let t = Number(document.activeElement?.dataset.sub);
+					Number.isNaN(t) || (e.preventDefault(), N.value = t);
+					return;
+				}
+				case "ArrowLeft":
+					N.value !== null && (e.preventDefault(), N.value = null);
+					return;
+				default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && (P += e.key.toLowerCase(), clearTimeout(F), F = setTimeout(() => P = "", 500), n.find((e) => e.textContent?.trim().toLowerCase().startsWith(P))?.focus());
+			}
+		}
+		function B(e) {
+			"disabled" in e && e.disabled || e.type !== "sub" && e.type !== "separator" && e.type !== "label" && (j("select", e), e.type !== "checkbox" && e.type !== "radio" && j("close"));
+		}
+		return O({
+			focusFirst: L,
+			focusLast: R
+		}), (e, t) => {
+			let d = h("BlessMenuList", !0);
+			return f(), o("div", {
+				ref_key: "root",
+				ref: M,
+				class: "bless-menu",
+				role: "menu",
+				tabindex: "-1",
+				onKeydown: z
+			}, [(f(!0), o(r, null, m(l.items, (e, p) => (f(), o(r, { key: p }, [e.type === "separator" ? (f(), o("div", S)) : e.type === "label" ? (f(), o("div", C, _(e.label), 1)) : e.type === "sub" ? (f(), o("div", {
+				key: 2,
+				class: "bless-menu__item bless-menu__item--sub",
+				role: "menuitem",
+				tabindex: "-1",
+				"data-sub": p,
+				"aria-haspopup": "menu",
+				"aria-expanded": N.value === p,
+				"aria-disabled": e.disabled || void 0,
+				onMouseenter: (t) => !e.disabled && (N.value = p),
+				onClick: (t) => !e.disabled && (N.value = N.value === p ? null : p)
+			}, [
+				s("span", T, _(e.label), 1),
+				t[4] ||= s("span", {
+					class: "bless-menu__chevron",
+					"aria-hidden": "true"
+				}, "›", -1),
+				N.value === p ? (f(), i(d, {
+					key: 0,
+					items: e.items,
+					checked: l.checked,
+					radios: l.radios,
+					class: "bless-menu--sub",
+					onSelect: t[0] ||= (e) => j("select", e),
+					onClose: t[1] ||= (e) => {
+						N.value = null;
+					},
+					onVnodeMounted: t[2] ||= (e) => e.component?.exposed?.focusFirst()
+				}, null, 8, [
+					"items",
+					"checked",
+					"radios"
+				])) : a("", !0)
+			], 40, w)) : (f(), i(g(v(A)("href" in e ? e.href : void 0, void 0, "div").is), u({
+				key: 3,
+				ref_for: !0
+			}, v(A)("href" in e ? e.href : void 0, void 0, "div").attrs, {
+				class: ["bless-menu__item", { "bless-menu__item--danger": "danger" in e && e.danger }],
+				role: e.type === "checkbox" ? "menuitemcheckbox" : e.type === "radio" ? "menuitemradio" : "menuitem",
+				tabindex: "-1",
+				"aria-checked": e.type === "checkbox" ? !!l.checked?.[e.value] : e.type === "radio" ? l.radios?.[e.group] === e.value : void 0,
+				"aria-disabled": e.disabled || void 0,
+				onClick: (t) => B(e),
+				onKeydown: b(x((t) => B(e), ["prevent"]), ["enter", "space"]),
+				onMouseenter: t[3] ||= (e) => {
+					N.value = null, e.currentTarget.focus();
+				}
+			}), {
+				default: y(() => [
+					s("span", E, [e.type === "checkbox" ? (f(), o(r, { key: 0 }, [c(_(l.checked?.[e.value] ? "✓" : ""), 1)], 64)) : e.type === "radio" ? (f(), o(r, { key: 1 }, [c(_(l.radios?.[e.group] === e.value ? "●" : ""), 1)], 64)) : "icon" in e && e.icon ? (f(), o(r, { key: 2 }, [c(_(e.icon), 1)], 64)) : a("", !0)]),
+					s("span", D, _(e.label), 1),
+					"shortcut" in e && e.shortcut ? (f(), i(n, {
+						key: 0,
+						class: "bless-menu__shortcut"
+					}, {
+						default: y(() => [c(_(e.shortcut), 1)]),
+						_: 2
+					}, 1024)) : a("", !0)
+				]),
+				_: 2
+			}, 1040, [
+				"class",
+				"role",
+				"aria-checked",
+				"aria-disabled",
+				"onClick",
+				"onKeydown"
+			]))], 64))), 128))], 544);
+		};
+	}
+});
+//#endregion
+export { O as default };

package/dist/components/BlessMenubar.css

@@ -0,0 +1 @@
+.bless-menubar{border-radius:var(--bless-radius);gap:var(--bless-space-1);padding:var(--bless-space-1);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);font-family:var(--bless-font-sans);display:inline-flex}.bless-menubar .bless-dropdown__anchor>*{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;background:0 0;border:0}.bless-menubar .bless-dropdown__anchor>:hover{background:var(--bless-color-surface);color:var(--bless-color-text)}.bless-menubar .bless-dropdown__anchor[aria-expanded=true]>*{background:var(--bless-color-surface);color:var(--bless-color-accent-text)}.bless-menubar .bless-dropdown__anchor>:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}

package/dist/components/BlessMenubar.js

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

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    label?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/BlessMenubar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { menubarKey as e } from "./menu.js";
+import { createElementBlock as t, defineComponent as n, onMounted as r, openBlock as i, provide as a, ref as o, renderSlot as s } from "vue";
+//#region src/components/BlessMenubar.vue?vue&type=script&setup=true&lang.ts
+var c = ["aria-label"], l = /*@__PURE__*/ n({
+	name: "BlessMenubar",
+	__name: "BlessMenubar",
+	props: { label: {} },
+	setup(n) {
+		let l = o([]), u = o(null), d = o(), f = () => Array.from(d.value?.querySelectorAll("[aria-haspopup=\"menu\"][aria-controls]") ?? []);
+		function p(e) {
+			let t = f(), n = e && t.includes(e) ? e : t[0];
+			for (let e of t) e.tabIndex = e === n ? 0 : -1;
+		}
+		return r(() => p()), a(e, {
+			register: (e, t, n) => l.value.push({
+				id: e,
+				open: t,
+				close: n
+			}),
+			unregister: (e) => l.value = l.value.filter((t) => t.id !== e),
+			active: u,
+			focusNext: (e, t) => {
+				let n = l.value.findIndex((t) => t.id === e), r = l.value[(n + t + l.value.length) % l.value.length];
+				if (!r) return;
+				let i = u.value === e;
+				l.value[n]?.close(), (d.value?.querySelector(`[aria-controls="${r.id}"]`))?.focus(), i && r.open();
+			}
+		}), (e, r) => (i(), t("nav", {
+			ref_key: "root",
+			ref: d,
+			class: "bless-menubar",
+			"aria-label": n.label,
+			onFocusin: r[0] ||= (e) => p(e.target)
+		}, [s(e.$slots, "default")], 40, c));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BlessMessage.css

@@ -0,0 +1 @@
+.bless-message__sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-message{align-items:flex-start;gap:var(--bless-space-2);font-family:var(--bless-font-sans);color:var(--bless-color-text);display:flex}.bless-message--end{flex-direction:row-reverse}.bless-message--compact{padding-inline-start:calc(32px + var(--bless-space-2))}.bless-message--end.bless-message--compact{padding-inline-start:0;padding-inline-end:calc(32px + var(--bless-space-2))}.bless-message__avatar{flex:none}.bless-message__body{gap:var(--bless-space-1);flex-direction:column;min-width:0;max-width:min(100%,65ch);display:flex}.bless-message--end .bless-message__body{align-items:flex-end}.bless-message__header{gap:var(--bless-space-2);font-size:var(--bless-text-xs);letter-spacing:var(--bless-tracking-wide);align-items:baseline;display:flex}.bless-message__header time{color:var(--bless-color-text-muted)}.bless-message__content{gap:var(--bless-space-1);flex-direction:column;display:flex}.bless-message--end .bless-message__content{align-items:flex-end}.bless-message__footer{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}.bless-message__actions{gap:var(--bless-space-1);opacity:0;transition:opacity var(--bless-duration-base);align-self:center;display:inline-flex}.bless-message:hover .bless-message__actions,.bless-message:focus-within .bless-message__actions{opacity:1}

package/dist/components/BlessMessage.js

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

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

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    /** sender name, shown in header and used for avatar initials */
+    name?: string;
+    /** timestamp / meta text in header */
+    time?: string;
+    /** machine-readable form of `time` for the <time> element */
+    datetime?: string;
+    avatar?: string;
+    /** start = other party, end = self */
+    align?: "start" | "end";
+    /** hide avatar column (consecutive messages in a group) */
+    compact?: boolean;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    avatar?: (props: typeof __VLS_1) => any;
+} & {
+    header?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    footer?: (props: typeof __VLS_12) => any;
+} & {
+    actions?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    align: "start" | "end";
+}, {}, {}, {}, 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/BlessMessage.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import e from "./BlessAvatar.js";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l } from "vue";
+//#region src/components/BlessMessage.vue?vue&type=script&setup=true&lang.ts
+var u = {
+	key: 0,
+	class: "bless-message__avatar"
+}, d = { class: "bless-message__body" }, f = {
+	key: 0,
+	class: "bless-message__header"
+}, p = { key: 0 }, m = ["datetime"], h = {
+	key: 1,
+	class: "bless-message__sr"
+}, g = { class: "bless-message__content" }, _ = {
+	key: 2,
+	class: "bless-message__footer"
+}, v = {
+	key: 1,
+	class: "bless-message__actions"
+}, y = /*@__PURE__*/ a({
+	name: "BlessMessage",
+	__name: "BlessMessage",
+	props: {
+		name: {},
+		time: {},
+		datetime: {},
+		avatar: {},
+		align: { default: "start" },
+		compact: { type: Boolean }
+	},
+	setup(a) {
+		return (y, b) => (s(), n("article", { class: o(["bless-message", [`bless-message--${a.align}`, { "bless-message--compact": a.compact }]]) }, [
+			a.compact ? t("", !0) : (s(), n("span", u, [c(y.$slots, "avatar", {}, () => [i(e, {
+				src: a.avatar,
+				name: a.name,
+				size: "sm"
+			}, null, 8, ["src", "name"])])])),
+			r("div", d, [
+				!a.compact && (a.name || a.time || y.$slots.header) ? (s(), n("header", f, [c(y.$slots, "header", {}, () => [a.name ? (s(), n("strong", p, l(a.name), 1)) : t("", !0), a.time ? (s(), n("time", {
+					key: 1,
+					datetime: a.datetime
+				}, l(a.time), 9, m)) : t("", !0)])])) : t("", !0),
+				a.compact && a.name ? (s(), n("span", h, l(a.name), 1)) : t("", !0),
+				r("div", g, [c(y.$slots, "default")]),
+				y.$slots.footer ? (s(), n("footer", _, [c(y.$slots, "footer")])) : t("", !0)
+			]),
+			y.$slots.actions ? (s(), n("span", v, [c(y.$slots, "actions")])) : t("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/BlessMessageScroller.css

@@ -0,0 +1 @@
+.bless-message-scroller{height:var(--_h);position:relative}.bless-message-scroller__viewport{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--bless-color-text-muted) transparent;height:100%;overflow-y:auto}.bless-message-scroller__content{gap:var(--bless-space-3);padding:var(--bless-space-3);overflow-anchor:none;flex-direction:column;display:flex}.bless-message-scroller__jump{border-radius:var(--bless-radius-petal);bottom:var(--bless-space-3);width:max-content;box-shadow:var(--bless-shadow-plate);margin-inline:auto;position:absolute;inset-inline:0}.bless-message-scroller__fade-enter-active,.bless-message-scroller__fade-leave-active{transition:opacity var(--bless-duration-base)}.bless-message-scroller__fade-enter-from,.bless-message-scroller__fade-leave-to{opacity:0}

package/dist/components/BlessMessageScroller.js

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

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

@@ -0,0 +1,49 @@
+type __VLS_Props = {
+    /** px from bottom still counted as "at bottom" */
+    threshold?: number;
+    /** px from top that fires `reach-top` (history load) */
+    topThreshold?: number;
+    /** where to open: latest message or top of transcript */
+    initial?: "bottom" | "top";
+    jumpLabel?: string;
+    height?: string;
+    /** names the transcript */
+    label?: string;
+};
+declare function scrollToBottom(behavior?: ScrollBehavior): void;
+/** scroll a message into view by its element id */
+declare function scrollTo(id: string, behavior?: ScrollBehavior): void;
+declare function loadHistory(insert: () => void | Promise<void>): Promise<void>;
+declare var __VLS_1: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    jump?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    scrollToBottom: typeof scrollToBottom;
+    scrollTo: typeof scrollTo;
+    loadHistory: typeof loadHistory;
+    atBottom: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "reach-top": () => any;
+    "at-bottom": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onReach-top"?: (() => any) | undefined;
+    "onAt-bottom"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    initial: "bottom" | "top";
+    height: string;
+    threshold: number;
+    topThreshold: number;
+    jumpLabel: 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/BlessMessageScroller.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import e from "./BlessButton.js";
+import { scrollBehavior as t } from "../composables/useMedia.js";
+import { Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, nextTick as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, withCtx as v } from "vue";
+//#region src/components/BlessMessageScroller.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-label"], b = /*@__PURE__*/ l({
+	name: "BlessMessageScroller",
+	__name: "BlessMessageScroller",
+	props: {
+		threshold: { default: 48 },
+		topThreshold: { default: 80 },
+		initial: { default: "bottom" },
+		jumpLabel: { default: "Latest" },
+		height: { default: "400px" },
+		label: { default: "Messages" }
+	},
+	emits: ["reach-top", "at-bottom"],
+	setup(l, { expose: b, emit: x }) {
+		let S = l, C = x, w = h(), T = h(), E = h(!0), D = !0;
+		function O() {
+			let e = w.value, t = E.value;
+			E.value = e.scrollHeight - e.scrollTop - e.clientHeight <= S.threshold, t !== E.value && C("at-bottom", E.value), e.scrollHeight > e.clientHeight && e.scrollTop <= S.topThreshold ? D && (D = !1, C("reach-top")) : D = !0;
+		}
+		function k(e = "auto") {
+			let n = w.value;
+			n && n.scrollTo({
+				top: n.scrollHeight,
+				behavior: t(e)
+			});
+		}
+		function A() {
+			k("smooth"), w.value?.focus({ preventScroll: !0 });
+		}
+		function j(e, n = "smooth") {
+			w.value?.querySelector(`#${CSS.escape(e)}`)?.scrollIntoView?.({
+				behavior: t(n),
+				block: "start"
+			});
+		}
+		async function M(e) {
+			let t = w.value, n = t.scrollHeight;
+			await e(), await u(), t.scrollTop += t.scrollHeight - n, D = !0;
+		}
+		let N;
+		return p(() => {
+			S.initial === "bottom" && k(), E.value = S.initial === "bottom", N = new ResizeObserver(() => {
+				E.value && k();
+			}), T.value && N.observe(T.value);
+		}), f(() => N?.disconnect()), b({
+			scrollToBottom: k,
+			scrollTo: j,
+			loadHistory: M,
+			atBottom: E
+		}), (t, u) => (m(), a("div", {
+			class: "bless-message-scroller",
+			style: d({ "--_h": l.height })
+		}, [o("div", {
+			ref_key: "viewport",
+			ref: w,
+			class: "bless-message-scroller__viewport",
+			tabindex: "0",
+			role: "log",
+			"aria-label": l.label,
+			onScrollPassive: O
+		}, [o("div", {
+			ref_key: "content",
+			ref: T,
+			class: "bless-message-scroller__content"
+		}, [g(t.$slots, "default")], 512)], 40, y), c(n, { name: "bless-message-scroller__fade" }, {
+			default: v(() => [E.value ? i("", !0) : (m(), r(e, {
+				key: 0,
+				size: "sm",
+				class: "bless-message-scroller__jump",
+				onClick: A
+			}, {
+				default: v(() => [g(t.$slots, "jump", {}, () => [u[0] ||= o("span", { "aria-hidden": "true" }, "↓ ", -1), s(_(l.jumpLabel), 1)])]),
+				_: 3
+			}))]),
+			_: 3
+		})], 4));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessMeterGroup.css

@@ -0,0 +1 @@
+.bless-metergroup{gap:var(--bless-space-2);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-metergroup--vertical{flex-direction:row;align-items:stretch}.bless-metergroup__bar{border-radius:var(--bless-radius);background:var(--bless-color-surface);height:10px;transform:skewX(var(--bless-skew));display:flex;overflow:hidden}.bless-metergroup--vertical .bless-metergroup__bar{flex-direction:column;width:10px;height:auto;min-height:120px;transform:none}.bless-metergroup__seg{flex:0 0 var(--_p);transition:flex-basis var(--bless-duration-slow) var(--bless-ease-out)}.bless-metergroup__legend{gap:var(--bless-space-1) var(--bless-space-4);font-size:var(--bless-text-xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.bless-metergroup--vertical .bless-metergroup__legend{flex-direction:column}.bless-metergroup__legend>li{align-items:center;gap:var(--bless-space-2);display:inline-flex}.bless-metergroup__legend>li:before{content:"";background:var(--_c);width:10px;height:10px;transform:skewX(var(--bless-skew))}.bless-metergroup__name{font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide)}.bless-metergroup__val{color:var(--bless-color-text-muted)}

package/dist/components/BlessMeterGroup.js

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

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

@@ -0,0 +1,35 @@
+export interface BlessMeterSegment {
+    label: string;
+    value: number;
+    /** token colour name or any CSS colour */
+    color?: string;
+}
+type __VLS_Props = {
+    segments: BlessMeterSegment[];
+    max?: number;
+    label?: string;
+    /** show the legend */
+    legend?: boolean;
+    format?: (v: number) => string;
+    orientation?: "horizontal" | "vertical";
+};
+declare var __VLS_1: {
+    segment: BlessMeterSegment;
+    percent: number;
+};
+type __VLS_Slots = {} & {
+    legend?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    legend: boolean;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, 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/BlessMeterGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderList as l, renderSlot as u, toDisplayString as d } from "vue";
+//#region src/components/BlessMeterGroup.vue?vue&type=script&setup=true&lang.ts
+var f = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-valuemax"
+], p = ["title"], m = {
+	key: 0,
+	role: "list",
+	class: "bless-metergroup__legend"
+}, h = { class: "bless-metergroup__name" }, g = { class: "bless-metergroup__val" }, _ = /*@__PURE__*/ a({
+	name: "BlessMeterGroup",
+	__name: "BlessMeterGroup",
+	props: {
+		segments: {},
+		max: {},
+		label: { default: "Usage" },
+		legend: {
+			type: Boolean,
+			default: !0
+		},
+		format: {},
+		orientation: { default: "horizontal" }
+	},
+	setup(a) {
+		let _ = a, v = [
+			"chart-1",
+			"chart-2",
+			"chart-3",
+			"chart-4",
+			"chart-5"
+		], y = t(() => _.max ?? _.segments.reduce((e, t) => e + t.value, 0)), b = (e, t) => {
+			let n = e.color ?? v[t % v.length];
+			return /^[a-z0-9-]+$/i.test(n) ? `var(--bless-color-${n})` : n;
+		}, x = (e) => y.value ? e.value / y.value * 100 : 0, S = (e) => (_.format ?? String)(e), C = t(() => _.segments.reduce((e, t) => e + t.value, 0)), w = t(() => _.max == null ? S(C.value) : `${S(C.value)} of ${S(_.max)}`);
+		return (t, _) => (c(), r("div", { class: o(["bless-metergroup", `bless-metergroup--${a.orientation}`]) }, [i("div", {
+			class: "bless-metergroup__bar",
+			role: "meter",
+			"aria-label": a.label,
+			"aria-valuenow": C.value,
+			"aria-valuetext": w.value,
+			"aria-valuemin": "0",
+			"aria-valuemax": y.value
+		}, [(c(!0), r(e, null, l(a.segments, (e, t) => (c(), r("span", {
+			key: e.label,
+			class: "bless-metergroup__seg",
+			style: s({
+				"--_p": `${x(e)}%`,
+				background: b(e, t)
+			}),
+			title: `${e.label}: ${S(e.value)}`,
+			"aria-hidden": "true"
+		}, null, 12, p))), 128))], 8, f), a.legend ? (c(), r("ul", m, [(c(!0), r(e, null, l(a.segments, (e, n) => (c(), r("li", {
+			key: e.label,
+			style: s({ "--_c": b(e, n) })
+		}, [u(t.$slots, "legend", {
+			segment: e,
+			percent: x(e)
+		}, () => [i("span", h, d(e.label), 1), i("span", g, d(S(e.value)) + " · " + d(x(e).toFixed(0)) + "%", 1)])], 4))), 128))])) : n("", !0)], 2));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/BlessMockup.css

@@ -0,0 +1 @@
+.bless-mockup{--_frame:var(--bless-color-surface);--_fg:var(--bless-color-text-muted);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--_frame);font-family:var(--bless-font-sans);flex-direction:column;display:flex;overflow:hidden}.bless-mockup--dark{--_frame:var(--bless-color-media-bg);--_fg:#9aa4ad;--_title:#e8e9ea}.bless-mockup__chrome{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-3);color:var(--_fg);display:flex}.bless-mockup__dots{gap:5px;display:inline-flex}.bless-mockup__dots i{opacity:.5;width:10px;height:10px;transform:skewX(var(--bless-skew));background:currentColor}.bless-mockup__title{padding:2px var(--bless-space-3);background:color-mix(in srgb, var(--_fg) 12%, transparent);color:var(--_title,var(--bless-color-text));font-size:var(--bless-text-xs);text-align:center;text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.bless-mockup--window .bless-mockup__title{text-align:start;font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);background:0 0}.bless-mockup__screen{background:var(--bless-color-bg);min-height:120px;color:var(--bless-color-text);flex:1;overflow:auto}.bless-mockup__screen>img,.bless-mockup__screen>video{width:100%;display:block}.bless-mockup--browser .bless-mockup__screen,.bless-mockup--window .bless-mockup__screen{border-top:var(--bless-border-width) solid var(--bless-color-border)}.bless-mockup--phone{aspect-ratio:9/19;border-width:2px;border-radius:28px;width:300px;padding:10px}.bless-mockup--phone .bless-mockup__chrome{justify-content:center;padding:0 0 6px}.bless-mockup__notch{background:var(--_fg);opacity:.5;border-radius:4px;width:90px;height:8px}.bless-mockup--phone .bless-mockup__screen{border-radius:18px}.bless-mockup__home{background:var(--_fg);opacity:.5;border-radius:2px;width:100px;height:4px;margin:8px auto 0}

package/dist/components/BlessMockup.js

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

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    type?: "browser" | "phone" | "window";
+    /** address bar text (browser) or title (window) */
+    title?: string;
+    /** frame colour */
+    dark?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    type: "browser" | "phone" | "window";
+}, {}, {}, {}, 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/BlessMockup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
+//#region src/components/BlessMockup.vue?vue&type=script&setup=true&lang.ts
+var l = {
+	class: "bless-mockup__chrome",
+	"aria-hidden": "true"
+}, u = {
+	key: 0,
+	class: "bless-mockup__title"
+}, d = {
+	key: 1,
+	class: "bless-mockup__notch"
+}, f = { class: "bless-mockup__screen" }, p = {
+	key: 0,
+	class: "bless-mockup__home",
+	"aria-hidden": "true"
+}, m = /*@__PURE__*/ i({
+	name: "BlessMockup",
+	__name: "BlessMockup",
+	props: {
+		type: { default: "browser" },
+		title: { default: "" },
+		dark: { type: Boolean }
+	},
+	setup(i) {
+		return (m, h) => (o(), n("div", { class: a(["bless-mockup", [`bless-mockup--${i.type}`, { "bless-mockup--dark": i.dark }]]) }, [
+			r("div", l, [i.type === "phone" ? (o(), n("span", d)) : (o(), n(e, { key: 0 }, [h[0] ||= r("span", { class: "bless-mockup__dots" }, [
+				r("i"),
+				r("i"),
+				r("i")
+			], -1), i.title ? (o(), n("span", u, c(i.title), 1)) : t("", !0)], 64))]),
+			r("div", f, [s(m.$slots, "default")]),
+			i.type === "phone" ? (o(), n("div", p)) : t("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { m as default };

package/dist/components/BlessModal.css

@@ -0,0 +1 @@
+.bless-modal{border-radius:var(--bless-radius);color:var(--bless-color-text);font-family:var(--bless-font-sans);background:0 0;border:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;overflow:hidden}.bless-modal[open]{place-items:center;display:grid}.bless-modal::backdrop{background:var(--bless-color-backdrop)}.bless-modal__panel{box-sizing:border-box;width:min(100% - 2 * var(--bless-space-4), var(--_w,640px));max-height:calc(100dvh - 2 * var(--bless-space-4));background:var(--bless-color-bg);box-shadow:var(--bless-shadow-plate);animation:bless-modal-in var(--bless-duration-slow) var(--bless-ease-out);outline:0;position:relative;overflow:auto}.bless-modal--sm{--_w:400px}.bless-modal--lg{--_w:960px}.bless-modal--full .bless-modal__panel{width:100%;height:100%;max-height:none}.bless-modal__close{top:var(--bless-space-2);z-index:1;background:var(--bless-color-text);width:40px;height:40px;color:var(--bless-color-on-text);font-size:var(--bless-text-lg);cursor:pointer;transform:skewX(var(--bless-skew));transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);border:0;padding:0;line-height:1;position:absolute;inset-inline-end:var(--bless-space-2)}.bless-modal__close>span{transform:skewX(var(--bless-skew-counter));display:inline-block}.bless-modal__close:hover{opacity:var(--bless-hover-opacity)}.bless-modal__close:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-modal__header{padding:var(--bless-space-6) var(--bless-space-16) 0 var(--bless-space-6)}.bless-modal__title{font-size:var(--bless-text-lg);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);line-height:var(--bless-leading-none);text-transform:uppercase;color:var(--bless-color-text);border:0;margin:0}.bless-modal__body{padding:var(--bless-space-6)}.bless-modal__footer{padding:var(--bless-space-4) var(--bless-space-6);border-top:var(--bless-border-width) solid var(--bless-color-border);gap:var(--bless-space-2);justify-content:flex-end;display:flex}@keyframes bless-modal-in{0%{opacity:0;transform:translateY(var(--bless-space-3))}}@media (prefers-reduced-motion:reduce){.bless-modal__panel{animation:none}}