blessing-ui 0.1.0

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    as?: string;
+    /** skewed header label */
+    label?: string;
+    labelColor?: "text" | "accent" | "danger" | "surface";
+    surface?: "bg" | "surface";
+    bordered?: boolean;
+    /** whole card is a link */
+    href?: string;
+};
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_14) => any;
+} & {
+    media?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+} & {
+    footer?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    surface: "bg" | "surface";
+    as: string;
+    labelColor: "text" | "accent" | "danger" | "surface";
+    bordered: 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/BlessCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import e from "./BlessSkew.js";
+import { useLink as t } from "../composables/useLink.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeProps as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+//#region src/components/BlessCard.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 1,
+	class: "bless-card__media"
+}, g = { class: "bless-card__body" }, _ = {
+	key: 2,
+	class: "bless-card__footer"
+}, v = /*@__PURE__*/ s({
+	name: "BlessCard",
+	__name: "BlessCard",
+	props: {
+		as: { default: "div" },
+		label: {},
+		labelColor: { default: "text" },
+		surface: { default: "bg" },
+		bordered: {
+			type: Boolean,
+			default: !0
+		},
+		href: {}
+	},
+	setup(s) {
+		let v = t();
+		return (t, y) => (l(), n(d(p(v)(s.href, void 0, s.as).is), c(p(v)(s.href, void 0, s.as).attrs, { class: ["bless-card", [`bless-card--${s.surface}`, {
+			"bless-card--bordered": s.bordered,
+			"bless-card--link": s.href
+		}]] }), {
+			default: m(() => [
+				s.label || t.$slots.label ? (l(), n(e, {
+					key: 0,
+					color: s.labelColor,
+					class: "bless-card__label"
+				}, {
+					default: m(() => [u(t.$slots, "label", {}, () => [o(f(s.label), 1)])]),
+					_: 3
+				}, 8, ["color"])) : r("", !0),
+				t.$slots.media ? (l(), i("div", h, [u(t.$slots, "media")])) : r("", !0),
+				a("div", g, [u(t.$slots, "default")]),
+				t.$slots.footer ? (l(), i("div", _, [u(t.$slots, "footer")])) : r("", !0)
+			]),
+			_: 3
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/BlessCarousel.css

@@ -0,0 +1 @@
+.bless-carousel{outline:0;position:relative}.bless-carousel__track:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:4px}.bless-carousel__track{grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--_pv) - 1) * var(--_gap)) / var(--_pv));column-gap:var(--_gap);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;display:grid;overflow-x:auto}.bless-carousel__track::-webkit-scrollbar{display:none}.bless-carousel__track>*{scroll-snap-align:start;min-width:0}.bless-carousel__arrow{border-radius:var(--bless-radius);background:var(--bless-color-text);width:40px;height:48px;color:var(--bless-color-on-text);font-size:var(--bless-text-xl);cursor:pointer;transform:translateY(-50%) 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;top:50%}.bless-carousel__arrow>span{transform:skewX(var(--bless-skew-counter));display:inline-block}[dir=rtl] .bless-carousel__arrow>span{transform:skewX(var(--bless-skew-counter)) scaleX(-1)}.bless-carousel__arrow--prev{inset-inline-start:var(--bless-space-2)}.bless-carousel__arrow--next{inset-inline-end:var(--bless-space-2)}.bless-carousel__arrow:hover:not([aria-disabled]){opacity:var(--bless-hover-opacity)}.bless-carousel__arrow[aria-disabled]{opacity:.2;cursor:not-allowed}.bless-carousel__arrow:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-carousel__sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-carousel__pause{top:var(--bless-space-2);background:var(--bless-color-text);width:32px;height:32px;color:var(--bless-color-on-text);font-size:var(--bless-text-xs);cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);border:0;position:absolute;inset-inline-end:var(--bless-space-2)}.bless-carousel__pause:hover{opacity:var(--bless-hover-opacity)}.bless-carousel__pause[aria-pressed=true]{background:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-carousel__pause:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-carousel__dots{justify-content:center;gap:var(--bless-space-2);margin-top:var(--bless-space-3);display:flex}.bless-carousel__dot{background:var(--bless-color-border);cursor:pointer;width:18px;height:4px;transform:skewX(var(--bless-skew));transition:background var(--bless-duration-base), var(--bless-lean-transition);border:0;padding:0}.bless-carousel__dot--active{background:var(--bless-color-accent)}.bless-carousel__dot:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}

