blessing-ui 0.1.0

package/dist/components/BlessInputOTP.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,117 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { useFieldId as t, useFieldState as n } from "../composables/useFieldId.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, openBlock as d, ref as f, renderList as p, unref as m, useModel as h, watch as g } from "vue";
+//#region src/components/BlessInputOTP.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-label"], v = [
+	"id",
+	"type",
+	"value",
+	"inputmode",
+	"pattern",
+	"autocomplete",
+	"maxlength",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"onInput",
+	"onKeydown",
+	"onPaste"
+], y = {
+	key: 0,
+	class: "bless-otp__sep",
+	"aria-hidden": "true"
+}, b = ["name", "value"], x = /*@__PURE__*/ c({
+	name: "BlessInputOTP",
+	__name: "BlessInputOTP",
+	props: /*@__PURE__*/ l({
+		id: {},
+		name: {},
+		length: { default: 6 },
+		numeric: {
+			type: Boolean,
+			default: !0
+		},
+		separators: { default: () => [] },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		label: {},
+		masked: { type: Boolean }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["complete"], ["update:modelValue"]),
+	setup(c, { emit: l }) {
+		let x = c, S = h(c, "modelValue"), C = l, w = f([]), T = t(x), E = n(), D = i(() => x.label ?? (x.numeric ? "Digit" : "Character")), O = (e) => Array.from({ length: x.length }, (t, n) => e[n] ?? ""), k = f(O(S.value));
+		g(S, (e) => {
+			e !== k.value.join("") && (k.value = O(e));
+		});
+		let A = i(() => x.numeric ? /\d/ : /./);
+		function j(e) {
+			k.value = e, S.value = e.join(""), e.every(Boolean) && C("complete", S.value);
+		}
+		function M(e, t) {
+			let n = k.value.slice();
+			n[e] = t, j(n);
+		}
+		function N(e) {
+			w.value[Math.max(0, Math.min(x.length - 1, e))]?.focus();
+		}
+		function P(e, t) {
+			let n = t.target, r = n.value.replace(x.numeric ? /\D/g : /\s/g, "");
+			if (!r) {
+				n.value = "", M(e, "");
+				return;
+			}
+			let i = r.split("").filter((e) => A.value.test(e)), a = k.value.slice();
+			i.forEach((t, n) => e + n < x.length && (a[e + n] = t)), j(a), n.value = a[e] ?? "", N(e + i.length);
+		}
+		function F(t, n) {
+			n.key === "Backspace" ? (n.preventDefault(), k.value[t] ? M(t, "") : (M(t - 1, ""), N(t - 1))) : e(n) === "ArrowLeft" ? (n.preventDefault(), N(t - 1)) : e(n) === "ArrowRight" ? (n.preventDefault(), N(t + 1)) : n.key === "Delete" && (n.preventDefault(), M(t, ""));
+		}
+		function I(e, t) {
+			t.preventDefault();
+			let n = (t.clipboardData?.getData("text") ?? "").replace(x.numeric ? /\D/g : /\s/g, "");
+			if (!n) return;
+			let r = k.value.slice();
+			n.split("").forEach((t, n) => e + n < x.length && (r[e + n] = t)), j(r), N(e + n.length);
+		}
+		return (e, t) => (d(), o("div", {
+			class: u(["bless-otp", {
+				"bless-otp--invalid": c.invalid || m(E).invalid.value,
+				"bless-otp--disabled": c.disabled
+			}]),
+			role: "group",
+			"aria-label": c.label ?? "One-time code"
+		}, [(d(!0), o(r, null, p(c.length, (e) => (d(), o(r, { key: e }, [s("input", {
+			id: e === 1 ? m(T)() : void 0,
+			ref_for: !0,
+			ref: (t) => {
+				t && (w.value[e - 1] = t);
+			},
+			type: c.masked ? "password" : "text",
+			class: "bless-otp__cell",
+			value: k.value[e - 1],
+			inputmode: c.numeric ? "numeric" : "text",
+			pattern: c.numeric ? "[0-9]*" : void 0,
+			autocomplete: e === 1 ? "one-time-code" : "off",
+			maxlength: e === 1 ? void 0 : 1,
+			disabled: c.disabled,
+			"aria-label": `${D.value} ${e} of ${c.length}`,
+			"aria-invalid": c.invalid || m(E).invalid.value || void 0,
+			"aria-describedby": m(E).describedby.value,
+			onInput: (t) => P(e - 1, t),
+			onKeydown: (t) => F(e - 1, t),
+			onPaste: (t) => I(e - 1, t),
+			onFocus: t[0] ||= (e) => e.target.select()
+		}, null, 40, v), c.separators.includes(e) ? (d(), o("span", y)) : a("", !0)], 64))), 128)), c.name ? (d(), o("input", {
+			key: 0,
+			type: "hidden",
+			name: c.name,
+			value: S.value
+		}, null, 8, b)) : a("", !0)], 10, _));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/BlessInputTags.css

@@ -0,0 +1 @@
+.bless-tags{border-radius:var(--bless-radius-plate);align-items:center;gap:var(--bless-space-1);min-height:40px;padding:var(--bless-space-1) var(--bless-space-2);border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);font-family:var(--bless-font-sans);color:var(--bless-color-text);cursor:text;background:0 0;flex-wrap:wrap;display:flex}.bless-tags:focus-within{border-bottom-color:var(--bless-color-accent-text)}.bless-tags--invalid{border-bottom-color:var(--bless-color-danger)}.bless-tags__list,.bless-tags__item{display:contents}.bless-tags .bless-chip{transform:none}.bless-tags__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-tags__input{min-width:80px;padding:var(--bless-space-1);font:inherit;color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-tags__input::placeholder{color:var(--bless-color-text-muted)}.bless-tags--disabled{opacity:.4;pointer-events:none}.bless-tags{transform:skewX(var(--bless-skew))}.bless-tags>:not(.bless-skew,.bless-chip,.bless-badge,.bless-tags__list){transform:skewX(var(--bless-skew-counter))}.bless-tags{padding-inline:calc(var(--bless-space-3) + 4px)}

package/dist/components/BlessInputTags.js

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

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    id?: string;
+    placeholder?: string;
+    /** submitted with the form, one value per tag */
+    name?: string;
+    /** keys (Enter) or characters (,) that commit the draft; characters also split a paste */
+    separators?: string[];
+    max?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    label?: string;
+    /** allow the same tag twice */
+    duplicates?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    separators: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessInputTags.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,107 @@
+import { joinIds as e, useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
+import r from "./BlessChip.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useModel as y, vModelText as b, watch as x, withDirectives as S } from "vue";
+//#region src/components/BlessInputTags.vue?vue&type=script&setup=true&lang.ts
+var C = {
+	key: 0,
+	class: "bless-tags__list",
+	role: "list"
+}, w = [
+	"id",
+	"placeholder",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby"
+], T = ["name", "value"], E = {
+	class: "bless-tags__live",
+	"aria-live": "polite"
+}, D = /*@__PURE__*/ u({
+	name: "BlessInputTags",
+	inheritAttrs: !1,
+	__name: "BlessInputTags",
+	props: /*@__PURE__*/ d({
+		id: {},
+		placeholder: {},
+		name: {},
+		separators: { default: () => ["Enter", ","] },
+		max: {},
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		label: {},
+		duplicates: { type: Boolean }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(u) {
+		let d = u, D = y(u, "modelValue"), O = t(d), k = n(), A = h(""), j = h(), M = h(""), N = a(() => d.separators.filter((e) => e.length === 1)), P = (e) => N.value.length ? e.split(RegExp(`[${N.value.join("").replace(/[\]\\^-]/g, "\\$&")}]`)) : [e];
+		function F(e = A.value) {
+			let t = [...D.value];
+			for (let n of P(e)) {
+				let e = n.trim();
+				!e || d.max != null && t.length >= d.max || (d.duplicates || !t.includes(e)) && t.push(e);
+			}
+			A.value = "", t.length !== D.value.length && (M.value = `Added ${t.slice(D.value.length).join(", ")}`, D.value = t);
+		}
+		x(A, (e) => {
+			let t = P(e);
+			if (t.length < 2) return;
+			let n = t.pop();
+			F(t.join(N.value[0])), A.value = n.trimStart();
+		});
+		function I(e, t = !1) {
+			M.value = `Removed ${D.value[e]}`, D.value = D.value.filter((t, n) => n !== e), t && j.value?.focus();
+		}
+		function L(e) {
+			d.separators.includes(e.key) ? (e.preventDefault(), F()) : e.key === "Backspace" && !A.value && D.value.length && I(D.value.length - 1);
+		}
+		return (t, n) => (m(), s("div", {
+			class: p(["bless-tags bless-lean--field", {
+				"bless-tags--disabled": u.disabled,
+				"bless-tags--invalid": u.invalid || v(k).invalid.value
+			}]),
+			onClick: n[2] ||= (e) => j.value?.focus()
+		}, [
+			D.value.length ? (m(), s("ul", C, [(m(!0), s(i, null, g(D.value, (e, t) => (m(), s("li", {
+				key: e + t,
+				class: "bless-tags__item",
+				role: "listitem"
+			}, [l(r, {
+				label: e,
+				size: "sm",
+				removable: !u.disabled,
+				onRemove: (e) => I(t, !0)
+			}, null, 8, [
+				"label",
+				"removable",
+				"onRemove"
+			])]))), 128))])) : o("", !0),
+			S(c("input", f(t.$attrs, {
+				id: v(O)(),
+				ref_key: "input",
+				ref: j,
+				"onUpdate:modelValue": n[0] ||= (e) => A.value = e,
+				type: "text",
+				class: "bless-tags__input",
+				placeholder: D.value.length ? "" : u.placeholder,
+				disabled: u.disabled,
+				"aria-label": u.label ?? (v(k).inField ? void 0 : "Tags"),
+				"aria-invalid": u.invalid || v(k).invalid.value || void 0,
+				"aria-describedby": v(e)(v(k).describedby.value, t.$attrs["aria-describedby"]),
+				onKeydown: L,
+				onBlur: n[1] ||= (e) => F()
+			}), null, 16, w), [[b, A.value]]),
+			u.name ? (m(!0), s(i, { key: 1 }, g(D.value, (e, t) => (m(), s("input", {
+				key: t,
+				type: "hidden",
+				name: u.name,
+				value: e
+			}, null, 8, T))), 128)) : o("", !0),
+			c("span", E, _(M.value), 1)
+		], 2));
+	}
+});
+//#endregion
+export { D as default };

package/dist/components/BlessItem.css

@@ -0,0 +1 @@
+.bless-item{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-3);font-family:var(--bless-font-sans);color:var(--bless-color-text);transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out);text-decoration:none;display:flex}:where(button).bless-item{width:100%;color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0}.bless-item--sm{gap:var(--bless-space-2);padding:var(--bless-space-2)}.bless-item--outline{border-radius:var(--bless-radius);border:var(--bless-border-width) solid var(--bless-color-border)}.bless-item--surface{border-radius:var(--bless-radius);background:var(--bless-color-surface)}.bless-item--link:hover{opacity:var(--bless-hover-opacity)}.bless-item--link:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-item__media{color:var(--bless-color-text-muted);flex:none;justify-content:center;align-items:center;display:inline-flex}.bless-item__body{gap:var(--bless-space-1);flex-direction:column;flex:1;min-width:0;display:flex}.bless-item__title{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);line-height:var(--bless-leading-tight)}.bless-item--sm .bless-item__title{font-size:var(--bless-text-xs)}.bless-item__desc{font-size:var(--bless-text-xs);line-height:var(--bless-leading-tight);color:var(--bless-color-text-muted)}.bless-item__content{font-size:var(--bless-text-sm)}.bless-item__actions{align-items:center;gap:var(--bless-space-2);flex:none;display:inline-flex}

package/dist/components/BlessItem.js

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

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    /** renders <a> when set — then keep #actions non-interactive */
+    href?: string;
+    /** the whole row is a <button>: a selectable row (an inbox, a picker) */
+    button?: boolean;
+    variant?: "plain" | "outline" | "surface";
+    size?: "sm" | "md";
+};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    media?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_10) => any;
+} & {
+    description?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    actions?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md";
+    variant: "plain" | "outline" | "surface";
+}, {}, {}, {}, 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/BlessItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import { useLink as e } from "../composables/useLink.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d, unref as f, withCtx as p } from "vue";
+//#region src/components/BlessItem.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	key: 0,
+	class: "bless-item__media"
+}, h = { class: "bless-item__body" }, g = { class: "bless-item__title" }, _ = {
+	key: 0,
+	class: "bless-item__desc"
+}, v = {
+	key: 1,
+	class: "bless-item__content"
+}, y = {
+	key: 1,
+	class: "bless-item__actions"
+}, b = /*@__PURE__*/ o({
+	name: "BlessItem",
+	__name: "BlessItem",
+	props: {
+		title: {},
+		description: {},
+		href: {},
+		button: { type: Boolean },
+		variant: { default: "plain" },
+		size: { default: "md" }
+	},
+	setup(o) {
+		let b = e();
+		return (e, x) => (c(), t(u(f(b)(o.href, void 0, o.button ? "button" : "div").is), s(f(b)(o.href, void 0, o.button ? "button" : "div").attrs, {
+			type: o.button && !o.href ? "button" : void 0,
+			class: ["bless-item", [
+				`bless-item--${o.variant}`,
+				`bless-item--${o.size}`,
+				{ "bless-item--link": o.href || o.button }
+			]]
+		}), {
+			default: p(() => [
+				e.$slots.media ? (c(), r("span", m, [l(e.$slots, "media")])) : n("", !0),
+				i("span", h, [
+					i("span", g, [l(e.$slots, "title", {}, () => [a(d(o.title), 1)])]),
+					o.description || e.$slots.description ? (c(), r("span", _, [l(e.$slots, "description", {}, () => [a(d(o.description), 1)])])) : n("", !0),
+					e.$slots.default ? (c(), r("span", v, [l(e.$slots, "default")])) : n("", !0)
+				]),
+				e.$slots.actions ? (c(), r("span", y, [l(e.$slots, "actions")])) : n("", !0)
+			]),
+			_: 3
+		}, 16, ["type", "class"]));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessKbd.css

@@ -0,0 +1 @@
+.bless-kbd{border-radius:var(--bless-radius);font-family:var(--bless-font-sans);font-size:var(--bless-text-xs);color:var(--bless-color-text);align-items:center;gap:2px;display:inline-flex}.bless-kbd__key{border:var(--bless-border-width) solid var(--bless-color-text-muted);background:var(--bless-color-bg);min-width:1.2em;font:inherit;font-weight:var(--bless-font-weight-bold);text-align:center;text-transform:uppercase;transform:skewX(var(--bless-skew));padding:2px 5px;line-height:1;display:inline-block}.bless-kbd__key>span{transform:skewX(var(--bless-skew-counter));display:inline-block}.bless-kbd__plus{color:var(--bless-color-text-muted)}

package/dist/components/BlessKbd.js

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

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** keys joined with + ; slot wins if present */
+    keys?: 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/BlessKbd.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,19 @@
+import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, openBlock as a, renderList as o, renderSlot as s, toDisplayString as c } from "vue";
+//#region src/components/BlessKbd.vue?vue&type=script&setup=true&lang.ts
+var l = { class: "bless-kbd" }, u = { class: "bless-kbd__key" }, d = {
+	key: 0,
+	class: "bless-kbd__plus",
+	"aria-hidden": "true"
+}, f = {
+	key: 1,
+	class: "bless-kbd__key"
+}, p = /*@__PURE__*/ i({
+	name: "BlessKbd",
+	__name: "BlessKbd",
+	props: { keys: {} },
+	setup(i) {
+		return (p, m) => (a(), n("kbd", l, [i.keys?.length ? (a(!0), n(e, { key: 0 }, o(i.keys, (o, s) => (a(), n(e, { key: o }, [r("kbd", u, [r("span", null, c(o), 1)]), s < i.keys.length - 1 ? (a(), n("span", d, "+")) : t("", !0)], 64))), 128)) : (a(), n("kbd", f, [r("span", null, [s(p.$slots, "default")])]))]));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BlessKnob.css

@@ -0,0 +1 @@
+.bless-knob{--_s:72px;align-items:center;gap:var(--bless-space-1);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:inline-flex}.bless-knob--sm{--_s:48px}.bless-knob--lg{--_s:104px}.bless-knob__dial{width:var(--_s);height:var(--_s);background:radial-gradient(circle, var(--bless-color-bg) 62%, transparent 63%), conic-gradient(from var(--_start), var(--bless-color-accent) 0 var(--_fill), var(--bless-color-border) var(--_fill) var(--_sweep), transparent var(--_sweep));cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;display:grid;position:relative}.bless-knob__dial:active{cursor:grabbing}.bless-knob__hand{inset-inline-start:50%;background:var(--bless-color-text);transform-origin:50% 0;width:2px;height:38%;transform:translate(-50%, 0) rotate(calc(var(--_deg) - 180deg));pointer-events:none;position:absolute;top:50%}.bless-knob__input{opacity:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;inset:0}.bless-knob__dial:has(.bless-knob__input:focus-visible){outline:2px solid var(--bless-color-accent);outline-offset:3px}.bless-knob__value{font-size:var(--bless-text-2xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);color:var(--bless-color-text-muted);position:absolute;bottom:-2px}.bless-knob__label{font-size:var(--bless-text-xs);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase;color:var(--bless-color-text-muted)}.bless-knob--disabled{opacity:.4}.bless-knob--disabled .bless-knob__dial{pointer-events:none}

package/dist/components/BlessKnob.js

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

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

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    id?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: "sm" | "md" | "lg";
+    /** visible label under the dial; inside a BlessField the field's label is used instead */
+    label?: string;
+    showValue?: boolean;
+    format?: (v: number) => string;
+    disabled?: boolean;
+    /** degrees of arc, centred at the bottom gap */
+    sweep?: number;
+};
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: 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;
+}>, {
+    size: "sm" | "md" | "lg";
+    step: number;
+    min: number;
+    max: number;
+    showValue: boolean;
+    sweep: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessKnob.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import { joinIds as e, useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, toDisplayString as m, unref as h, useModel as g, vModelText as _, withDirectives as v } from "vue";
+//#region src/components/BlessKnob.vue?vue&type=script&setup=true&lang.ts
+var y = [
+	"id",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"aria-label",
+	"aria-valuetext",
+	"aria-describedby"
+], b = {
+	key: 0,
+	class: "bless-knob__value",
+	"aria-hidden": "true"
+}, x = ["for"], S = /*@__PURE__*/ s({
+	name: "BlessKnob",
+	inheritAttrs: !1,
+	__name: "BlessKnob",
+	props: /*@__PURE__*/ c({
+		id: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		size: { default: "md" },
+		label: {},
+		showValue: {
+			type: Boolean,
+			default: !0
+		},
+		format: {},
+		disabled: { type: Boolean },
+		sweep: { default: 270 }
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = s, S = g(s, "modelValue"), C = t(c), w = n(), T = p(), E = r(() => (S.value - c.min) / (c.max - c.min || 1)), D = r(() => 180 + (360 - c.sweep) / 2), O = r(() => D.value + E.value * c.sweep), k = r(() => (c.format ?? String)(S.value)), A = r(() => (String(c.step).split(".")[1] ?? "").length), j = (e) => Math.min(c.max, Math.max(c.min, Number((c.min + Math.round((e - c.min) / c.step) * c.step).toFixed(A.value))));
+		function M(e, t = !1) {
+			let n = T.value.getBoundingClientRect(), r = (Math.atan2(e.clientY - (n.top + n.height / 2), e.clientX - (n.left + n.width / 2)) * 180 / Math.PI - 90 + 360) % 360, i = (360 - c.sweep) / 2;
+			r = Math.min(c.sweep, Math.max(0, r - i));
+			let a = j(c.min + r / c.sweep * (c.max - c.min));
+			if (t && Math.abs(a - S.value) > (c.max - c.min) / 2) return void (S.value = S.value > (c.min + c.max) / 2 ? c.max : c.min);
+			S.value = a;
+		}
+		function N(e) {
+			c.disabled || (e.currentTarget.setPointerCapture(e.pointerId), M(e));
+		}
+		function P(e) {
+			e.currentTarget.hasPointerCapture(e.pointerId) && M(e, !0);
+		}
+		return (t, n) => (f(), a("div", { class: u(["bless-knob", [`bless-knob--${s.size}`, { "bless-knob--disabled": s.disabled }]]) }, [o("div", {
+			ref_key: "dial",
+			ref: T,
+			class: "bless-knob__dial",
+			style: d({
+				"--_start": `${D.value}deg`,
+				"--_sweep": `${s.sweep}deg`,
+				"--_fill": `${E.value * s.sweep}deg`,
+				"--_deg": `${O.value}deg`
+			}),
+			onPointerdown: N,
+			onPointermove: P
+		}, [
+			n[1] ||= o("span", {
+				class: "bless-knob__hand",
+				"aria-hidden": "true"
+			}, null, -1),
+			v(o("input", l(t.$attrs, {
+				id: h(C)(),
+				"onUpdate:modelValue": n[0] ||= (e) => S.value = e,
+				type: "range",
+				class: "bless-knob__input",
+				min: s.min,
+				max: s.max,
+				step: s.step,
+				disabled: s.disabled,
+				"aria-label": s.label || h(w).inField ? void 0 : "Value",
+				"aria-valuetext": k.value,
+				"aria-describedby": h(e)(h(w).describedby.value, t.$attrs["aria-describedby"])
+			}), null, 16, y), [[
+				_,
+				S.value,
+				void 0,
+				{ number: !0 }
+			]]),
+			s.showValue ? (f(), a("span", b, m(k.value), 1)) : i("", !0)
+		], 36), s.label ? (f(), a("label", {
+			key: 0,
+			for: h(C)(),
+			class: "bless-knob__label"
+		}, m(s.label), 9, x)) : i("", !0)], 2));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/BlessLabel.css

@@ -0,0 +1 @@
+.bless-label{align-items:baseline;gap:var(--bless-space-1);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);line-height:var(--bless-leading-tight);text-transform:uppercase;color:var(--bless-color-text);cursor:default;display:inline-flex}.bless-label[for]{cursor:pointer}.bless-label--disabled{opacity:.4;cursor:not-allowed}.bless-label__required{color:inherit}.bless-label__hint{font-weight:var(--bless-font-weight-normal);text-transform:none;letter-spacing:var(--bless-tracking-normal);color:var(--bless-color-text-muted);margin-inline-start:var(--bless-space-1)}

package/dist/components/BlessLabel.js

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

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    for?: string;
+    /** draws the * only; put `required` on the control too */
+    required?: boolean;
+    /** a word or two after the label ("optional"); it is part of the label's accessible name */
+    hint?: string;
+    disabled?: 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<{}>, {}, {}, {}, {}, 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/BlessLabel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
+//#region src/components/BlessLabel.vue?vue&type=script&setup=true&lang.ts
+var c = ["for"], l = { class: "bless-label__text" }, u = {
+	key: 0,
+	class: "bless-label__required",
+	"aria-hidden": "true"
+}, d = {
+	key: 1,
+	class: "bless-label__hint"
+}, f = /*@__PURE__*/ r({
+	name: "BlessLabel",
+	__name: "BlessLabel",
+	props: {
+		for: {},
+		required: { type: Boolean },
+		hint: {},
+		disabled: { type: Boolean }
+	},
+	setup(r) {
+		return (f, p) => (a(), t("label", {
+			class: i(["bless-label", { "bless-label--disabled": r.disabled }]),
+			for: r.for
+		}, [
+			n("span", l, [o(f.$slots, "default")]),
+			r.required ? (a(), t("span", u, "*")) : e("", !0),
+			r.hint ? (a(), t("span", d, s(r.hint), 1)) : e("", !0)
+		], 10, c));
+	}
+});
+//#endregion
+export { f as default };

package/dist/components/BlessLayout.css

@@ -0,0 +1 @@
+.bless-layout{min-height:100dvh;font-family:var(--bless-font-sans);color:var(--bless-color-text);background:var(--bless-color-bg);flex-direction:column;display:flex}.bless-layout__header{z-index:var(--bless-z-nav);padding-top:var(--bless-safe-top);background:var(--bless-color-bg);border-bottom:var(--bless-border-width) solid var(--bless-color-border);transition:transform var(--bless-duration-slow) var(--bless-ease-in-out);position:sticky;top:0}.bless-layout--hidden .bless-layout__header{transform:translateY(-100%)}.bless-layout__body{flex:1;min-height:0;display:flex;position:relative}.bless-layout__page{min-width:0;padding-left:var(--bless-safe-left);padding-right:var(--bless-safe-right);flex:1}.bless-layout__drawer{background:var(--bless-color-bg);scrollbar-width:thin;flex:none;overflow-y:auto}.bless-layout__drawer--left{width:var(--_lw);border-right:var(--bless-border-width) solid var(--bless-color-border)}.bless-layout__drawer--right{width:var(--_rw);border-left:var(--bless-border-width) solid var(--bless-color-border)}.bless-layout--narrow .bless-layout__drawer{z-index:var(--bless-z-modal);padding-top:var(--bless-safe-top);padding-bottom:var(--bless-safe-bottom);transition:transform var(--bless-duration-slow) var(--bless-ease-out);position:fixed;top:0;bottom:0}.bless-layout--narrow .bless-layout__drawer--left{left:0;transform:translate(-100%)}.bless-layout--narrow .bless-layout__drawer--right{right:0;transform:translate(100%)}.bless-layout--narrow.bless-layout--left .bless-layout__drawer--left,.bless-layout--narrow.bless-layout--right .bless-layout__drawer--right{transform:none}.bless-layout__backdrop{z-index:calc(var(--bless-z-modal) - 1);background:var(--bless-color-backdrop);position:fixed;inset:0}.bless-layout__footer{z-index:var(--bless-z-nav);padding-bottom:var(--bless-safe-bottom);border-top:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);position:sticky;bottom:0}@media (prefers-reduced-motion:reduce){.bless-layout__header,.bless-layout--narrow .bless-layout__drawer{transition:none}}

package/dist/components/BlessLayout.js

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