blessing-ui 0.1.0

package/dist/components/BlessCombobox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,191 @@
+import e from "./BlessBadge.js";
+import { useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
+import { useFloating as r } from "../composables/useFloating.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, vModelText as C, watch as w, withCtx as T, withDirectives as E, withModifiers as D } from "vue";
+//#region src/components/BlessCombobox.vue?vue&type=script&setup=true&lang.ts
+var O = ["aria-label", "onClick"], ee = [
+	"id",
+	"aria-label",
+	"placeholder",
+	"disabled",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-invalid",
+	"aria-describedby"
+], te = ["id", "aria-multiselectable"], k = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMousemove",
+	"onClick"
+], A = {
+	class: "bless-combobox__check",
+	"aria-hidden": "true"
+}, j = ["id"], M = {
+	key: 1,
+	class: "bless-combobox__empty"
+}, N = /*@__PURE__*/ d({
+	name: "BlessCombobox",
+	__name: "BlessCombobox",
+	props: /*@__PURE__*/ f({
+		id: {},
+		options: {},
+		placeholder: {},
+		multiple: { type: Boolean },
+		creatable: { type: Boolean },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		emptyText: { default: "No results." },
+		size: { default: "md" },
+		label: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["create", "search"], ["update:modelValue"]),
+	setup(d, { emit: f }) {
+		let N = d, P = S(d, "modelValue"), F = f, I = t(N)(), L = n(), R = _(""), z = _(!1), B = _(0), V = _(), H = _(), U = _(), { x: W, y: G } = r(V, H, z, {
+			placement: "bottom-start",
+			offset: 4
+		}), K = a(() => Array.isArray(P.value) ? P.value : P.value === void 0 ? [] : [P.value]), q = (e) => N.options.find((t) => t.value === e)?.label ?? String(e), J = a(() => {
+			let e = R.value.trim().toLowerCase();
+			return N.options.filter((t) => !e || t.label.toLowerCase().includes(e));
+		}), Y = a(() => N.creatable && R.value.trim() && !N.options.some((e) => e.label.toLowerCase() === R.value.trim().toLowerCase())), X = a(() => J.value[B.value] ? `${I}-opt-${B.value}` : Y.value ? `${I}-create` : void 0);
+		w(J, () => B.value = 0), w(z, (e) => p(() => {
+			let t = H.value;
+			t && typeof t.showPopover == "function" && (e && !t.matches(":popover-open") ? t.showPopover() : !e && t.matches(":popover-open") && t.hidePopover());
+		})), w(() => [P.value, z.value], ([, e]) => {
+			!N.multiple && !e && (R.value = K.value[0] === void 0 ? "" : q(K.value[0]));
+		}, { immediate: !0 });
+		function Z(e) {
+			if (N.multiple) {
+				let t = K.value;
+				P.value = t.includes(e) ? t.filter((t) => t !== e) : [...t, e], R.value = "", U.value?.focus();
+			} else P.value = e, z.value = !1;
+		}
+		function Q() {
+			let e = R.value.trim();
+			e && (F("create", e), R.value = "", N.multiple || (z.value = !1));
+		}
+		function $(e) {
+			P.value = K.value.filter((t) => t !== e);
+		}
+		function ne(e) {
+			let t = J.value.length + +!!Y.value;
+			if (e.key === "ArrowDown") e.preventDefault(), z.value = !0, B.value = (B.value + 1) % Math.max(1, t);
+			else if (e.key === "ArrowUp") e.preventDefault(), B.value = (B.value - 1 + t) % Math.max(1, t);
+			else if (e.key === "Enter") {
+				if (!z.value) return;
+				e.preventDefault();
+				let t = J.value[B.value];
+				t && !t.disabled ? Z(t.value) : Y.value && Q();
+			} else e.key === "Escape" ? (z.value && e.preventDefault(), z.value = !1) : e.key === "Backspace" && N.multiple && !R.value && K.value.length && $(K.value.at(-1));
+		}
+		function re(e) {
+			H.value?.contains(e.relatedTarget) || (z.value = !1);
+		}
+		return (t, n) => (g(), c("div", { class: m(["bless-combobox", [`bless-combobox--${d.size}`, {
+			"bless-combobox--open": z.value,
+			"bless-combobox--invalid": d.invalid || x(L).invalid.value,
+			"bless-combobox--disabled": d.disabled
+		}]]) }, [l("div", {
+			ref_key: "anchor",
+			ref: V,
+			class: "bless-combobox__field bless-lean--field",
+			onClick: n[3] ||= (e) => {
+				U.value?.focus(), z.value = !0;
+			}
+		}, [
+			d.multiple ? (g(!0), c(i, { key: 0 }, v(K.value, (t) => (g(), o(e, {
+				key: String(t),
+				color: "text",
+				class: "bless-combobox__chip"
+			}, {
+				default: T(() => [u(b(q(t)) + " ", 1), l("button", {
+					type: "button",
+					class: "bless-combobox__chip-x",
+					"aria-label": `Remove ${q(t)}`,
+					tabindex: "-1",
+					onClick: D((e) => $(t), ["stop"])
+				}, " × ", 8, O)]),
+				_: 2
+			}, 1024))), 128)) : s("", !0),
+			E(l("input", {
+				ref_key: "input",
+				ref: U,
+				id: x(I),
+				"onUpdate:modelValue": n[0] ||= (e) => R.value = e,
+				type: "text",
+				class: "bless-combobox__input",
+				role: "combobox",
+				"aria-label": d.label,
+				placeholder: d.multiple && K.value.length ? "" : d.placeholder,
+				disabled: d.disabled,
+				"aria-autocomplete": "list",
+				"aria-expanded": z.value,
+				"aria-controls": `${x(I)}-list`,
+				"aria-activedescendant": z.value ? X.value : void 0,
+				"aria-invalid": d.invalid || x(L).invalid.value || void 0,
+				"aria-describedby": x(L).describedby.value,
+				autocomplete: "off",
+				onFocus: n[1] ||= (e) => z.value = !0,
+				onInput: n[2] ||= (e) => {
+					z.value = !0, F("search", R.value);
+				},
+				onKeydown: ne,
+				onBlur: re
+			}, null, 40, ee), [[C, R.value]]),
+			n[7] ||= l("span", {
+				class: "bless-combobox__chevron",
+				"aria-hidden": "true"
+			}, null, -1)
+		], 512), l("div", {
+			ref_key: "panel",
+			ref: H,
+			popover: "manual",
+			class: "bless-combobox__panel",
+			style: h({
+				left: `${x(W)}px`,
+				top: `${x(G)}px`,
+				width: V.value ? `${V.value.offsetWidth}px` : void 0
+			})
+		}, [l("div", {
+			id: `${x(I)}-list`,
+			role: "listbox",
+			"aria-multiselectable": d.multiple || void 0,
+			class: "bless-combobox__list"
+		}, [
+			(g(!0), c(i, null, v(J.value, (e, r) => (g(), c("div", {
+				key: String(e.value),
+				id: `${x(I)}-opt-${r}`,
+				role: "option",
+				class: m(["bless-combobox__option", {
+					"bless-combobox__option--active": r === B.value,
+					"bless-combobox__option--selected": K.value.includes(e.value)
+				}]),
+				"aria-selected": K.value.includes(e.value),
+				"aria-disabled": e.disabled || void 0,
+				onMousedown: n[4] ||= D(() => {}, ["prevent"]),
+				onMousemove: (e) => B.value = r,
+				onClick: (t) => !e.disabled && Z(e.value)
+			}, [l("span", A, b(K.value.includes(e.value) ? "✓" : ""), 1), y(t.$slots, "option", { option: e }, () => [u(b(e.label), 1)])], 42, k))), 128)),
+			Y.value ? (g(), c("div", {
+				key: 0,
+				id: `${x(I)}-create`,
+				role: "option",
+				class: m(["bless-combobox__option bless-combobox__option--create", { "bless-combobox__option--active": B.value === J.value.length }]),
+				"aria-selected": !1,
+				onMousedown: n[5] ||= D(() => {}, ["prevent"]),
+				onMousemove: n[6] ||= (e) => B.value = J.value.length,
+				onClick: Q
+			}, [n[8] ||= l("span", {
+				class: "bless-combobox__check",
+				"aria-hidden": "true"
+			}, "＋", -1), u("Create “" + b(R.value.trim()) + "” ", 1)], 42, j)) : s("", !0),
+			!J.value.length && !Y.value ? (g(), c("p", M, b(d.emptyText), 1)) : s("", !0)
+		], 8, te)], 4)], 2));
+	}
+});
+//#endregion
+export { N as default };

package/dist/components/BlessCommand.css

@@ -0,0 +1 @@
+.bless-command .bless-modal__body{padding:0}.bless-command .bless-modal__close{display:none}.bless-command .bless-modal__panel{--_w:560px}.bless-command--inline{border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg)}.bless-command__box{border-radius:var(--bless-radius);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-command__search{border-radius:var(--bless-radius-plate);align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-3) var(--bless-space-4);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-command__icon{font-size:var(--bless-text-lg);color:var(--bless-color-text-muted);transform:skewX(var(--bless-skew-counter)) rotate(-45deg)}.bless-command__input{min-width:0;font:inherit;font-size:var(--bless-text-md);color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-command__input::placeholder{color:var(--bless-color-text-muted)}.bless-command__list{max-height:320px;padding:var(--bless-space-2) 0;scrollbar-width:thin;overflow-y:auto}.bless-command__empty:empty{display:none}.bless-command__empty{padding:var(--bless-space-6);text-align:center;font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);margin:0}.bless-command__group{padding:var(--bless-space-2) var(--bless-space-4) var(--bless-space-1);font-size:var(--bless-text-2xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);text-transform:uppercase;color:var(--bless-color-text-muted)}.bless-command__item{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-4);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-command__item--active{background:var(--bless-color-surface)}.bless-command__item[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-command__mark{text-align:center;flex:none;width:1.2em}.bless-command__label{flex:1}.bless-command__footer{gap:var(--bless-space-4);padding:var(--bless-space-2) var(--bless-space-4);border-top:var(--bless-border-width) solid var(--bless-color-border);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted);display:flex}.bless-command__search{transform:skewX(var(--bless-skew))}.bless-command__search>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}