package/dist/components/BlessCarousel.js

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

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

@@ -0,0 +1,52 @@
+type __VLS_Props = {
+    /** slides per view; fractional ok (1.2 = peek) */
+    perView?: number;
+    gap?: string;
+    loop?: boolean;
+    /** ms; 0 = off */
+    autoplay?: number;
+    dots?: boolean;
+    arrows?: boolean;
+    label?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+    /** the autoplay button's name; its pressed state says whether it's paused */
+    pauseLabel?: string;
+};
+declare function go(i: number, smooth?: boolean): void;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    go: typeof go;
+    next: () => void;
+    prev: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    label: string;
+    loop: boolean;
+    prevLabel: string;
+    nextLabel: string;
+    perView: number;
+    gap: string;
+    autoplay: number;
+    dots: boolean;
+    arrows: boolean;
+    pauseLabel: 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/BlessCarousel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,147 @@
+import { reducedMotion as e, scrollBehavior as t } from "../composables/useMedia.js";
+import { logicalKey as n } from "../composables/rtl.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, useModel as y, watch as b } from "vue";
+//#region src/components/BlessCarousel.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-label"], S = ["aria-label", "aria-disabled"], C = ["aria-label", "aria-disabled"], w = {
+	key: 1,
+	class: "bless-carousel__dots",
+	role: "group",
+	"aria-label": "Slides"
+}, T = [
+	"aria-current",
+	"aria-label",
+	"onClick"
+], E = ["aria-label", "aria-pressed"], D = { "aria-hidden": "true" }, O = ["aria-live"], k = /*@__PURE__*/ c({
+	name: "BlessCarousel",
+	__name: "BlessCarousel",
+	props: /*@__PURE__*/ l({
+		perView: { default: 1 },
+		gap: { default: "var(--bless-space-3)" },
+		loop: {
+			type: Boolean,
+			default: !1
+		},
+		autoplay: { default: 0 },
+		dots: {
+			type: Boolean,
+			default: !0
+		},
+		arrows: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Carousel" },
+		prevLabel: { default: "Previous slide" },
+		nextLabel: { default: "Next slide" },
+		pauseLabel: { default: "Pause slides" }
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(c, { expose: l }) {
+		let k = c, A = y(c, "modelValue"), j = h(), M = h(0), N, P, F = !1, I = i(() => Math.max(1, Math.ceil(M.value - k.perView + 1))), L = i(() => k.loop || A.value > 0), R = i(() => k.loop || A.value < I.value - 1);
+		function z() {
+			let e = j.value;
+			if (!e) return 0;
+			let t = e.firstElementChild;
+			return t ? t.offsetWidth + parseFloat(getComputedStyle(e).columnGap || "0") : e.clientWidth;
+		}
+		let B = () => j.value && getComputedStyle(j.value).direction === "rtl" ? -1 : 1;
+		function V(e, n = !0) {
+			let r = I.value, i = k.loop ? (e % r + r) % r : Math.max(0, Math.min(r - 1, e));
+			A.value = i, F = !0, j.value?.scrollTo({
+				left: B() * i * z(),
+				behavior: n ? t() : "auto"
+			}), setTimeout(() => F = !1, 400);
+		}
+		function H() {
+			if (F || !j.value) return;
+			let e = Math.round(Math.abs(j.value.scrollLeft) / (z() || 1));
+			e !== A.value && (A.value = e);
+		}
+		function U() {
+			M.value = j.value?.children.length ?? 0;
+		}
+		function W(e) {
+			n(e) === "ArrowLeft" && (e.preventDefault(), V(A.value - 1)), n(e) === "ArrowRight" && (e.preventDefault(), V(A.value + 1));
+		}
+		let G, K = h(!1);
+		function q() {
+			J(), k.autoplay > 0 && !K.value && !e() && (P = setInterval(() => V(A.value + 1), k.autoplay));
+		}
+		function J() {
+			clearInterval(P);
+		}
+		p(() => {
+			U(), N = new ResizeObserver(() => V(A.value, !1)), j.value && N.observe(j.value), G = new MutationObserver(U), G.observe(j.value, { childList: !0 }), q();
+		}), f(() => {
+			J(), N?.disconnect(), G?.disconnect();
+		}), b(() => k.autoplay, q);
+		function Y() {
+			K.value = !K.value, K.value ? J() : q();
+		}
+		return l({
+			go: V,
+			next: () => V(A.value + 1),
+			prev: () => V(A.value - 1)
+		}), (e, t) => (m(), o("div", {
+			class: "bless-carousel",
+			role: "region",
+			"aria-label": c.label,
+			"aria-roledescription": "carousel",
+			onKeydown: W,
+			onMouseenter: J,
+			onMouseleave: q,
+			onFocusin: J,
+			onFocusout: q
+		}, [
+			s("div", {
+				ref_key: "track",
+				ref: j,
+				class: "bless-carousel__track",
+				tabindex: "0",
+				style: d({
+					"--_pv": c.perView,
+					"--_gap": c.gap
+				}),
+				onScrollPassive: H
+			}, [_(e.$slots, "default")], 36),
+			c.arrows && M.value > c.perView ? (m(), o(r, { key: 0 }, [s("button", {
+				type: "button",
+				class: "bless-carousel__arrow bless-carousel__arrow--prev",
+				"aria-label": c.prevLabel,
+				"aria-disabled": !L.value || void 0,
+				onClick: t[0] ||= (e) => L.value && V(A.value - 1)
+			}, [...t[2] ||= [s("span", { "aria-hidden": "true" }, "‹", -1)]], 8, S), s("button", {
+				type: "button",
+				class: "bless-carousel__arrow bless-carousel__arrow--next",
+				"aria-label": c.nextLabel,
+				"aria-disabled": !R.value || void 0,
+				onClick: t[1] ||= (e) => R.value && V(A.value + 1)
+			}, [...t[3] ||= [s("span", { "aria-hidden": "true" }, "›", -1)]], 8, C)], 64)) : a("", !0),
+			c.dots && I.value > 1 ? (m(), o("div", w, [(m(!0), o(r, null, g(I.value, (e) => (m(), o("button", {
+				key: e,
+				type: "button",
+				class: u(["bless-carousel__dot", { "bless-carousel__dot--active": e - 1 === A.value }]),
+				"aria-current": e - 1 === A.value || void 0,
+				"aria-label": `Slide ${e}`,
+				onClick: (t) => V(e - 1)
+			}, null, 10, T))), 128))])) : a("", !0),
+			c.autoplay > 0 ? (m(), o("button", {
+				key: 2,
+				type: "button",
+				class: "bless-carousel__pause",
+				"aria-label": c.pauseLabel,
+				"aria-pressed": K.value,
+				onClick: Y
+			}, [s("span", D, v(K.value ? "▶" : "❚❚"), 1)], 8, E)) : a("", !0),
+			s("span", {
+				class: "bless-carousel__sr",
+				"aria-live": c.autoplay > 0 && !K.value ? "off" : "polite"
+			}, v(c.label) + ": " + v(A.value + 1) + " / " + v(I.value), 9, O)
+		], 40, x));
+	}
+});
+//#endregion
+export { k as default };

package/dist/components/BlessCascadeSelect.css

@@ -0,0 +1 @@
+.bless-cascade__trigger{border-radius:var(--bless-radius-plate);--_h:40px;align-items:center;gap:var(--bless-space-2);min-width:200px;height:var(--_h);padding:0 var(--bless-space-3);border:0;border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);color:var(--bless-color-text);font:inherit;font-family:var(--bless-font-sans);text-align:start;cursor:pointer;background:0 0;display:inline-flex}.bless-cascade__trigger--sm{--_h:32px;font-size:var(--bless-text-sm)}.bless-cascade__trigger--lg{--_h:48px;font-size:var(--bless-text-lg)}.bless-cascade__trigger:focus-visible{border-bottom-color:var(--bless-color-accent-text);outline:0}.bless-cascade__trigger--empty .bless-cascade__text{color:var(--bless-color-text-muted)}.bless-cascade__trigger--invalid{border-bottom-color:var(--bless-color-danger)}.bless-cascade__trigger:disabled{opacity:.4;cursor:not-allowed}.bless-cascade__text{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.bless-cascade__chevron{border-inline-end:2px solid;border-bottom:2px solid;width:8px;height:8px;transform:translateY(-2px)rotate(45deg)}.bless-cascade .bless-popover{padding:0}.bless-cascade__panel{outline:0;display:flex}.bless-cascade__panel:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-cascade__col{min-width:160px;max-height:280px;padding:var(--bless-space-1) 0;scrollbar-width:thin;overflow-y:auto}.bless-cascade__col+.bless-cascade__col{border-inline-start:var(--bless-border-width) solid var(--bless-color-border)}.bless-cascade__option{align-items:center;gap:var(--bless-space-2);padding:var(--bless-space-2) var(--bless-space-3);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-cascade__option--active,.bless-cascade__option--open{background:var(--bless-color-surface)}.bless-cascade__option--selected{color:var(--bless-color-accent-text);font-weight:var(--bless-font-weight-bold)}.bless-cascade__option--disabled{opacity:.4;cursor:not-allowed}.bless-cascade__label{flex:1}.bless-cascade__more{color:var(--bless-color-text-muted)}[dir=rtl] .bless-cascade__more{transform:scaleX(-1)}.bless-cascade__trigger{transform:skewX(var(--bless-skew));padding-inline:calc(var(--bless-space-3) + 4px)}.bless-cascade__trigger>*{transform:skewX(var(--bless-skew-counter))}.bless-cascade__trigger>.bless-cascade__chevron{transform:skewX(var(--bless-skew-counter)) translateY(-2px) rotate(45deg)}

package/dist/components/BlessCascadeSelect.js

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

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

@@ -0,0 +1,36 @@
+import { BlessCascadeOption } from './cascade';
+declare const __VLS_export: <T extends string | number>(__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<({
+        options: BlessCascadeOption<T>[];
+        placeholder?: string;
+        /** show the full path in the trigger (A › B › C) or only the leaf */
+        showPath?: boolean;
+        separator?: string;
+        disabled?: boolean;
+        invalid?: boolean;
+        /** accessible name when there is no visible label; the shown value is announced either way */
+        label?: string;
+        id?: string;
+        size?: "sm" | "md" | "lg";
+    } & {
+        modelValue?: T | undefined;
+    }) & {
+        onSelect?: ((option: BlessCascadeOption<T>, path: BlessCascadeOption<T>[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "select", option: BlessCascadeOption<T>, path: BlessCascadeOption<T>[]) => void) & ((event: "update:modelValue", value: T | undefined) => 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/BlessCascadeSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,169 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
+import r from "./BlessPopover.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeModels as d, nextTick as f, normalizeClass 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, withCtx as S } from "vue";
+//#region src/components/BlessCascadeSelect.vue?vue&type=script&setup=true&lang.ts
+var C = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-expanded"
+], w = { class: "bless-cascade__text" }, T = ["aria-activedescendant"], E = ["aria-label"], D = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+], O = { class: "bless-cascade__label" }, k = {
+	key: 0,
+	class: "bless-cascade__more",
+	"aria-hidden": "true"
+}, A = /*@__PURE__*/ u({
+	name: "BlessCascadeSelect",
+	__name: "BlessCascadeSelect",
+	props: /*@__PURE__*/ d({
+		options: {},
+		placeholder: { default: "Select…" },
+		showPath: {
+			type: Boolean,
+			default: !0
+		},
+		separator: { default: " › " },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		label: {},
+		id: {},
+		size: { default: "md" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ d(["select"], ["update:modelValue"]),
+	setup(u, { emit: d }) {
+		let A = u, j = b(u, "modelValue"), M = d, N = h(!1), P = y(), F = t(A), I = n(), L = h([]), R = a(() => {
+			let e = [A.options], t = A.options;
+			for (let n of L.value) {
+				let r = t[n]?.children;
+				if (!r?.length) break;
+				e.push(r), t = r;
+			}
+			return e;
+		}), z = h([0]), B = a(() => {
+			let e = z.value.length - 1;
+			return e >= 0 ? `${P}-${e}-${z.value[e]}` : void 0;
+		});
+		function V(e, t, n = []) {
+			for (let r of e) {
+				if (r.value === t) return [...n, r];
+				if (r.children) {
+					let e = V(r.children, t, [...n, r]);
+					if (e) return e;
+				}
+			}
+			return null;
+		}
+		let H = a(() => j.value == null ? null : V(A.options, j.value)), U = a(() => H.value ? A.showPath ? H.value.map((e) => e.label).join(A.separator) : H.value.at(-1).label : "");
+		function W(e, t) {
+			let n = R.value[e]?.[t];
+			n && !n.disabled && (L.value = [...L.value.slice(0, e), t], z.value = [
+				...z.value.slice(0, e),
+				t,
+				0
+			]);
+		}
+		function G(e, t) {
+			let n = R.value[e]?.[t];
+			if (n && !n.disabled) {
+				if (n.children?.length) return W(e, t);
+				j.value = n.value, M("select", n, [...L.value.slice(0, e).map((e, t) => R.value[t][e]), n]), N.value = !1;
+			}
+		}
+		function K(t) {
+			let n = Math.min(z.value.length - 1, R.value.length - 1), r = R.value[n], i = z.value[n] ?? 0, a = (e) => z.value = [...z.value.slice(0, n), Math.max(0, Math.min(r.length - 1, e))];
+			switch (e(t)) {
+				case "ArrowDown":
+					t.preventDefault(), a(i + 1);
+					break;
+				case "ArrowUp":
+					t.preventDefault(), a(i - 1);
+					break;
+				case "ArrowRight":
+					t.preventDefault(), r[i]?.children?.length && W(n, i);
+					break;
+				case "ArrowLeft":
+					t.preventDefault(), n > 0 && (L.value = L.value.slice(0, n - 1), z.value = z.value.slice(0, n));
+					break;
+				case "Enter":
+				case " ":
+					t.preventDefault(), G(n, i);
+					break;
+				case "Escape": N.value && t.preventDefault(), N.value = !1;
+			}
+		}
+		let q = h();
+		return x(N, (e) => {
+			if (e && f(() => requestAnimationFrame(() => q.value?.focus())), !e) return;
+			let t = H.value;
+			if (!t) return void (L.value = [], z.value = [0]);
+			let n = [], r = A.options;
+			for (let e of t) n.push(r.indexOf(e)), r = e.children ?? [];
+			L.value = n.slice(0, -1), z.value = n;
+		}), (e, t) => (m(), o(r, {
+			open: N.value,
+			"onUpdate:open": t[0] ||= (e) => N.value = e,
+			placement: "bottom-start",
+			class: "bless-cascade"
+		}, {
+			trigger: S(() => [l("button", {
+				type: "button",
+				class: p(["bless-cascade__trigger", [`bless-cascade__trigger--${u.size}`, {
+					"bless-cascade__trigger--invalid": u.invalid || v(I).invalid.value,
+					"bless-cascade__trigger--empty": !U.value
+				}]]),
+				id: v(F)(),
+				disabled: u.disabled,
+				"aria-label": u.label ? `${u.label}: ${U.value || u.placeholder}` : void 0,
+				"aria-invalid": u.invalid || v(I).invalid.value || void 0,
+				"aria-describedby": v(I).describedby.value,
+				"aria-haspopup": "listbox",
+				"aria-expanded": N.value
+			}, [l("span", w, _(U.value || u.placeholder), 1), t[1] ||= l("span", {
+				class: "bless-cascade__chevron",
+				"aria-hidden": "true"
+			}, null, -1)], 10, C)]),
+			default: S(() => [l("div", {
+				ref_key: "panelEl",
+				ref: q,
+				class: "bless-cascade__panel",
+				tabindex: "0",
+				role: "group",
+				"aria-activedescendant": B.value,
+				onKeydown: K
+			}, [(m(!0), c(i, null, g(R.value, (e, t) => (m(), c("div", {
+				key: t,
+				class: "bless-cascade__col",
+				role: "listbox",
+				"aria-label": `Level ${t + 1}`
+			}, [(m(!0), c(i, null, g(e, (e, n) => (m(), c("div", {
+				id: `${v(P)}-${t}-${n}`,
+				key: String(e.value),
+				class: p(["bless-cascade__option", {
+					"bless-cascade__option--active": z.value[t] === n,
+					"bless-cascade__option--open": L.value[t] === n,
+					"bless-cascade__option--selected": e.value === j.value,
+					"bless-cascade__option--disabled": e.disabled
+				}]),
+				role: "option",
+				"aria-selected": e.value === j.value,
+				"aria-disabled": e.disabled || void 0,
+				onMouseenter: (r) => !e.disabled && (z.value = [...z.value.slice(0, t), n]) && e.children?.length && W(t, n),
+				onClick: (e) => G(t, n)
+			}, [l("span", O, _(e.label), 1), e.children?.length ? (m(), c("span", k, "›")) : s("", !0)], 42, D))), 128))], 8, E))), 128))], 40, T)]),
+			_: 1
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { A as default };

package/dist/components/BlessChart.css

@@ -0,0 +1 @@
+.bless-chart{border-radius:var(--bless-radius);--vis-font-family:var(--bless-font-sans);--vis-color-main:var(--bless-color-chart-1);--vis-color0:var(--bless-color-chart-1);--vis-color1:var(--bless-color-chart-2);--vis-color2:var(--bless-color-chart-3);--vis-color3:var(--bless-color-chart-4);--vis-color4:var(--bless-color-chart-5);--vis-dark-color-main:var(--bless-color-chart-1);--vis-dark-color0:var(--bless-color-chart-1);--vis-dark-color1:var(--bless-color-chart-2);--vis-dark-color2:var(--bless-color-chart-3);--vis-dark-color3:var(--bless-color-chart-4);--vis-dark-color4:var(--bless-color-chart-5);--vis-axis-font-family:var(--bless-font-sans);--vis-axis-tick-color:var(--bless-color-border);--vis-axis-domain-color:var(--bless-color-border);--vis-axis-grid-color:var(--bless-color-border);--vis-axis-tick-label-color:var(--bless-color-text-muted);--vis-axis-label-color:var(--bless-color-text);--vis-dark-axis-tick-color:var(--bless-color-border);--vis-dark-axis-domain-color:var(--bless-color-border);--vis-dark-axis-grid-color:var(--bless-color-border);--vis-dark-axis-tick-label-color:var(--bless-color-text-muted);--vis-dark-axis-label-color:var(--bless-color-text);--vis-tooltip-background-color:var(--bless-color-bg);--vis-tooltip-border-color:var(--bless-color-border);--vis-tooltip-text-color:var(--bless-color-text);--vis-tooltip-shadow-color:#0003;--vis-tooltip-padding:var(--bless-space-2) var(--bless-space-3);--vis-tooltip-backdrop-filter:none;--vis-dark-tooltip-background-color:var(--bless-color-bg);--vis-dark-tooltip-border-color:var(--bless-color-border);--vis-dark-tooltip-text-color:var(--bless-color-text);--vis-dark-tooltip-shadow-color:#0009;--vis-legend-label-color:var(--bless-color-text);--vis-dark-legend-label-color:var(--bless-color-text);--vis-crosshair-line-stroke-color:var(--bless-color-text-muted);--vis-dark-crosshair-line-stroke-color:var(--bless-color-text-muted);gap:var(--bless-space-3);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;margin:0;display:flex}.bless-chart__header{flex-direction:column;gap:2px;display:flex}.bless-chart__title{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase}.bless-chart__desc{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}.bless-chart__plot{height:var(--_h);min-width:0}.bless-chart__plot>*{height:100%}.bless-chart__legend{gap:var(--bless-space-1) var(--bless-space-4);font-size:var(--bless-text-xs);letter-spacing:var(--bless-tracking-wide);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.bless-chart__legend>li{align-items:center;gap:var(--bless-space-2);display:inline-flex}.bless-chart__legend>li:before{content:"";background:var(--_c,var(--bless-color-chart-1));width:12px;height:12px;transform:skewX(var(--bless-skew))}.bless-chart__footer{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}

package/dist/components/BlessChart.js

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

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

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    height?: string;
+    /** series names for the built-in legend, in palette order */
+    legend?: string[];
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    legend?: (props: typeof __VLS_5) => any;
+} & {
+    footer?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: 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/BlessChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeStyle as a, openBlock as o, renderList as s, renderSlot as c, toDisplayString as l } from "vue";
+//#region src/components/BlessChart.vue?vue&type=script&setup=true&lang.ts
+var u = {
+	key: 0,
+	class: "bless-chart__header"
+}, d = {
+	key: 0,
+	class: "bless-chart__title"
+}, f = {
+	key: 1,
+	class: "bless-chart__desc"
+}, p = { class: "bless-chart__plot" }, m = {
+	key: 1,
+	role: "list",
+	class: "bless-chart__legend"
+}, h = {
+	key: 2,
+	class: "bless-chart__footer"
+}, g = /*@__PURE__*/ i({
+	name: "BlessChart",
+	__name: "BlessChart",
+	props: {
+		title: {},
+		description: {},
+		height: { default: "240px" },
+		legend: {}
+	},
+	setup(i) {
+		return (g, _) => (o(), n("figure", {
+			class: "bless-chart",
+			style: a({ "--_h": i.height })
+		}, [
+			i.title || i.description || g.$slots.header ? (o(), n("figcaption", u, [c(g.$slots, "header", {}, () => [i.title ? (o(), n("strong", d, l(i.title), 1)) : t("", !0), i.description ? (o(), n("span", f, l(i.description), 1)) : t("", !0)])])) : t("", !0),
+			r("div", p, [c(g.$slots, "default")]),
+			i.legend?.length || g.$slots.legend ? (o(), n("ul", m, [c(g.$slots, "legend", {}, () => [(o(!0), n(e, null, s(i.legend, (e, t) => (o(), n("li", {
+				key: e,
+				style: a({ "--_c": `var(--bless-color-chart-${t + 1})` })
+			}, l(e), 5))), 128))])])) : t("", !0),
+			g.$slots.footer ? (o(), n("div", h, [c(g.$slots, "footer")])) : t("", !0)
+		], 4));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BlessCheckbox.css

@@ -0,0 +1 @@
+.bless-checkbox{align-items:flex-start;gap:var(--bless-space-2);font-family:var(--bless-font-sans);font-size:var(--bless-text-md);color:var(--bless-color-text);cursor:pointer;line-height:var(--bless-leading-tight);display:inline-flex}.bless-checkbox__input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.bless-checkbox__box{border:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);background:var(--bless-color-bg);width:18px;height:18px;transform:skewX(var(--bless-skew));transition:background var(--bless-duration-base), border-color var(--bless-duration-base);flex:none;place-items:center;margin-top:1px;display:inline-grid;position:relative}.bless-checkbox__check{fill:none;width:12px;height:12px;stroke:var(--bless-color-on-accent);stroke-width:2.5px;stroke-linecap:square;transform:skewX(var(--bless-skew-counter)) scale(0);transition:transform var(--bless-duration-base) var(--bless-ease-out)}.bless-checkbox__mixed{background:var(--bless-color-on-accent);width:8px;height:2px;transition:transform var(--bless-duration-base) var(--bless-ease-out);position:absolute;transform:scaleX(0)}.bless-checkbox__input:checked+.bless-checkbox__box,.bless-checkbox__input:indeterminate+.bless-checkbox__box{background:var(--bless-color-accent);border-color:var(--bless-color-accent-text)}.bless-checkbox__input:checked+.bless-checkbox__box .bless-checkbox__check{transform:skewX(var(--bless-skew-counter)) scale(1)}.bless-checkbox__input:indeterminate+.bless-checkbox__box .bless-checkbox__check{transform:scale(0)}.bless-checkbox__input:indeterminate+.bless-checkbox__box .bless-checkbox__mixed{transform:scaleX(1)}.bless-checkbox__input:focus-visible+.bless-checkbox__box{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-checkbox:hover .bless-checkbox__box{border-color:var(--bless-color-text)}.bless-checkbox--invalid .bless-checkbox__box{border-color:var(--bless-color-danger)}.bless-checkbox--disabled{opacity:.4;cursor:not-allowed}.bless-checkbox__text{flex-direction:column;gap:2px;display:flex}.bless-checkbox__description{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}

package/dist/components/BlessCheckbox.js

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

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

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    id?: string;
+    value?: string | number;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    description?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean | Array<string | number>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | (string | number)[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | (string | number)[]) => 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;
+    };
+};