blessing-ui 0.1.0

package/dist/components/BlessSheet.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,97 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, mergeModels as a, nextTick as o, normalizeClass as s, normalizeStyle as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useId as m, useModel as h, watch as g, withModifiers as _ } from "vue";
+//#region src/components/BlessSheet.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-labelledby"], y = ["aria-label"], b = {
+	key: 1,
+	class: "bless-sheet__header"
+}, x = { class: "bless-sheet__body" }, S = {
+	key: 2,
+	class: "bless-sheet__footer"
+}, C = /*@__PURE__*/ i({
+	name: "BlessSheet",
+	__name: "BlessSheet",
+	props: /*@__PURE__*/ a({
+		side: { default: "right" },
+		title: {},
+		size: {},
+		dismissible: {
+			type: Boolean,
+			default: !0
+		},
+		closeLabel: { default: "Close" },
+		handle: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ a(["close"], ["update:modelValue"]),
+	setup(i, { emit: a }) {
+		let C = i, w = h(i, "modelValue"), T = a, E = d(), D = d(0), O = `${m()}-title`, k = 0;
+		function A(e) {
+			let t = E.value;
+			t && (e && !t.open ? (t.showModal(), t.contains(document.activeElement) || t.querySelector(".bless-sheet__panel")?.focus()) : !e && t.open && t.close());
+		}
+		g(w, (e) => o(() => A(e))), l(() => A(w.value));
+		let j = !1;
+		function M(e) {
+			j = e.target === E.value;
+		}
+		function N(e) {
+			C.dismissible && j && e.target === E.value && (w.value = !1);
+		}
+		function P(e) {
+			k = e.clientY, e.currentTarget.setPointerCapture(e.pointerId);
+		}
+		function F(e) {
+			k && (D.value = Math.max(0, e.clientY - k));
+		}
+		function I() {
+			D.value > 80 && C.dismissible && (w.value = !1), D.value = 0, k = 0;
+		}
+		return (a, o) => (u(), t("dialog", {
+			ref_key: "dialog",
+			ref: E,
+			class: s(["bless-sheet", `bless-sheet--${i.side}`]),
+			style: c(i.size ? { "--_size": i.size } : void 0),
+			"aria-labelledby": i.title || a.$slots.title ? O : void 0,
+			onClose: o[1] ||= (e) => {
+				w.value = !1, T("close");
+			},
+			onCancel: o[2] ||= _((e) => i.dismissible && (w.value = !1), ["prevent"]),
+			onPointerdown: M,
+			onClick: N
+		}, [n("div", {
+			class: "bless-sheet__panel",
+			tabindex: "-1",
+			style: c(D.value ? {
+				transform: `translateY(${D.value}px)`,
+				transition: "none"
+			} : void 0)
+		}, [
+			i.handle ? (u(), t("div", {
+				key: 0,
+				class: "bless-sheet__handle",
+				onPointerdown: P,
+				onPointermove: F,
+				onPointerup: I,
+				onPointercancel: I
+			}, [...o[3] ||= [n("span", null, null, -1)]], 32)) : e("", !0),
+			n("button", {
+				type: "button",
+				class: "bless-sheet__close",
+				"aria-label": i.closeLabel,
+				onClick: o[0] ||= (e) => w.value = !1
+			}, [...o[4] ||= [n("span", { "aria-hidden": "true" }, "×", -1)]], 8, y),
+			i.title || a.$slots.title ? (u(), t("header", b, [n("h2", {
+				id: O,
+				class: "bless-sheet__title"
+			}, [f(a.$slots, "title", {}, () => [r(p(i.title), 1)])])])) : e("", !0),
+			n("div", x, [f(a.$slots, "default")]),
+			a.$slots.footer ? (u(), t("footer", S, [f(a.$slots, "footer")])) : e("", !0)
+		], 4)], 46, v));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BlessSidebarNav.css

@@ -0,0 +1 @@
+.bless-sidebar-nav__list{margin:0;padding:0;list-style:none}.bless-sidebar-nav__item{margin:var(--bless-space-2) 0}.bless-sidebar-nav__link{padding:var(--bless-space-1) 0;font-family:var(--bless-font-sans);font-size:var(--bless-text-md);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);line-height:var(--bless-leading-none);color:var(--bless-color-text);transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);align-items:center;text-decoration:none;display:inline-flex}.bless-sidebar-nav__link:hover{opacity:var(--bless-hover-opacity)}.bless-sidebar-nav__link:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-sidebar-nav__link--active{color:var(--bless-color-accent-text)}.bless-sidebar-nav__meta{font-size:var(--bless-text-sm)}

package/dist/components/BlessSidebarNav.js

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

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

@@ -0,0 +1,35 @@
+export interface BlessNavItem {
+    label: string;
+    href: string;
+    /** small text after a dash, e.g. a date */
+    meta?: string;
+    /** badge text; true = NEW! */
+    badge?: boolean | string;
+    external?: boolean;
+}
+type __VLS_Props = {
+    items: BlessNavItem[];
+    active?: string;
+    label?: string;
+};
+declare var __VLS_9: {
+    item: BlessNavItem;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: BlessNavItem, event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: BlessNavItem, event: MouseEvent) => any) | undefined;
+}>, {
+    label: 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/BlessSidebarNav.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import { useLink as e } from "../composables/useLink.js";
+import t from "./BlessBadge.js";
+import n from "./BlessDash.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, openBlock as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
+//#region src/components/BlessSidebarNav.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-label"], b = {
+	role: "list",
+	class: "bless-sidebar-nav__list"
+}, x = { class: "bless-sidebar-nav__label" }, S = {
+	key: 0,
+	class: "bless-sidebar-nav__meta"
+}, C = /*@__PURE__*/ u({
+	name: "BlessSidebarNav",
+	__name: "BlessSidebarNav",
+	props: {
+		items: {},
+		active: {},
+		label: { default: "Main" }
+	},
+	emits: ["select"],
+	setup(u, { emit: C }) {
+		let w = e(), T = C;
+		return (e, C) => (f(), o("nav", {
+			class: "bless-sidebar-nav",
+			"aria-label": u.label
+		}, [s("ul", b, [(f(!0), o(r, null, p(u.items, (p) => (f(), o("li", {
+			key: p.href,
+			class: "bless-sidebar-nav__item"
+		}, [(f(), i(h(_(w)(p.href, p.external).is), d({ ref_for: !0 }, _(w)(p.href, p.external).attrs, {
+			class: ["bless-sidebar-nav__link", { "bless-sidebar-nav__link--active": p.href === u.active }],
+			"aria-current": p.href === u.active ? "page" : void 0,
+			onClick: (e) => T("select", p, e)
+		}), {
+			default: v(() => [m(e.$slots, "item", { item: p }, () => [s("span", x, g(p.label), 1), p.meta || p.badge ? (f(), o(r, { key: 0 }, [
+				l(n),
+				p.meta ? (f(), o("span", S, g(p.meta), 1)) : a("", !0),
+				p.badge ? (f(), i(t, {
+					key: 1,
+					scaled: ""
+				}, {
+					default: v(() => [c(g(p.badge === !0 ? "NEW!" : p.badge), 1)]),
+					_: 2
+				}, 1024)) : a("", !0)
+			], 64)) : a("", !0)])]),
+			_: 2
+		}, 1040, [
+			"class",
+			"aria-current",
+			"onClick"
+		]))]))), 128))])], 8, y));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BlessSignaturePad.css

@@ -0,0 +1 @@
+.bless-signature{gap:var(--bless-space-2);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-signature__canvas{border-radius:var(--bless-radius);background:var(--bless-color-surface);border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);touch-action:none;cursor:crosshair;width:100%;display:block}.bless-signature__canvas:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-signature__bar{justify-content:space-between;align-items:center;gap:var(--bless-space-2);display:flex}.bless-signature__hint{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}.bless-signature--disabled{opacity:.4;pointer-events:none}

package/dist/components/BlessSignaturePad.js

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

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

@@ -0,0 +1,50 @@
+type __VLS_Props = {
+    height?: number;
+    lineWidth?: number;
+    color?: string;
+    label?: string;
+    clearLabel?: string;
+    /** shown under an empty pad */
+    hint?: string;
+    disabled?: boolean;
+    /** export format */
+    type?: "image/png" | "image/jpeg" | "image/webp";
+};
+declare function clear(): void;
+type __VLS_ModelProps = {
+    /** data URL of the drawing; empty when blank */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    clear: typeof clear;
+    empty: boolean;
+};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    clear: typeof clear;
+    isEmpty: () => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    end: (dataUrl: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onEnd?: ((dataUrl: string) => any) | undefined;
+}>, {
+    label: string;
+    type: "image/png" | "image/jpeg" | "image/webp";
+    hint: string;
+    height: number;
+    lineWidth: number;
+    clearLabel: 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/BlessSignaturePad.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,80 @@
+import e from "./BlessButton.js";
+import { createElementBlock as t, createElementVNode as n, createTextVNode as r, createVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, useModel as h, watch as g, withCtx as _, withKeys as v } from "vue";
+//#region src/components/BlessSignaturePad.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-label"], b = { class: "bless-signature__bar" }, x = { class: "bless-signature__hint" }, S = /*@__PURE__*/ a({
+	name: "BlessSignaturePad",
+	__name: "BlessSignaturePad",
+	props: /*@__PURE__*/ o({
+		height: { default: 160 },
+		lineWidth: { default: 2 },
+		color: {},
+		label: { default: "Signature" },
+		clearLabel: { default: "Clear" },
+		hint: { default: "Sign above" },
+		disabled: { type: Boolean },
+		type: { default: "image/png" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["end"], ["update:modelValue"]),
+	setup(a, { expose: o, emit: S }) {
+		let C = a, w = h(a, "modelValue"), T = S, E = f(), D = f(!0), O = null, k = !1;
+		function A() {
+			let e = E.value, t = window.devicePixelRatio || 1, n = e.clientWidth;
+			if (e.width = n * t, e.height = C.height * t, O = e.getContext("2d"), O.scale(t, t), O.lineCap = O.lineJoin = "round", w.value) {
+				let e = new Image();
+				e.onload = () => O?.drawImage(e, 0, 0, n, C.height), e.src = w.value;
+			}
+		}
+		let j = (e) => {
+			let t = E.value.getBoundingClientRect();
+			return [e.clientX - t.left, e.clientY - t.top];
+		};
+		function M(e) {
+			!C.disabled && O && (E.value.setPointerCapture(e.pointerId), k = !0, O.strokeStyle = C.color || getComputedStyle(E.value).color, O.lineWidth = C.lineWidth, O.beginPath(), O.moveTo(...j(e)));
+		}
+		function N(e) {
+			k && O && (O.lineTo(...j(e)), O.stroke(), D.value = !1);
+		}
+		function P() {
+			k && (k = !1, w.value = D.value ? "" : E.value.toDataURL(C.type), T("end", w.value));
+		}
+		function F() {
+			O?.clearRect(0, 0, E.value.width, E.value.height), D.value = !0, w.value = "";
+		}
+		let I;
+		return u(() => {
+			A(), I = new ResizeObserver(A), I.observe(E.value);
+		}), l(() => I?.disconnect()), g(w, (e) => e === "" && !D.value && F()), o({
+			clear: F,
+			isEmpty: () => D.value
+		}), (o, l) => (d(), t("div", { class: s(["bless-signature", { "bless-signature--disabled": a.disabled }]) }, [n("canvas", {
+			ref_key: "canvas",
+			ref: E,
+			class: "bless-signature__canvas",
+			style: c({ height: `${a.height}px` }),
+			role: "img",
+			"aria-label": a.label,
+			tabindex: "0",
+			onPointerdown: M,
+			onPointermove: N,
+			onPointerup: P,
+			onPointercancel: P,
+			onKeydown: v(F, ["delete"])
+		}, null, 44, y), n("div", b, [n("span", x, m(D.value ? a.hint : ""), 1), p(o.$slots, "actions", {
+			clear: F,
+			empty: D.value
+		}, () => [i(e, {
+			size: "sm",
+			variant: "outline",
+			disabled: D.value || a.disabled,
+			onClick: F
+		}, {
+			default: _(() => [r(m(a.clearLabel), 1)]),
+			_: 1
+		}, 8, ["disabled"])])])], 2));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/BlessSkeleton.css

@@ -0,0 +1 @@
+.bless-skeleton{border-radius:var(--bless-radius-plate);background:var(--bless-color-border);animation:bless-skeleton-pulse 1.6s var(--bless-ease-in-out) infinite;transform:skewX(var(--bless-skew));display:block}.bless-skeleton--avatar{border-radius:var(--bless-radius-petal);transform:none}.bless-skeleton-lines{gap:var(--bless-space-2);display:grid}@keyframes bless-skeleton-pulse{50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.bless-skeleton{animation:none}}

package/dist/components/BlessSkeleton.js

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

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    width?: string;
+    height?: string;
+    /** render n text lines instead of one block */
+    lines?: number;
+    /** an avatar placeholder: square like BlessAvatar, never leaning */
+    avatar?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: string;
+    height: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessSkeleton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { Fragment as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderList as o } from "vue";
+//#region src/components/BlessSkeleton.vue?vue&type=script&setup=true&lang.ts
+var s = {
+	key: 0,
+	class: "bless-skeleton-lines",
+	"aria-hidden": "true"
+}, c = /*@__PURE__*/ n({
+	name: "BlessSkeleton",
+	__name: "BlessSkeleton",
+	props: {
+		width: { default: "100%" },
+		height: { default: "1em" },
+		lines: {},
+		avatar: { type: Boolean }
+	},
+	setup(n) {
+		return (c, l) => n.lines ? (a(), t("div", s, [(a(!0), t(e, null, o(n.lines, (e) => (a(), t("span", {
+			key: e,
+			class: "bless-skeleton",
+			style: i({
+				width: e === n.lines && n.lines > 1 ? "60%" : n.width,
+				height: n.height
+			})
+		}, null, 4))), 128))])) : (a(), t("span", {
+			key: 1,
+			class: r(["bless-skeleton", { "bless-skeleton--avatar": n.avatar }]),
+			style: i({
+				width: n.width,
+				height: n.height
+			}),
+			"aria-hidden": "true"
+		}, null, 6));
+	}
+});
+//#endregion
+export { c as default };

package/dist/components/BlessSkew.css

@@ -0,0 +1 @@
+.bless-skew{border-radius:var(--bless-radius-plate);transform:skewX(var(--bless-skew));display:inline-block}.bless-skew__inner{transform:skewX(var(--bless-skew-counter));display:inline-block}.bless-skew--label{padding:2px var(--bless-space-3);font-family:var(--bless-font-sans);font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);line-height:var(--bless-leading-normal)}.bless-skew--text{background:var(--bless-color-text);color:var(--bless-color-on-text)}.bless-skew--accent{background:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-skew--danger{background:var(--bless-color-danger);color:var(--bless-color-on-accent)}.bless-skew--surface{background:var(--bless-color-surface);color:var(--bless-color-text)}

package/dist/components/BlessSkew.js

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

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

@@ -0,0 +1,25 @@
+import { Component } from 'vue';
+type __VLS_Props = {
+    /** element to render */
+    as?: string | Component;
+    /** fill: text | accent | danger | surface; `none` just leans */
+    color?: "text" | "accent" | "danger" | "surface" | "none";
+    /** a standalone label: label padding and type */
+    label?: 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 | Component;
+    color: "text" | "accent" | "danger" | "surface" | "none";
+}, {}, {}, {}, 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/BlessSkew.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,19 @@
+import { createBlock as e, createElementVNode as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, withCtx as s } from "vue";
+//#region src/components/BlessSkew.vue?vue&type=script&setup=true&lang.ts
+var c = { class: "bless-skew__inner" }, l = /*@__PURE__*/ n({
+	name: "BlessSkew",
+	__name: "BlessSkew",
+	props: {
+		as: { default: "span" },
+		color: { default: "none" },
+		label: { type: Boolean }
+	},
+	setup(n) {
+		return (l, u) => (i(), e(o(n.as), { class: r(["bless-skew", [`bless-skew--${n.color}`, { "bless-skew--label": n.label }]]) }, {
+			default: s(() => [t("span", c, [a(l.$slots, "default")])]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BlessSlideItem.css

@@ -0,0 +1 @@
+.bless-slide{border-radius:var(--bless-radius);touch-action:pan-y;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.bless-slide__content{background:var(--bless-color-bg);transform:translateX(var(--_x));transition:transform var(--bless-duration-base) var(--bless-ease-out);position:relative}.bless-slide__side{visibility:hidden;align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.bless-slide__side--on{visibility:visible}.bless-slide__side--left{left:0}.bless-slide__side--right{right:0}.bless-slide__side>*{padding:0 var(--bless-space-4);align-items:center;display:inline-flex}.bless-slide--disabled{touch-action:auto}

package/dist/components/BlessSlideItem.js

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

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

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    /** px of travel to trigger */
+    threshold?: number;
+    /** keep the actions revealed after release instead of firing */
+    sticky?: boolean;
+    disabled?: boolean;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+    left?: (p: {
+        reset: () => void;
+    }) => unknown;
+    right?: (p: {
+        reset: () => void;
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    reset: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    left: (reset: () => void) => any;
+    right: (reset: () => void) => any;
+    slide: (side: "left" | "right" | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLeft?: ((reset: () => void) => any) | undefined;
+    onRight?: ((reset: () => void) => any) | undefined;
+    onSlide?: ((side: "left" | "right" | null) => any) | undefined;
+}>, {
+    threshold: number;
+}, {}, {}, {}, 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/BlessSlideItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { usePan as e } from "../composables/useGesture.js";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, renderSlot as l, useSlots as u } from "vue";
+//#region src/components/BlessSlideItem.vue?vue&type=script&setup=true&lang.ts
+var d = { class: "bless-slide__content" }, f = /*@__PURE__*/ i({
+	name: "BlessSlideItem",
+	__name: "BlessSlideItem",
+	props: {
+		threshold: { default: 80 },
+		sticky: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	emits: [
+		"left",
+		"right",
+		"slide"
+	],
+	setup(i, { expose: f, emit: p }) {
+		let m = i, h = p, g = c(), _ = c(0), v = c(null), y = () => (_.value = 0, v.value = null, h("slide", null)), b = !1, x = (e) => !!S[e], S = u();
+		e(g, (e) => {
+			if (!m.disabled) {
+				if (e.phase === "start") b = !0;
+				else if (e.phase === "move") {
+					if (!b || Math.abs(e.dy) > Math.abs(e.dx)) return;
+					let t = (v.value === "left" ? -m.threshold : v.value === "right" ? m.threshold : 0) + e.dx;
+					t > 0 && !x("left") && (t = 0), t < 0 && !x("right") && (t = 0), _.value = Math.max(-m.threshold * 1.5, Math.min(m.threshold * 1.5, t)), Math.abs(t) > 8 && e.event.preventDefault();
+				} else b = !1, _.value >= m.threshold ? (m.sticky ? (_.value = m.threshold, v.value = "right", h("slide", "right")) : h("left", y), m.sticky || (_.value = m.threshold)) : _.value <= -m.threshold ? (m.sticky ? (_.value = -m.threshold, v.value = "left", h("slide", "left")) : h("right", y), m.sticky || (_.value = -m.threshold)) : y();
+			}
+		});
+		function C(e) {
+			_.value = e === "left" ? m.threshold : -m.threshold;
+		}
+		function w(e) {
+			!g.value?.contains(e.relatedTarget) && !v.value && (_.value = 0);
+		}
+		return f({ reset: y }), (e, c) => (s(), n("div", {
+			ref_key: "root",
+			ref: g,
+			class: a(["bless-slide", { "bless-slide--disabled": i.disabled }]),
+			style: o({ "--_x": `${_.value}px` }),
+			onFocusout: w
+		}, [
+			e.$slots.left ? (s(), n("div", {
+				key: 0,
+				class: a(["bless-slide__side bless-slide__side--left", { "bless-slide__side--on": _.value > 0 }]),
+				onFocusin: c[0] ||= (e) => C("left")
+			}, [l(e.$slots, "left", { reset: y })], 34)) : t("", !0),
+			e.$slots.right ? (s(), n("div", {
+				key: 1,
+				class: a(["bless-slide__side bless-slide__side--right", { "bless-slide__side--on": _.value < 0 }]),
+				onFocusin: c[1] ||= (e) => C("right")
+			}, [l(e.$slots, "right", { reset: y })], 34)) : t("", !0),
+			r("div", d, [l(e.$slots, "default")])
+		], 38));
+	}
+});
+//#endregion
+export { f as default };

package/dist/components/BlessSlideTransition.js

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

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    /** ms; 0 or reduced motion shows and hides at once */
+    duration?: number;
+    appear?: boolean;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    duration: number;
+}, {}, {}, {}, 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/BlessSlideTransition.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { Transition as t, createBlock as n, defineComponent as r, openBlock as i, renderSlot as a, withCtx as o } from "vue";
+//#region src/components/BlessSlideTransition.vue?vue&type=script&setup=true&lang.ts
+var s = /*@__PURE__*/ r({
+	name: "BlessSlideTransition",
+	__name: "BlessSlideTransition",
+	props: {
+		duration: { default: 300 },
+		appear: { type: Boolean }
+	},
+	setup(r) {
+		let s = r, c = (e) => `${e.scrollHeight}px`;
+		function l(t, n, r, i) {
+			if (!s.duration || e()) return i();
+			t.style.overflow = "hidden", t.style.height = n, t.style.transition = `height ${s.duration}ms var(--bless-ease-out)`;
+			let a = 0, o = () => {
+				clearTimeout(a), t.removeEventListener("transitionend", c), i();
+			}, c = (e) => e.target === t && e.propertyName === "height" && o();
+			t.addEventListener("transitionend", c), a = window.setTimeout(o, s.duration + 50), requestAnimationFrame(() => t.style.height = r);
+		}
+		let u = (e) => {
+			e.style.height = e.style.overflow = e.style.transition = "";
+		};
+		function d(e, t) {
+			let n = e;
+			l(n, "0", c(n), () => (u(n), t()));
+		}
+		function f(e, t) {
+			let n = e;
+			l(n, c(n), "0", t);
+		}
+		return (e, s) => (i(), n(t, {
+			appear: r.appear,
+			css: !1,
+			onEnter: d,
+			onLeave: f
+		}, {
+			default: o(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 8, ["appear"]));
+	}
+});
+//#endregion
+export { s as default };

package/dist/components/BlessSlider.css

@@ -0,0 +1 @@
+.bless-slider{font-family:var(--bless-font-sans);color:var(--bless-color-text);display:block}.bless-slider__head{margin-bottom:var(--bless-space-2);justify-content:space-between;align-items:baseline;display:flex}.bless-slider__label{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase}.bless-slider__value{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);font-variant-numeric:tabular-nums;color:var(--bless-color-accent-text)}.bless-slider__input{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px;margin:0;display:block}.bless-slider__input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--bless-color-accent) var(--_p), var(--bless-color-surface) var(--_p));height:6px;transform:skewX(var(--bless-skew))}.bless-slider__input::-moz-range-track{background:var(--bless-color-surface);height:6px;transform:skewX(var(--bless-skew))}.bless-slider__input::-moz-range-progress{background:var(--bless-color-accent);height:6px}.bless-slider__input::-webkit-slider-thumb{appearance:none;border-radius:var(--bless-radius-petal);background:var(--bless-color-text);width:14px;height:20px;transition:background var(--bless-duration-base);border:0;margin-top:-7px}.bless-slider__input::-moz-range-thumb{background:var(--bless-color-text);border-radius:var(--bless-radius-petal);width:14px;height:20px;transform:skewX(var(--bless-skew));border:0}.bless-slider__input:active::-webkit-slider-thumb{background:var(--bless-color-accent)}.bless-slider__input:active::-moz-range-thumb{background:var(--bless-color-accent)}.bless-slider__input:focus-visible{outline:0}.bless-slider__input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-slider__input:focus-visible::-moz-range-thumb{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-slider--disabled{opacity:.4}.bless-slider--disabled .bless-slider__input{cursor:not-allowed}