blessing-ui 0.1.0

package/dist/components/BlessQuestionnaire.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,195 @@
+import e from "./BlessButton.js";
+import t from "./BlessTextarea.js";
+import n from "./BlessCheckbox.js";
+import r from "./BlessRadioGroup.js";
+import i from "./BlessRadio.js";
+import a from "./BlessProgress.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, nextTick as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, useId as x, useModel as S, watch as C, withCtx as w, withModifiers as T } from "vue";
+//#region src/components/BlessQuestionnaire.vue?vue&type=script&setup=true&lang.ts
+var E = ["id"], D = {
+	key: 0,
+	class: "bless-questionnaire__desc"
+}, O = {
+	key: 0,
+	class: "bless-questionnaire__key"
+}, k = {
+	key: 2,
+	class: "bless-questionnaire__choices"
+}, A = {
+	key: 0,
+	class: "bless-questionnaire__key"
+}, j = {
+	key: 4,
+	class: "bless-questionnaire__error",
+	role: "alert"
+}, M = { class: "bless-questionnaire__actions" }, N = /*@__PURE__*/ m({
+	name: "BlessQuestionnaire",
+	__name: "BlessQuestionnaire",
+	props: /*@__PURE__*/ h({
+		questions: {},
+		shortcuts: {
+			type: Boolean,
+			default: !0
+		},
+		labels: {}
+	}, {
+		modelValue: { default: () => ({}) },
+		modelModifiers: {},
+		step: { default: 0 },
+		stepModifiers: {}
+	}),
+	emits: /*@__PURE__*/ h(["submit", "skip"], ["update:modelValue", "update:step"]),
+	setup(m, { emit: h }) {
+		let N = m, P = S(m, "modelValue"), F = S(m, "step"), I = h, L = s(() => ({
+			next: "Next",
+			previous: "Back",
+			skip: "Skip",
+			submit: "Submit",
+			required: "Please answer to continue.",
+			...N.labels
+		})), R = s(() => N.questions[F.value]), z = s(() => F.value === N.questions.length - 1), B = v(""), V = x(), H = s(() => `${V}-q${F.value}`), U = v();
+		C(F, () => {
+			B.value = "", g(() => U.value?.focus());
+		});
+		let W = (e) => {
+			let t = P.value[e.name];
+			return Array.isArray(t) ? t.length > 0 : !!t?.trim();
+		}, G = (e) => P.value = {
+			...P.value,
+			[R.value.name]: e
+		};
+		function K() {
+			if (R.value.required !== !1 && !W(R.value)) {
+				B.value = L.value.required;
+				return;
+			}
+			z.value ? I("submit", P.value) : F.value++;
+		}
+		function q() {
+			I("skip", R.value), G(void 0), z.value ? I("submit", P.value) : F.value++;
+		}
+		function J(e) {
+			if (!N.shortcuts || R.value.type === "freeform" || e.ctrlKey || e.metaKey || e.altKey) return;
+			let t = Number(e.key), n = R.value.choices?.[t - 1];
+			if (n) {
+				if (R.value.type === "single") G(n.value);
+				else {
+					let e = P.value[R.value.name] ?? [];
+					G(e.includes(n.value) ? e.filter((e) => e !== n.value) : [...e, n.value]);
+				}
+			}
+		}
+		return (s, h) => (_(), u("form", {
+			class: "bless-questionnaire",
+			novalidate: "",
+			onSubmit: T(K, ["prevent"]),
+			onKeydown: J
+		}, [
+			p(a, {
+				value: F.value + 1,
+				max: m.questions.length,
+				size: "sm",
+				label: `${F.value + 1} / ${m.questions.length}`,
+				class: "bless-questionnaire__progress"
+			}, null, 8, [
+				"value",
+				"max",
+				"label"
+			]),
+			(_(), u("fieldset", {
+				key: R.value.name,
+				ref_key: "item",
+				ref: U,
+				class: "bless-questionnaire__item",
+				tabindex: "-1"
+			}, [
+				d("legend", {
+					id: H.value,
+					class: "bless-questionnaire__title"
+				}, b(R.value.title), 9, E),
+				R.value.description ? (_(), u("p", D, b(R.value.description), 1)) : l("", !0),
+				R.value.type === "single" ? (_(), c(r, {
+					key: 1,
+					"model-value": P.value[R.value.name],
+					name: R.value.name,
+					invalid: !!B.value,
+					"aria-labelledby": H.value,
+					"onUpdate:modelValue": h[0] ||= (e) => G(e)
+				}, {
+					default: w(() => [(_(!0), u(o, null, y(R.value.choices, (e, t) => (_(), c(i, {
+						key: e.value,
+						value: e.value,
+						description: e.description
+					}, {
+						default: w(() => [m.shortcuts ? (_(), u("kbd", O, b(t + 1), 1)) : l("", !0), f(b(e.label), 1)]),
+						_: 2
+					}, 1032, ["value", "description"]))), 128))]),
+					_: 1
+				}, 8, [
+					"model-value",
+					"name",
+					"invalid",
+					"aria-labelledby"
+				])) : R.value.type === "multiple" ? (_(), u("div", k, [(_(!0), u(o, null, y(R.value.choices, (e, t) => (_(), c(n, {
+					key: e.value,
+					"model-value": P.value[R.value.name] ?? [],
+					value: e.value,
+					description: e.description,
+					invalid: !!B.value,
+					"onUpdate:modelValue": h[1] ||= (e) => G(e)
+				}, {
+					default: w(() => [m.shortcuts ? (_(), u("kbd", A, b(t + 1), 1)) : l("", !0), f(b(e.label), 1)]),
+					_: 2
+				}, 1032, [
+					"model-value",
+					"value",
+					"description",
+					"invalid"
+				]))), 128))])) : (_(), c(t, {
+					key: 3,
+					"model-value": P.value[R.value.name] ?? "",
+					placeholder: R.value.placeholder,
+					invalid: !!B.value,
+					"aria-labelledby": H.value,
+					"onUpdate:modelValue": h[2] ||= (e) => G(e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"invalid",
+					"aria-labelledby"
+				])),
+				B.value ? (_(), u("p", j, b(B.value), 1)) : l("", !0)
+			])),
+			d("div", M, [
+				p(e, {
+					variant: "ghost",
+					size: "sm",
+					disabled: F.value === 0,
+					onClick: h[3] ||= (e) => F.value--
+				}, {
+					default: w(() => [f(b(L.value.previous), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				h[4] ||= d("span", { class: "bless-questionnaire__spacer" }, null, -1),
+				R.value.skippable ? (_(), c(e, {
+					key: 0,
+					variant: "outline",
+					size: "sm",
+					onClick: q
+				}, {
+					default: w(() => [f(b(L.value.skip), 1)]),
+					_: 1
+				})) : l("", !0),
+				p(e, {
+					type: "submit",
+					size: "sm"
+				}, {
+					default: w(() => [f(b(z.value ? L.value.submit : L.value.next), 1)]),
+					_: 1
+				})
+			])
+		], 32));
+	}
+});
+//#endregion
+export { N as default };

package/dist/components/BlessRadio.css

@@ -0,0 +1 @@
+.bless-radio{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);line-height:var(--bless-leading-tight);cursor:pointer;display:inline-flex}.bless-radio__input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.bless-radio__dot{box-sizing:border-box;border:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);background:var(--bless-color-bg);width:18px;height:18px;transition:border-color var(--bless-duration-base);border-radius:50%;flex:none;margin-top:1px;position:relative}.bless-radio__dot:after{content:"";background:var(--bless-color-accent);transition:transform var(--bless-duration-base) var(--bless-ease-out);border-radius:50%;position:absolute;inset:3px;transform:scale(0)}.bless-radio__input:checked+.bless-radio__dot{border-color:var(--bless-color-accent-text)}.bless-radio__input:checked+.bless-radio__dot:after{transform:scale(1)}.bless-radio__input:focus-visible+.bless-radio__dot{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-radio:hover .bless-radio__dot{border-color:var(--bless-color-text)}.bless-radio--invalid .bless-radio__dot{border-color:var(--bless-color-danger)}.bless-radio--disabled{opacity:.4;cursor:not-allowed}.bless-radio__text{flex-direction:column;gap:2px;display:flex}.bless-radio__description{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}

package/dist/components/BlessRadio.js

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

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    value: string | number;
+    id?: string;
+    disabled?: boolean;
+    description?: 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/BlessRadio.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { joinIds as e, useFieldId as t } from "../composables/useFieldId.js";
+import { radioKey as n } from "./radio.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, inject as s, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p } from "vue";
+//#region src/components/BlessRadio.vue?vue&type=script&setup=true&lang.ts
+var m = ["for"], h = [
+	"id",
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"aria-describedby"
+], g = {
+	key: 0,
+	class: "bless-radio__text"
+}, _ = { class: "bless-radio__label" }, v = ["id"], y = /*@__PURE__*/ o({
+	name: "BlessRadio",
+	inheritAttrs: !1,
+	__name: "BlessRadio",
+	props: {
+		value: {},
+		id: {},
+		disabled: { type: Boolean },
+		description: {}
+	},
+	setup(o) {
+		let y = o, b = s(n, null), x = t(y);
+		return (t, n) => (u(), i("label", {
+			class: l(["bless-radio", {
+				"bless-radio--disabled": o.disabled,
+				"bless-radio--invalid": p(b)?.invalid.value
+			}]),
+			for: p(x)()
+		}, [
+			a("input", c(t.$attrs, {
+				id: p(x)(),
+				type: "radio",
+				name: p(b)?.name.value,
+				value: o.value,
+				checked: p(b) ? p(b).model.value === o.value : void 0,
+				disabled: o.disabled || p(b)?.disabled.value,
+				class: "bless-radio__input",
+				"aria-describedby": p(e)(o.description && `${p(x)()}-desc`, t.$attrs["aria-describedby"]),
+				onChange: n[0] ||= (e) => p(b) && (p(b).model.value = o.value)
+			}), null, 16, h),
+			n[1] ||= a("span", {
+				class: "bless-radio__dot",
+				"aria-hidden": "true"
+			}, null, -1),
+			t.$slots.default || o.description ? (u(), i("span", g, [a("span", _, [d(t.$slots, "default")]), o.description ? (u(), i("span", {
+				key: 0,
+				id: `${p(x)()}-desc`,
+				class: "bless-radio__description"
+			}, f(o.description), 9, v)) : r("", !0)])) : r("", !0)
+		], 10, m));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/BlessRadioGroup.css

@@ -0,0 +1 @@
+.bless-radio-group{min-width:0;font-family:var(--bless-font-sans);border:0;margin:0;padding:0}.bless-radio-group__label{margin-bottom:var(--bless-space-2);font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase;padding:0}.bless-radio-group__items{gap:var(--bless-space-2);flex-direction:column;display:flex}.bless-radio-group--horizontal .bless-radio-group__items{gap:var(--bless-space-4);flex-flow:wrap}.bless-radio-group:disabled{opacity:.4}

package/dist/components/BlessRadioGroup.js

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

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

@@ -0,0 +1,33 @@
+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<({
+        id?: string;
+        name?: string;
+        label?: string;
+        orientation?: "vertical" | "horizontal";
+        disabled?: boolean;
+        invalid?: boolean;
+    } & {
+        modelValue?: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        label?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    };
+    emit: (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/BlessRadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { useFieldId as e, useFieldState as t } from "../composables/useFieldId.js";
+import { radioKey as n } from "./radio.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, openBlock as u, provide as d, renderSlot as f, toDisplayString as p, toRef as m, unref as h, useId as g, useModel as _ } from "vue";
+//#region src/components/BlessRadioGroup.vue?vue&type=script&setup=true&lang.ts
+var v = [
+	"id",
+	"disabled",
+	"aria-labelledby",
+	"aria-invalid",
+	"aria-describedby"
+], y = {
+	key: 0,
+	class: "bless-radio-group__label"
+}, b = { class: "bless-radio-group__items" }, x = /*@__PURE__*/ s({
+	name: "BlessRadioGroup",
+	__name: "BlessRadioGroup",
+	props: /*@__PURE__*/ c({
+		id: {},
+		name: {},
+		label: {},
+		orientation: { default: "vertical" },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = s, x = _(s, "modelValue"), S = g(), C = e(c), w = t();
+		return d(n, {
+			name: m(() => c.name ?? S),
+			disabled: m(() => c.disabled),
+			invalid: m(() => c.invalid || w.invalid.value),
+			model: x
+		}), (e, t) => (u(), i("fieldset", {
+			id: h(C)(),
+			class: l(["bless-radio-group", `bless-radio-group--${s.orientation}`]),
+			role: "radiogroup",
+			disabled: s.disabled,
+			"aria-labelledby": s.label || e.$slots.label ? void 0 : h(w).labelledby,
+			"aria-invalid": s.invalid || h(w).invalid.value || void 0,
+			"aria-describedby": h(w).describedby.value
+		}, [s.label || e.$slots.label ? (u(), i("legend", y, [f(e.$slots, "label", {}, () => [o(p(s.label), 1)])])) : r("", !0), a("div", b, [f(e.$slots, "default")])], 10, v));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/BlessRange.css

@@ -0,0 +1 @@
+.bless-range{font-family:var(--bless-font-sans);color:var(--bless-color-text);display:block}.bless-range__head{margin-bottom:var(--bless-space-1);font-size:var(--bless-text-xs);letter-spacing:var(--bless-tracking-wide);justify-content:space-between;display:flex}.bless-range__label{font-weight:var(--bless-font-weight-bold);text-transform:uppercase}.bless-range__value{color:var(--bless-color-text-muted);font-variant-numeric:tabular-nums}.bless-range__track{border-radius:var(--bless-radius);height:24px;position:relative}.bless-range__track:before{content:"";top:10px;background:var(--bless-color-surface);height:4px;transform:skewX(var(--bless-skew));position:absolute;inset-inline:0}.bless-range__fill{top:10px;background:var(--bless-color-accent);height:4px;transform:skewX(var(--bless-skew));position:absolute;inset-inline-start:var(--_lo);inset-inline-end:calc(100% - var(--_hi))}.bless-range__input{appearance:none;pointer-events:none;background:0 0;width:100%;margin:0;position:absolute;inset:0}.bless-range__input::-webkit-slider-thumb{appearance:none;border-radius:var(--bless-radius-plate);background:var(--bless-color-text);border:2px solid var(--bless-color-bg);width:16px;height:16px;transform:skewX(var(--bless-skew));cursor:grab;pointer-events:auto}.bless-range__input::-moz-range-thumb{border-radius:var(--bless-radius-petal);background:var(--bless-color-text);border:2px solid var(--bless-color-bg);width:16px;height:16px;transform:skewX(var(--bless-skew));cursor:grab;pointer-events:auto}.bless-range__input:focus-visible{outline:0}.bless-range__input:active::-webkit-slider-thumb{background:var(--bless-color-accent)}.bless-range__input:active::-moz-range-thumb{background:var(--bless-color-accent)}.bless-range__input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-range__input:focus-visible::-moz-range-thumb{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-range--disabled{opacity:.4;pointer-events:none}

package/dist/components/BlessRange.js

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

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

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    id?: string;
+    /** both thumbs submit under this name, low then high */
+    name?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    showValue?: boolean;
+    format?: (v: number) => string;
+    disabled?: boolean;
+    /** minimum distance between the thumbs */
+    gap?: number;
+};
+type __VLS_ModelProps = {
+    /** [low, high] */
+    modelValue?: [number, 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, number]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: [number, number]) => any) | undefined;
+}>, {
+    step: number;
+    min: number;
+    max: number;
+    showValue: boolean;
+    gap: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessRange.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,111 @@
+import { useFieldId as e, useFieldState as t } from "../composables/useFieldId.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, openBlock as u, toDisplayString as d, unref as f, useModel as p } from "vue";
+//#region src/components/BlessRange.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	key: 0,
+	class: "bless-range__head"
+}, h = ["for"], g = {
+	key: 1,
+	class: "bless-range__value"
+}, _ = { class: "bless-range__track" }, v = [
+	"id",
+	"name",
+	"min",
+	"max",
+	"step",
+	"value",
+	"disabled",
+	"aria-label",
+	"aria-valuetext",
+	"aria-describedby"
+], y = [
+	"name",
+	"min",
+	"max",
+	"step",
+	"value",
+	"disabled",
+	"aria-label",
+	"aria-valuetext",
+	"aria-describedby"
+], b = /*@__PURE__*/ o({
+	name: "BlessRange",
+	__name: "BlessRange",
+	props: /*@__PURE__*/ s({
+		id: {},
+		name: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		label: {},
+		showValue: {
+			type: Boolean,
+			default: !1
+		},
+		format: {},
+		disabled: { type: Boolean },
+		gap: { default: 0 }
+	}, {
+		modelValue: { default: () => [25, 75] },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(o) {
+		let s = o, b = p(o, "modelValue"), x = e(s), S = t(), C = (e) => (s.format ?? String)(e), w = (e) => (e - s.min) / (s.max - s.min || 1) * 100, T = n(() => b.value[0]), E = n(() => b.value[1]);
+		function D(e) {
+			let t = e.target, n = Math.min(Number(t.value), E.value - s.gap);
+			b.value = [n, E.value], t.value = String(n);
+		}
+		function O(e) {
+			let t = e.target, n = Math.max(Number(t.value), T.value + s.gap);
+			b.value = [T.value, n], t.value = String(n);
+		}
+		return (e, t) => (u(), i("div", {
+			class: c(["bless-range", { "bless-range--disabled": o.disabled }]),
+			style: l({
+				"--_lo": `${w(T.value)}%`,
+				"--_hi": `${w(E.value)}%`
+			})
+		}, [o.label || o.showValue ? (u(), i("div", m, [o.label ? (u(), i("label", {
+			key: 0,
+			for: f(x)(),
+			class: "bless-range__label"
+		}, d(o.label), 9, h)) : r("", !0), o.showValue ? (u(), i("span", g, d(C(T.value)) + " – " + d(C(E.value)), 1)) : r("", !0)])) : r("", !0), a("div", _, [
+			t[0] ||= a("span", {
+				class: "bless-range__fill",
+				"aria-hidden": "true"
+			}, null, -1),
+			a("input", {
+				id: f(x)(),
+				name: o.name,
+				type: "range",
+				class: "bless-range__input",
+				min: o.min,
+				max: o.max,
+				step: o.step,
+				value: T.value,
+				disabled: o.disabled,
+				"aria-label": `${o.label ?? "Range"} minimum`,
+				"aria-valuetext": C(T.value),
+				"aria-describedby": f(S).describedby.value,
+				onInput: D
+			}, null, 40, v),
+			a("input", {
+				name: o.name,
+				type: "range",
+				class: "bless-range__input",
+				min: o.min,
+				max: o.max,
+				step: o.step,
+				value: E.value,
+				disabled: o.disabled,
+				"aria-label": `${o.label ?? "Range"} maximum`,
+				"aria-valuetext": C(E.value),
+				"aria-describedby": f(S).describedby.value,
+				onInput: O
+			}, null, 40, y)
+		])], 6));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessRating.css

@@ -0,0 +1 @@
+.bless-rating{--_s:24px;font-family:var(--bless-font-sans);border:0;gap:2px;margin:0;padding:0;display:inline-flex}.bless-rating--sm{--_s:18px}.bless-rating--lg{--_s:32px}.bless-rating__legend{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-rating__star{width:var(--_s);height:var(--_s);font-size:var(--_s);color:var(--bless-color-border);cursor:pointer;transform:skewX(var(--bless-skew));transition:color var(--bless-duration-fast), var(--bless-lean-transition);place-items:center;line-height:1;display:inline-grid;position:relative}.bless-rating__star>span{transform:skewX(var(--bless-skew-counter))}.bless-rating__star--on{color:var(--bless-color-accent-text)}.bless-rating__star--preview{color:var(--bless-color-text)}.bless-rating__input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.bless-rating__input:focus-visible+span{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-rating--readonly .bless-rating__star,.bless-rating--disabled .bless-rating__star{cursor:default;pointer-events:none}.bless-rating--disabled{opacity:.4}

package/dist/components/BlessRating.js

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

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    max?: number;
+    name?: string;
+    label?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    /** glyph for each step */
+    icon?: string;
+};
+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;
+}>, {
+    label: string;
+    size: "sm" | "md" | "lg";
+    icon: string;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessRating.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, normalizeClass as a, openBlock as o, ref as s, renderList as c, toDisplayString as l, useId as u, useModel as d } from "vue";
+//#region src/components/BlessRating.vue?vue&type=script&setup=true&lang.ts
+var f = ["aria-label"], p = ["disabled"], m = { class: "bless-rating__legend" }, h = ["onMouseenter"], g = [
+	"name",
+	"value",
+	"checked",
+	"aria-label",
+	"onChange",
+	"onClick"
+], _ = { "aria-hidden": "true" }, v = /*@__PURE__*/ r({
+	name: "BlessRating",
+	__name: "BlessRating",
+	props: /*@__PURE__*/ i({
+		max: { default: 5 },
+		name: {},
+		label: { default: "Rating" },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		size: { default: "md" },
+		icon: { default: "★" }
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = r, v = d(r, "modelValue"), y = u(), b = () => i.name ?? y, x = s(0);
+		return (i, s) => r.readonly ? (o(), t("span", {
+			key: 0,
+			class: a(["bless-rating bless-rating--readonly", `bless-rating--${r.size}`]),
+			role: "img",
+			"aria-label": `${r.label}: ${v.value} of ${r.max}`
+		}, [(o(!0), t(e, null, c(r.max, (e) => (o(), t("span", {
+			key: e,
+			class: a(["bless-rating__star", { "bless-rating__star--on": e <= v.value }]),
+			"aria-hidden": "true"
+		}, l(r.icon), 3))), 128))], 10, f)) : (o(), t("fieldset", {
+			key: 1,
+			class: a(["bless-rating", [`bless-rating--${r.size}`, { "bless-rating--disabled": r.disabled }]]),
+			disabled: r.disabled,
+			onMouseleave: s[0] ||= (e) => x.value = 0
+		}, [n("legend", m, l(r.label), 1), (o(!0), t(e, null, c(r.max, (e) => (o(), t("label", {
+			key: e,
+			class: a(["bless-rating__star", {
+				"bless-rating__star--on": !x.value && e <= v.value,
+				"bless-rating__star--preview": x.value && e <= x.value
+			}]),
+			onMouseenter: (t) => x.value = e
+		}, [n("input", {
+			class: "bless-rating__input",
+			type: "radio",
+			name: b(),
+			value: e,
+			checked: v.value === e,
+			"aria-label": `${e} of ${r.max}`,
+			onChange: (t) => v.value = e,
+			onClick: (t) => v.value === e && (v.value = 0)
+		}, null, 40, g), n("span", _, l(r.icon), 1)], 42, h))), 128))], 42, p));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/BlessResizable.css

@@ -0,0 +1 @@
+.bless-resizable{width:100%;height:100%;min-height:0;display:flex}.bless-resizable--vertical{flex-direction:column}.bless-resizable__pane{min-width:0;min-height:0;overflow:auto}.bless-resizable__pane--a{flex:0 0 var(--_a)}.bless-resizable__pane--b{flex:1 1 0}.bless-resizable__handle{border-radius:var(--bless-radius);background:var(--bless-color-border);touch-action:none;-webkit-user-select:none;user-select:none;transition:background var(--bless-duration-base);flex:none;place-items:center;display:grid;position:relative}.bless-resizable--horizontal>.bless-resizable__handle{cursor:col-resize;width:6px}.bless-resizable--vertical>.bless-resizable__handle{cursor:row-resize;height:6px}.bless-resizable__handle:hover{background:var(--bless-color-text)}.bless-resizable--dragging>.bless-resizable__handle{background:var(--bless-color-accent)}.bless-resizable__handle:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:1px}.bless-resizable__grip{background:var(--bless-color-bg);width:2px;height:24px;transform:skewX(var(--bless-skew))}.bless-resizable--vertical .bless-resizable__grip{width:24px;height:2px}.bless-resizable--dragging{cursor:inherit}.bless-resizable--dragging .bless-resizable__pane{pointer-events:none}

package/dist/components/BlessResizable.js

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