blessing-ui 0.1.0

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

@@ -0,0 +1,39 @@
+import { Placement } from '../composables/useFloating';
+export interface BlessTourStep {
+    /** CSS selector of the element to point at; omit for a centred step */
+    target?: string;
+    title?: string;
+    text: string;
+    placement?: Placement;
+}
+type __VLS_Props = {
+    steps: BlessTourStep[];
+    labels?: Partial<{
+        next: string;
+        prev: string;
+        done: string;
+        skip: string;
+    }>;
+    /** dim the page and cut a hole around the target */
+    spotlight?: boolean;
+};
+type __VLS_ModelProps = {
+    "open"?: boolean;
+    "step"?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    skip: () => any;
+    "update:step": (value: number) => any;
+    finish: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onSkip?: (() => any) | undefined;
+    "onUpdate:step"?: ((value: number) => any) | undefined;
+    onFinish?: (() => any) | undefined;
+}>, {
+    spotlight: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessTour.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,118 @@
+import e from "./BlessButton.js";
+import { scrollBehavior as t } from "../composables/useMedia.js";
+import { useFloating as n } from "../composables/useFloating.js";
+import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, openBlock as _, ref as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C, withKeys as w, withModifiers as T } from "vue";
+//#region src/components/BlessTour.vue?vue&type=script&setup=true&lang.ts
+var E = ["aria-label"], D = { class: "bless-tour__count" }, O = {
+	key: 0,
+	class: "bless-tour__title"
+}, k = { class: "bless-tour__text" }, A = { class: "bless-tour__actions" }, j = /*@__PURE__*/ f({
+	name: "BlessTour",
+	__name: "BlessTour",
+	props: /*@__PURE__*/ p({
+		steps: {},
+		labels: {},
+		spotlight: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {},
+		step: { default: 0 },
+		stepModifiers: {}
+	}),
+	emits: /*@__PURE__*/ p(["finish", "skip"], ["update:open", "update:step"]),
+	setup(f, { emit: p }) {
+		let j = f, M = x(f, "open"), N = x(f, "step"), P = p, F = a(() => ({
+			next: "Next",
+			prev: "Back",
+			done: "Done",
+			skip: "Skip",
+			...j.labels
+		})), I = a(() => j.steps[N.value]), L = a(() => N.value >= j.steps.length - 1), R = v(null), z = v(), B = v(null), { x: V, y: H, side: U, update: W } = n(R, z, M, () => ({
+			placement: I.value?.placement ?? "bottom",
+			offset: 12
+		}));
+		function G() {
+			let e = I.value?.target ? document.querySelector(I.value.target) : null;
+			R.value = e, B.value = e?.getBoundingClientRect() ?? null, e?.scrollIntoView?.({
+				block: "center",
+				behavior: t()
+			}), m(() => {
+				W(), B.value = e?.getBoundingClientRect() ?? null, z.value?.focus();
+			});
+		}
+		let K = null;
+		S(M, (e) => {
+			e ? K = document.activeElement : m(() => K?.focus?.());
+		}), S([M, N], ([e]) => e && G(), { immediate: !0 });
+		function q(e) {
+			M.value = !1, P(e ? "finish" : "skip");
+		}
+		let J = a(() => {
+			let e = B.value;
+			return e ? {
+				top: `${e.top - 6}px`,
+				left: `${e.left - 6}px`,
+				width: `${e.width + 12}px`,
+				height: `${e.height + 12}px`
+			} : void 0;
+		});
+		return (t, n) => (_(), o(i, { to: "body" }, [M.value && I.value ? (_(), c(r, { key: 0 }, [f.spotlight ? (_(), c("div", {
+			key: 0,
+			class: h(["bless-tour__spot", { "bless-tour__spot--none": !J.value }]),
+			style: g(J.value),
+			"aria-hidden": "true"
+		}, null, 6)) : s("", !0), l("div", {
+			ref_key: "panel",
+			ref: z,
+			class: h(["bless-tour", [`bless-tour--${b(U)}`, { "bless-tour--centred": !R.value }]]),
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-label": I.value.title ?? `Step ${N.value + 1}`,
+			tabindex: "-1",
+			style: g(R.value ? {
+				left: `${b(V)}px`,
+				top: `${b(H)}px`
+			} : void 0),
+			onKeydown: n[3] ||= w(T((e) => q(!1), ["prevent"]), ["esc"])
+		}, [
+			l("span", D, y(N.value + 1) + " / " + y(f.steps.length), 1),
+			I.value.title ? (_(), c("strong", O, y(I.value.title), 1)) : s("", !0),
+			l("p", k, y(I.value.text), 1),
+			l("div", A, [
+				d(e, {
+					size: "sm",
+					variant: "ghost",
+					onClick: n[0] ||= (e) => q(!1)
+				}, {
+					default: C(() => [u(y(F.value.skip), 1)]),
+					_: 1
+				}),
+				n[4] ||= l("span", { style: { flex: "1" } }, null, -1),
+				d(e, {
+					size: "sm",
+					variant: "outline",
+					disabled: N.value === 0,
+					onClick: n[1] ||= (e) => N.value--
+				}, {
+					default: C(() => [u(y(F.value.prev), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				d(e, {
+					size: "sm",
+					onClick: n[2] ||= (e) => L.value ? q(!0) : N.value++
+				}, {
+					default: C(() => [u(y(L.value ? F.value.done : F.value.next), 1)]),
+					_: 1
+				})
+			])
+		], 46, E)], 64)) : s("", !0)]));
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/BlessTree.css

@@ -0,0 +1 @@
+.bless-tree,.bless-tree__group{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);margin:0;padding:0;list-style:none}.bless-tree__group{border-inline-start:var(--bless-border-width) solid var(--bless-color-border);margin-inline-start:9px;padding-inline-start:var(--bless-space-4)}.bless-tree__row{border-radius:var(--bless-radius);align-items:center;gap:var(--bless-space-1);width:100%;padding:var(--bless-space-1) var(--bless-space-2);color:inherit;font:inherit;line-height:var(--bless-leading-normal);text-align:start;cursor:pointer;background:0 0;border:0;text-decoration:none;list-style:none;display:flex}.bless-tree__row::-webkit-details-marker{display:none}.bless-tree__row:hover{background:var(--bless-color-surface)}.bless-tree__row:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-tree__row--selected{color:var(--bless-color-accent-text);font-weight:var(--bless-font-weight-bold)}.bless-tree__row--leaf{padding-inline-start:calc(var(--bless-space-2) + 14px)}.bless-tree__chevron{width:10px;color:var(--bless-color-text-muted);transition:transform var(--bless-duration-base);display:inline-block}[dir=rtl] .bless-tree__chevron{transform:rotate(180deg)}.bless-tree__branch[open]>.bless-tree__row .bless-tree__chevron{transform:rotate(90deg)}.bless-tree__icon{text-align:center;width:1.2em}.bless-tree__item[aria-disabled=true]>.bless-tree__row,.bless-tree__row:disabled{opacity:.4;cursor:not-allowed}

package/dist/components/BlessTree.js

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

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

@@ -0,0 +1,20 @@
+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 const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (node: BlessTreeNode, path: string) => any;
+    "update:selected": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((node: BlessTreeNode, path: string) => any) | undefined;
+    "onUpdate:selected"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessTree.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import t from "./BlessTreeItem.js";
+import { Fragment as n, createBlock as r, createElementBlock as i, defineComponent as a, mergeModels as o, onMounted as s, onUpdated as c, openBlock as l, ref as u, renderList as d, useModel as f } from "vue";
+//#region src/components/BlessTree.vue?vue&type=script&setup=true&lang.ts
+var p = ["aria-label"], m = /*@__PURE__*/ a({
+	name: "BlessTree",
+	__name: "BlessTree",
+	props: /*@__PURE__*/ o({
+		nodes: {},
+		label: { default: "Tree" }
+	}, {
+		selected: {},
+		selectedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["select"], ["update:selected"]),
+	setup(a, { emit: o }) {
+		let m = u(), h = () => Array.from(m.value?.querySelectorAll(".bless-tree__row") ?? []).filter((e) => e.offsetParent !== null);
+		function g(t) {
+			let n = h(), r = t.target.closest(".bless-tree__row"), i = r ? n.indexOf(r) : -1;
+			if (i < 0) return;
+			let a = r.parentElement, o = a?.tagName === "DETAILS", s = (e) => e && (t.preventDefault(), e.focus());
+			switch (e(t)) {
+				case "ArrowDown": return s(n[i + 1]);
+				case "ArrowUp": return s(n[i - 1]);
+				case "Home": return s(n[0]);
+				case "End": return s(n.at(-1));
+				case "ArrowRight":
+					o && !a.open ? (t.preventDefault(), a.open = !0) : o && s(n[i + 1]);
+					return;
+				case "ArrowLeft":
+					o && a.open ? (t.preventDefault(), a.open = !1) : s(r.closest(".bless-tree__group")?.parentElement?.querySelector(":scope > .bless-tree__row") ?? void 0);
+					return;
+			}
+		}
+		function _(e) {
+			let t = Array.from(m.value?.querySelectorAll(".bless-tree__row") ?? []), n = e && t.includes(e) && e || t.find((e) => e.classList.contains("bless-tree__row--selected")) || t[0];
+			for (let e of t) e.tabIndex = e === n ? 0 : -1;
+		}
+		s(() => _()), c(() => _(m.value?.querySelector(".bless-tree__row[tabindex='0']") ?? void 0));
+		let v = f(a, "selected"), y = o;
+		function b(e, t) {
+			v.value = e.id ?? t, y("select", e, t);
+		}
+		return (e, o) => (l(), i("ul", {
+			ref_key: "root",
+			ref: m,
+			class: "bless-tree",
+			role: "tree",
+			"aria-label": a.label,
+			onKeydown: g,
+			onFocusin: o[0] ||= (e) => _(e.target.closest(".bless-tree__row") ?? void 0)
+		}, [(l(!0), i(n, null, d(a.nodes, (e, n) => (l(), r(t, {
+			key: e.id ?? n,
+			node: e,
+			path: String(e.id ?? n),
+			selected: v.value,
+			level: 1,
+			onSelect: b
+		}, null, 8, [
+			"node",
+			"path",
+			"selected"
+		]))), 128))], 40, p));
+	}
+});
+//#endregion
+export { m as default };

package/dist/components/BlessTreeItem.js

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

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

@@ -0,0 +1,14 @@
+import { BlessTreeNode } from './tree';
+type __VLS_Props = {
+    node: BlessTreeNode;
+    path: string;
+    selected?: string;
+    level: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (node: BlessTreeNode, path: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((node: BlessTreeNode, path: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessTreeItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,88 @@
+import { useLink as e } from "../composables/useLink.js";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, normalizeClass as c, openBlock as l, ref as u, renderList as d, resolveComponent as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g, withKeys as _, withModifiers as v } from "vue";
+//#region src/components/BlessTreeItem.vue?vue&type=script&setup=true&lang.ts
+var y = [
+	"aria-selected",
+	"aria-level",
+	"aria-disabled",
+	"aria-expanded"
+], b = ["open"], x = {
+	key: 0,
+	class: "bless-tree__icon",
+	"aria-hidden": "true"
+}, S = {
+	class: "bless-tree__group",
+	role: "group"
+}, C = {
+	key: 0,
+	class: "bless-tree__icon",
+	"aria-hidden": "true"
+}, w = { class: "bless-tree__label" }, T = /*@__PURE__*/ o({
+	name: "BlessTreeItem",
+	__name: "BlessTreeItem",
+	props: {
+		node: {},
+		path: {},
+		selected: {},
+		level: {}
+	},
+	emits: ["select"],
+	setup(o, { emit: T }) {
+		let E = e(), D = o, O = T, k = () => D.node.id ?? D.path, A = u(!!D.node.open);
+		return (e, u) => {
+			let T = f("BlessTreeItem", !0);
+			return l(), i("li", {
+				class: "bless-tree__item",
+				role: "treeitem",
+				"aria-selected": o.selected === k(),
+				"aria-level": o.level,
+				"aria-disabled": o.node.disabled || void 0,
+				"aria-expanded": o.node.children?.length ? A.value : void 0
+			}, [o.node.children?.length ? (l(), i("details", {
+				key: 0,
+				class: "bless-tree__branch",
+				open: o.node.open,
+				onToggle: u[3] ||= (e) => A.value = e.target.open
+			}, [a("summary", {
+				class: c(["bless-tree__row", { "bless-tree__row--selected": o.selected === k() }]),
+				onKeydown: u[1] ||= _(v((e) => !o.node.disabled && O("select", o.node, k()), ["prevent"]), ["enter"])
+			}, [
+				u[5] ||= a("span", {
+					class: "bless-tree__chevron",
+					"aria-hidden": "true"
+				}, "›", -1),
+				o.node.icon ? (l(), i("span", x, m(o.node.icon), 1)) : r("", !0),
+				a("span", {
+					class: "bless-tree__label",
+					onClick: u[0] ||= v((e) => !o.node.disabled && O("select", o.node, k()), ["prevent"])
+				}, m(o.node.label), 1)
+			], 34), a("ul", S, [(l(!0), i(t, null, d(o.node.children, (e, t) => (l(), n(T, {
+				key: e.id ?? t,
+				node: e,
+				path: `${o.path}/${e.id ?? t}`,
+				selected: o.selected,
+				level: o.level + 1,
+				onSelect: u[2] ||= (e, t) => O("select", e, t)
+			}, null, 8, [
+				"node",
+				"path",
+				"selected",
+				"level"
+			]))), 128))])], 40, b)) : (l(), n(p(h(E)(o.node.href, void 0, "button").is), s({ key: 1 }, h(E)(o.node.href, void 0, "button").attrs, {
+				type: o.node.href ? void 0 : "button",
+				class: ["bless-tree__row bless-tree__row--leaf", { "bless-tree__row--selected": o.selected === k() }],
+				disabled: o.node.href ? void 0 : o.node.disabled,
+				onClick: u[4] ||= (e) => !o.node.disabled && O("select", o.node, k())
+			}), {
+				default: g(() => [o.node.icon ? (l(), i("span", C, m(o.node.icon), 1)) : r("", !0), a("span", w, m(o.node.label), 1)]),
+				_: 1
+			}, 16, [
+				"type",
+				"class",
+				"disabled"
+			]))], 8, y);
+		};
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/BlessTreeSelect.css

@@ -0,0 +1 @@
+.bless-treeselect__trigger{border-radius:var(--bless-radius-plate);--_h:40px;align-items:center;gap:var(--bless-space-2);min-width:220px;min-height:var(--_h);padding:var(--bless-space-1) 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-treeselect__trigger--sm{--_h:32px;font-size:var(--bless-text-sm)}.bless-treeselect__trigger--lg{--_h:48px;font-size:var(--bless-text-lg)}.bless-treeselect__trigger{cursor:pointer}.bless-treeselect__trigger:focus-visible{border-bottom-color:var(--bless-color-accent-text);outline:0}.bless-treeselect__trigger--invalid{border-bottom-color:var(--bless-color-danger)}.bless-treeselect__trigger[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-treeselect__text{flex:1}.bless-treeselect__text--empty{color:var(--bless-color-text-muted)}.bless-treeselect__chips{gap:var(--bless-space-1);flex-wrap:wrap;flex:1;display:flex}.bless-treeselect__chevron{border-inline-end:2px solid;border-bottom:2px solid;width:8px;height:8px;transform:translateY(-2px)rotate(45deg)}.bless-treeselect__panel{scrollbar-width:thin;min-width:240px;max-height:320px;overflow-y:auto}.bless-treeselect .bless-tree__row[aria-pressed=true]{color:var(--bless-color-accent-text)}.bless-treeselect__trigger{transform:skewX(var(--bless-skew));padding-inline:calc(var(--bless-space-3) + 4px)}.bless-treeselect__trigger>*{transform:skewX(var(--bless-skew-counter))}.bless-treeselect__trigger>.bless-treeselect__chevron{transform:skewX(var(--bless-skew-counter)) translateY(-2px) rotate(45deg)}

package/dist/components/BlessTreeSelect.js

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

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

@@ -0,0 +1,32 @@
+import { BlessTreeNode } from './tree';
+type __VLS_Props = {
+    id?: string;
+    nodes: BlessTreeNode[];
+    multiple?: boolean;
+    placeholder?: string;
+    /** only leaves (no children) can be picked */
+    leafOnly?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** accessible name when there's no Field; also names the tree */
+    label?: string;
+    size?: "sm" | "md" | "lg";
+};
+type __VLS_ModelProps = {
+    /** node id (or path) — string[] when multiple */
+    modelValue?: string | string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (node: BlessTreeNode, id: string) => any;
+    "update:modelValue": (value: string | string[] | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((node: BlessTreeNode, id: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    placeholder: string;
+    leafOnly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessTreeSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,118 @@
+import { useFieldId as e, useFieldState as t } from "../composables/useFieldId.js";
+import n from "./BlessPopover.js";
+import r from "./BlessTree.js";
+import i from "./BlessChip.js";
+import { Fragment as a, computed as o, createBlock as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useModel as b, watch as x, withCtx as S } from "vue";
+//#region src/components/BlessTreeSelect.vue?vue&type=script&setup=true&lang.ts
+var C = [
+	"id",
+	"tabindex",
+	"aria-disabled",
+	"aria-label",
+	"aria-labelledby",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-expanded"
+], w = {
+	key: 0,
+	class: "bless-treeselect__chips"
+}, T = /*@__PURE__*/ d({
+	name: "BlessTreeSelect",
+	__name: "BlessTreeSelect",
+	props: /*@__PURE__*/ f({
+		id: {},
+		nodes: {},
+		multiple: { type: Boolean },
+		placeholder: { default: "Select…" },
+		leafOnly: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		label: {},
+		size: { default: "md" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["select"], ["update:modelValue"]),
+	setup(d, { emit: f }) {
+		let T = d, E = b(d, "modelValue"), D = f, O = g(!1), k = e(T), A = t(), j = g();
+		x(O, (e) => p(() => requestAnimationFrame(() => {
+			if (!e) return;
+			let t = j.value?.querySelectorAll(".bless-tree__row");
+			(j.value?.querySelector(".bless-tree__row--selected") ?? t?.[0])?.focus();
+		})));
+		function M(e) {
+			T.disabled || (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" ? (e.preventDefault(), O.value = e.key === "ArrowDown" || !O.value) : e.key === "Backspace" && T.multiple && P.value.length && L(P.value[P.value.length - 1]));
+		}
+		function N(e, t = T.nodes, n = "") {
+			for (let [r, i] of t.entries()) {
+				let t = i.id ?? (n ? `${n}/${r}` : String(r));
+				if (t === e) return i.label;
+				let a = i.children && N(e, i.children, t);
+				if (a) return a;
+			}
+		}
+		let P = o(() => Array.isArray(E.value) ? E.value : E.value ? [E.value] : []), F = o(() => !T.multiple && P.value[0] ? N(P.value[0]) : "");
+		function I(e, t) {
+			if (T.leafOnly && e.children?.length) return;
+			let n = e.id ?? t;
+			if (D("select", e, n), T.multiple) {
+				let e = P.value;
+				E.value = e.includes(n) ? e.filter((e) => e !== n) : [...e, n];
+			} else E.value = n, O.value = !1;
+		}
+		let L = (e) => E.value = P.value.filter((t) => t !== e);
+		return (e, t) => (h(), s(n, {
+			open: O.value,
+			"onUpdate:open": t[0] ||= (e) => O.value = e,
+			placement: "bottom-start",
+			class: "bless-treeselect",
+			trigger: d.disabled ? "manual" : "click"
+		}, {
+			trigger: S(() => [l("div", {
+				id: y(k)(),
+				role: "combobox",
+				tabindex: d.disabled ? -1 : 0,
+				class: m(["bless-treeselect__trigger", [`bless-treeselect__trigger--${d.size}`, { "bless-treeselect__trigger--invalid": d.invalid || y(A).invalid.value }]]),
+				"aria-disabled": d.disabled || void 0,
+				"aria-label": d.label ?? (y(A).inField ? void 0 : "Tree select"),
+				"aria-labelledby": d.label ? void 0 : y(A).labelledby,
+				"aria-invalid": d.invalid || y(A).invalid.value || void 0,
+				"aria-describedby": y(A).describedby.value,
+				"aria-haspopup": "tree",
+				"aria-expanded": O.value,
+				onKeydown: M
+			}, [d.multiple && P.value.length ? (h(), c("span", w, [(h(!0), c(a, null, _(P.value, (e) => (h(), s(i, {
+				key: e,
+				label: N(e) ?? e,
+				size: "sm"
+			}, null, 8, ["label"]))), 128))])) : (h(), c("span", {
+				key: 1,
+				class: m(["bless-treeselect__text", { "bless-treeselect__text--empty": !F.value }])
+			}, v(F.value || d.placeholder), 3)), t[1] ||= l("span", {
+				class: "bless-treeselect__chevron",
+				"aria-hidden": "true"
+			}, null, -1)], 42, C)]),
+			default: S(() => [l("div", {
+				ref_key: "panel",
+				ref: j,
+				class: "bless-treeselect__panel"
+			}, [u(r, {
+				nodes: d.nodes,
+				selected: d.multiple ? void 0 : E.value,
+				label: d.label ?? "Tree select",
+				onSelect: I
+			}, null, 8, [
+				"nodes",
+				"selected",
+				"label"
+			])], 512)]),
+			_: 1
+		}, 8, ["open", "trigger"]));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/BlessTreeTable.css

@@ -0,0 +1 @@
+.bless-treetable__cell{align-items:center;gap:var(--bless-space-1);padding-inline-start:calc(var(--_d,0) * var(--bless-space-6));display:inline-flex}.bless-treetable__toggle,.bless-treetable__spacer{flex:none;place-items:center;width:24px;height:24px;display:inline-grid}.bless-treetable__toggle{color:var(--bless-color-text-muted);font:inherit;font-size:var(--bless-text-md);cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);background:0 0;border:0}.bless-treetable__toggle:hover{opacity:var(--bless-hover-opacity)}.bless-treetable__toggle>span{transition:transform var(--bless-duration-base);display:inline-block}[dir=rtl] .bless-treetable__toggle>span{transform:rotate(180deg)}.bless-treetable__toggle[aria-expanded=true]>span{transform:rotate(90deg)}.bless-treetable__toggle:focus-visible{outline:2px solid var(--bless-color-accent)}

package/dist/components/BlessTreeTable.js

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

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

@@ -0,0 +1,40 @@
+import { BlessColumn } from './table';
+declare const __VLS_export: <T extends Record<string, unknown>>(__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<({
+        columns: BlessColumn<T>[];
+        /** rows with an optional `children` array of the same shape */
+        rows: T[];
+        rowKey: keyof T & string;
+        childrenKey?: string;
+        /** column that carries the indent + toggle; default: first */
+        treeColumn?: keyof T & string;
+        caption?: string;
+        striped?: boolean;
+        /** ids expanded initially */
+        defaultExpanded?: (string | number)[];
+    } & {
+        expanded?: (string | number)[] | undefined;
+    }) & {
+        "onUpdate:expanded"?: ((value: (string | number)[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: any) => any) | undefined;
+    } & { [K in `tree-${keyof T & string}`]?: ((props: {
+        row: any;
+        value: any;
+    }) => any) | undefined; };
+    emit: (event: "update:expanded", value: (string | number)[] | 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];
+}) & {};