package/dist/components/BlessCommand.js

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

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

@@ -0,0 +1,53 @@
+export interface BlessCommandItem {
+    label: string;
+    value: string;
+    group?: string;
+    keywords?: string[];
+    shortcut?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type __VLS_Props = {
+    items: BlessCommandItem[];
+    placeholder?: string;
+    /** accessible name of the search input */
+    label?: string;
+    emptyText?: string;
+    /** bind ⌘K / Ctrl+K to open */
+    hotkey?: boolean;
+    /** render inline instead of inside a modal */
+    inline?: boolean;
+    filter?: (item: BlessCommandItem, query: string) => boolean;
+};
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {
+    item: BlessCommandItem;
+}, __VLS_22: {};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_14) => any;
+} & {
+    footer?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: BlessCommandItem) => any;
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: BlessCommandItem) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    placeholder: string;
+    emptyText: string;
+    hotkey: 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/BlessCommand.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,154 @@
+import e from "./BlessModal.js";
+import t from "./BlessKbd.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, unref as S, useId as C, useModel as w, vModelText as T, watch as E, withCtx as D, withDirectives as O } from "vue";
+//#region src/components/BlessCommand.vue?vue&type=script&setup=true&lang.ts
+var k = { class: "bless-command__box" }, A = { class: "bless-command__search bless-lean--field" }, j = [
+	"placeholder",
+	"aria-label",
+	"aria-controls",
+	"aria-activedescendant"
+], M = ["id", "aria-label"], ee = ["aria-labelledby"], N = ["id"], P = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMousemove",
+	"onClick"
+], F = {
+	class: "bless-command__mark",
+	"aria-hidden": "true"
+}, I = { class: "bless-command__label" }, L = {
+	class: "bless-command__empty",
+	role: "status"
+}, R = {
+	key: 0,
+	class: "bless-command__footer"
+}, z = /*@__PURE__*/ l({
+	name: "BlessCommand",
+	__name: "BlessCommand",
+	props: /*@__PURE__*/ u({
+		items: {},
+		placeholder: { default: "Type a command…" },
+		label: { default: "Search commands" },
+		emptyText: { default: "No results." },
+		hotkey: {
+			type: Boolean,
+			default: !0
+		},
+		inline: { type: Boolean },
+		filter: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["select"], ["update:open"]),
+	setup(l, { emit: u }) {
+		let z = l, B = w(l, "open"), V = u, H = C(), U = _(""), W = _(0), G = _(), K = (e, t) => {
+			let n = [e.label, ...e.keywords ?? []].join(" ").toLowerCase();
+			return t.split(/\s+/).every((e) => n.includes(e));
+		}, q = r(() => {
+			let e = U.value.trim().toLowerCase(), t = z.filter ?? K;
+			return z.items.filter((n) => !e || t(n, e));
+		}), J = r(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of q.value) e.set(t.group ?? "", [...e.get(t.group ?? "") ?? [], t]);
+			return [...e.entries()];
+		}), Y = r(() => J.value.flatMap(([, e]) => e)), X = r(() => Y.value[W.value] ? `${H}-${Y.value[W.value].value}` : void 0);
+		E(q, () => W.value = Math.max(0, Y.value.findIndex((e) => !e.disabled))), E(B, (e) => {
+			e && (U.value = "", f(() => f(() => G.value?.focus())));
+		});
+		function Z(e) {
+			let t = Y.value.length;
+			if (!t) return;
+			let n = W.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, Y.value[n].disabled); r++);
+			W.value = n, f(() => document.getElementById(X.value ?? "")?.scrollIntoView?.({ block: "nearest" }));
+		}
+		function Q(e = Y.value[W.value]) {
+			e && !e.disabled && (V("select", e), z.inline || (B.value = !1));
+		}
+		function te(e) {
+			e.key === "ArrowDown" ? (e.preventDefault(), Z(1)) : e.key === "ArrowUp" ? (e.preventDefault(), Z(-1)) : e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Home" ? (e.preventDefault(), W.value = 0) : e.key === "End" && (e.preventDefault(), W.value = Y.value.length - 1);
+		}
+		function $(e) {
+			e.target?.closest?.("[contenteditable]:not([contenteditable=\"false\"])") || z.hotkey && !z.inline && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), B.value = !B.value);
+		}
+		return h(() => addEventListener("keydown", $)), m(() => removeEventListener("keydown", $)), (r, u) => (g(), i(b(l.inline ? "div" : e), d(l.inline ? {} : {
+			modelValue: B.value,
+			"onUpdate:modelValue": (e) => B.value = e,
+			size: "md"
+		}, { class: ["bless-command", { "bless-command--inline": l.inline }] }), {
+			default: D(() => [s("div", k, [
+				s("div", A, [
+					u[2] ||= s("span", {
+						class: "bless-command__icon",
+						"aria-hidden": "true"
+					}, "⌕", -1),
+					O(s("input", {
+						ref_key: "input",
+						ref: G,
+						"onUpdate:modelValue": u[0] ||= (e) => U.value = e,
+						type: "text",
+						class: "bless-command__input",
+						placeholder: l.placeholder,
+						role: "combobox",
+						"aria-label": l.label,
+						"aria-autocomplete": "list",
+						"aria-expanded": !0,
+						"aria-controls": `${S(H)}-list`,
+						"aria-activedescendant": X.value,
+						autocomplete: "off",
+						spellcheck: "false",
+						onKeydown: te
+					}, null, 40, j), [[T, U.value]]),
+					l.inline ? a("", !0) : (g(), i(t, { key: 0 }, {
+						default: D(() => [...u[1] ||= [c("Esc", -1)]]),
+						_: 1
+					}))
+				]),
+				s("div", {
+					id: `${S(H)}-list`,
+					class: "bless-command__list",
+					role: "listbox",
+					"aria-label": l.label
+				}, [(g(!0), o(n, null, v(J.value, ([e, l]) => (g(), o("div", {
+					key: e,
+					role: "group",
+					"aria-labelledby": e ? `${S(H)}-g-${J.value.findIndex(([t]) => t === e)}` : void 0,
+					class: "bless-command__section"
+				}, [e ? (g(), o("div", {
+					key: 0,
+					id: `${S(H)}-g-${J.value.findIndex(([t]) => t === e)}`,
+					class: "bless-command__group",
+					"aria-hidden": "true"
+				}, x(e), 9, N)) : a("", !0), (g(!0), o(n, null, v(l, (e) => (g(), o("div", {
+					key: e.value,
+					id: `${S(H)}-${e.value}`,
+					class: p(["bless-command__item", { "bless-command__item--active": Y.value[W.value] === e }]),
+					role: "option",
+					"aria-selected": Y.value[W.value] === e,
+					"aria-disabled": e.disabled || void 0,
+					onMousemove: (t) => W.value = Y.value.indexOf(e),
+					onClick: (t) => Q(e)
+				}, [
+					s("span", F, x(e.icon ?? ""), 1),
+					s("span", I, [y(r.$slots, "item", { item: e }, () => [c(x(e.label), 1)])]),
+					e.shortcut ? (g(), i(t, {
+						key: 0,
+						class: "bless-command__shortcut"
+					}, {
+						default: D(() => [c(x(e.shortcut), 1)]),
+						_: 2
+					}, 1024)) : a("", !0)
+				], 42, P))), 128))], 8, ee))), 128))], 8, M),
+				s("p", L, x(Y.value.length ? "" : l.emptyText), 1),
+				r.$slots.footer ? (g(), o("div", R, [y(r.$slots, "footer")])) : a("", !0)
+			])]),
+			_: 3
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { z as default };

package/dist/components/BlessCompare.css

@@ -0,0 +1 @@
+.bless-compare{border-radius:var(--bless-radius);-webkit-user-select:none;user-select:none;color:var(--bless-color-text);display:grid;position:relative;overflow:hidden}.bless-compare__before,.bless-compare__after{grid-area:1/1;min-width:0}.bless-compare :is(img,video){object-fit:cover;width:100%;height:100%;display:block}.bless-compare--horizontal .bless-compare__after{clip-path:inset(0 calc(100% - var(--_p)) 0 0)}[dir=rtl] .bless-compare--horizontal .bless-compare__after{clip-path:inset(0 0 0 calc(100% - var(--_p)))}.bless-compare--vertical .bless-compare__after{clip-path:inset(0 0 calc(100% - var(--_p)) 0)}.bless-compare__handle{background:var(--bless-color-text);box-shadow:0 0 0 1px var(--bless-color-bg);pointer-events:none;position:absolute}.bless-compare:has(.bless-compare__range:active) .bless-compare__handle{background:var(--bless-color-accent)}.bless-compare--horizontal .bless-compare__handle{top:0;bottom:0;width:2px;inset-inline-start:var(--_p)}.bless-compare--vertical .bless-compare__handle{inset-inline:0;top:var(--_p);height:2px}.bless-compare__range{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.bless-compare--vertical .bless-compare__range{cursor:ns-resize;writing-mode:vertical-lr}.bless-compare:has(.bless-compare__range:focus-visible){outline:2px solid var(--bless-color-accent);outline-offset:2px}

package/dist/components/BlessCompare.js

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

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

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    label?: string;
+    orientation?: "horizontal" | "vertical";
+};
+type __VLS_ModelProps = {
+    /** 0–100, how much of the "after" side is revealed */
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+} & {
+    after?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, 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;
+    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/BlessCompare.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { createElementBlock as e, createElementVNode as t, defineComponent as n, mergeModels as r, normalizeClass as i, normalizeStyle as a, openBlock as o, renderSlot as s, useModel as c, vModelText as l, withDirectives as u } from "vue";
+//#region src/components/BlessCompare.vue?vue&type=script&setup=true&lang.ts
+var d = { class: "bless-compare__before" }, f = { class: "bless-compare__after" }, p = [
+	"aria-label",
+	"aria-valuetext",
+	"aria-orientation"
+], m = /*@__PURE__*/ n({
+	name: "BlessCompare",
+	__name: "BlessCompare",
+	props: /*@__PURE__*/ r({
+		label: { default: "Compare" },
+		orientation: { default: "horizontal" }
+	}, {
+		modelValue: { default: 50 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		let r = c(n, "modelValue");
+		return (c, m) => (o(), e("div", {
+			class: i(["bless-compare", `bless-compare--${n.orientation}`]),
+			style: a({ "--_p": `${r.value}%` })
+		}, [
+			t("div", d, [s(c.$slots, "before")]),
+			t("div", f, [s(c.$slots, "after")]),
+			m[1] ||= t("div", {
+				class: "bless-compare__handle",
+				"aria-hidden": "true"
+			}, null, -1),
+			u(t("input", {
+				"onUpdate:modelValue": m[0] ||= (e) => r.value = e,
+				type: "range",
+				min: "0",
+				max: "100",
+				class: "bless-compare__range",
+				"aria-label": n.label,
+				"aria-valuetext": `${r.value}% after`,
+				"aria-orientation": n.orientation
+			}, null, 8, p), [[
+				l,
+				r.value,
+				void 0,
+				{ number: !0 }
+			]])
+		], 6));
+	}
+});
+//#endregion
+export { m as default };

package/dist/components/BlessConfirmPopup.css

@@ -0,0 +1 @@
+.bless-confirm__msg{margin:0 0 var(--bless-space-3);max-width:32ch;font-size:var(--bless-text-sm);line-height:var(--bless-leading-normal)}.bless-confirm__actions{justify-content:flex-end;gap:var(--bless-space-2);display:flex}

package/dist/components/BlessConfirmPopup.js

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

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

@@ -0,0 +1,41 @@
+import { Placement } from '../composables/useFloating';
+type __VLS_Props = {
+    message: string;
+    title?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    color?: "accent" | "danger" | "text";
+    placement?: Placement;
+};
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {
+    open: boolean;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    color: "accent" | "danger" | "text";
+    placement: Placement;
+    confirmLabel: string;
+    cancelLabel: 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/BlessConfirmPopup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,65 @@
+import e from "./BlessButton.js";
+import t from "./BlessPopover.js";
+import { createBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, nextTick as c, openBlock as l, ref as u, renderSlot as d, toDisplayString as f, useModel as p, watch as m, withCtx as h } from "vue";
+//#region src/components/BlessConfirmPopup.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "bless-confirm__msg" }, _ = { class: "bless-confirm__actions" }, v = /*@__PURE__*/ o({
+	name: "BlessConfirmPopup",
+	__name: "BlessConfirmPopup",
+	props: /*@__PURE__*/ s({
+		message: {},
+		title: {},
+		confirmLabel: { default: "Confirm" },
+		cancelLabel: { default: "Cancel" },
+		color: { default: "text" },
+		placement: { default: "bottom" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["confirm", "cancel"], ["update:open"]),
+	setup(o, { emit: s }) {
+		let v = p(o, "open"), y = s, b = u(), x = null;
+		m(v, (e) => {
+			e ? (x = document.activeElement, c(() => (b.value?.$el)?.focus())) : c(() => x?.focus?.());
+		});
+		function S(e) {
+			v.value = !1, y(e ? "confirm" : "cancel");
+		}
+		return (s, c) => (l(), n(t, {
+			open: v.value,
+			"onUpdate:open": c[2] ||= (e) => v.value = e,
+			placement: o.placement,
+			title: o.title,
+			class: "bless-confirm"
+		}, {
+			trigger: h(() => [d(s.$slots, "trigger", { open: v.value })]),
+			default: h(() => [r("p", g, f(o.message), 1), r("div", _, [a(e, {
+				ref_key: "cancelBtn",
+				ref: b,
+				size: "sm",
+				variant: "outline",
+				onClick: c[0] ||= (e) => S(!1)
+			}, {
+				default: h(() => [i(f(o.cancelLabel), 1)]),
+				_: 1
+			}, 512), a(e, {
+				size: "sm",
+				color: o.color,
+				onClick: c[1] ||= (e) => S(!0)
+			}, {
+				default: h(() => [i(f(o.confirmLabel), 1)]),
+				_: 1
+			}, 8, ["color"])])]),
+			_: 3
+		}, 8, [
+			"open",
+			"placement",
+			"title"
+		]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/BlessContainer.css

@@ -0,0 +1 @@
+.bless-container{box-sizing:border-box;width:100%;margin-inline:auto}.bless-container--sm{max-width:640px}.bless-container--md{max-width:960px}.bless-container--lg{max-width:var(--bless-content-max)}.bless-container--padded{padding-left:max(var(--bless-space-4), var(--bless-safe-left));padding-right:max(var(--bless-space-4), var(--bless-safe-right))}

package/dist/components/BlessContainer.js

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

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    as?: string;
+    size?: "sm" | "md" | "lg" | "full";
+    padded?: boolean;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+    size: "sm" | "md" | "lg" | "full";
+    padded: 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;
+    };
+};