blessing-ui 0.1.0

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    total: number;
+    /** pages shown either side of current */
+    siblings?: number;
+    label?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+    /** render <a href> using this fn instead of buttons */
+    href?: (page: number) => 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;
+    prevLabel: string;
+    nextLabel: string;
+    siblings: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessPagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import e from "./BlessSkew.js";
+import { useLink as t } from "../composables/useLink.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
+//#region src/components/BlessPagination.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-label"], y = {
+	role: "list",
+	class: "bless-pagination__list"
+}, b = {
+	key: 0,
+	class: "bless-pagination__ellipsis",
+	"aria-hidden": "true"
+}, x = /*@__PURE__*/ l({
+	name: "BlessPagination",
+	__name: "BlessPagination",
+	props: /*@__PURE__*/ u({
+		total: {},
+		siblings: { default: 1 },
+		label: { default: "Pagination" },
+		prevLabel: { default: "Previous" },
+		nextLabel: { default: "Next" },
+		href: {}
+	}, {
+		modelValue: { default: 1 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(l) {
+		let u = t(), x = l, S = g(l, "modelValue"), C = r(() => {
+			let e = x.total, t = S.value, n = x.siblings;
+			if (e <= 2 * n + 5) return Array.from({ length: e }, (e, t) => t + 1);
+			let r = Math.max(2, t - n), i = Math.min(e - 1, t + n), a = [1];
+			r > 2 && a.push("…");
+			for (let e = r; e <= i; e++) a.push(e);
+			return i < e - 1 && a.push("…"), a.push(e), a;
+		});
+		function w(e) {
+			e >= 1 && e <= x.total && (S.value = e);
+		}
+		return (t, r) => (f(), a("nav", {
+			class: "bless-pagination",
+			"aria-label": l.label
+		}, [o("ul", y, [
+			o("li", null, [c(e, d({ as: h(u)(l.href && S.value > 1 ? l.href(S.value - 1) : void 0, void 0, "button").is }, h(u)(l.href && S.value > 1 ? l.href(S.value - 1) : void 0, void 0, "button").attrs, {
+				type: l.href ? void 0 : "button",
+				class: "bless-pagination__btn bless-pagination__btn--nav",
+				"aria-label": l.prevLabel,
+				disabled: S.value <= 1 || void 0,
+				onClick: r[0] ||= (e) => !l.href && w(S.value - 1)
+			}), {
+				default: _(() => [...r[2] ||= [o("span", { "aria-hidden": "true" }, "‹", -1)]]),
+				_: 1
+			}, 16, [
+				"as",
+				"type",
+				"aria-label",
+				"disabled"
+			])]),
+			(f(!0), a(n, null, p(C.value, (t, n) => (f(), a("li", { key: n }, [t === "…" ? (f(), a("span", b, "…")) : (f(), i(e, d({
+				key: 1,
+				as: h(u)(l.href ? l.href(t) : void 0, void 0, "button").is
+			}, { ref_for: !0 }, h(u)(l.href ? l.href(t) : void 0, void 0, "button").attrs, {
+				type: l.href ? void 0 : "button",
+				class: ["bless-pagination__btn", { "bless-pagination__btn--current": t === S.value }],
+				color: t === S.value ? "accent" : "none",
+				"aria-current": t === S.value ? "page" : void 0,
+				"aria-label": `Page ${t}`,
+				onClick: (e) => !l.href && w(t)
+			}), {
+				default: _(() => [s(m(t), 1)]),
+				_: 2
+			}, 1040, [
+				"as",
+				"type",
+				"class",
+				"color",
+				"aria-current",
+				"aria-label",
+				"onClick"
+			]))]))), 128)),
+			o("li", null, [c(e, d({ as: h(u)(l.href && S.value < l.total ? l.href(S.value + 1) : void 0, void 0, "button").is }, h(u)(l.href && S.value < l.total ? l.href(S.value + 1) : void 0, void 0, "button").attrs, {
+				type: l.href ? void 0 : "button",
+				class: "bless-pagination__btn bless-pagination__btn--nav",
+				"aria-label": l.nextLabel,
+				disabled: S.value >= l.total || void 0,
+				onClick: r[1] ||= (e) => !l.href && w(S.value + 1)
+			}), {
+				default: _(() => [...r[3] ||= [o("span", { "aria-hidden": "true" }, "›", -1)]]),
+				_: 1
+			}, 16, [
+				"as",
+				"type",
+				"aria-label",
+				"disabled"
+			])])
+		])], 8, v));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/BlessPaletteToggle.css

@@ -0,0 +1 @@
+.bless-palette{gap:var(--bless-space-1);display:inline-flex}.bless-palette__swatch{border-radius:var(--bless-radius-plate);background:var(--_c);cursor:pointer;width:20px;height:20px;transform:skewX(var(--bless-skew));transition:border-color var(--bless-duration-fast), opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);border:2px solid #0000;padding:0}.bless-palette__swatch[aria-pressed=true]{border-color:var(--bless-color-text)}.bless-palette__swatch:hover{opacity:var(--bless-hover-opacity)}.bless-palette__swatch:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}

package/dist/components/BlessPaletteToggle.js

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

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    label?: string;
+    /** include the default palette's swatch (Megumi), which clears any other */
+    showDefault?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    showDefault: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessPaletteToggle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { blessPalettes as e, useTheme as t } from "../composables/useTheme.js";
+import { Fragment as n, computed as r, createElementBlock as i, defineComponent as a, normalizeStyle as o, openBlock as s, renderList as c, unref as l } from "vue";
+//#region src/components/BlessPaletteToggle.vue?vue&type=script&setup=true&lang.ts
+var u = ["aria-label"], d = [
+	"aria-label",
+	"title",
+	"aria-pressed",
+	"onClick"
+], f = /*@__PURE__*/ a({
+	name: "BlessPaletteToggle",
+	__name: "BlessPaletteToggle",
+	props: {
+		label: { default: "Palette" },
+		showDefault: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(a) {
+		let f = a, { palette: p, setPalette: m } = t(), h = (e) => e[0].toUpperCase() + e.slice(1), g = r(() => f.showDefault ? e : e.slice(1));
+		return (e, t) => (s(), i("div", {
+			class: "bless-palette",
+			role: "group",
+			"aria-label": a.label
+		}, [(s(!0), i(n, null, c(g.value, (e) => (s(), i("button", {
+			key: e.name,
+			type: "button",
+			class: "bless-palette__swatch",
+			style: o({ "--_c": e.color }),
+			"aria-label": h(e.name),
+			title: h(e.name),
+			"aria-pressed": l(p) === e.name,
+			onClick: (t) => l(m)(e.name)
+		}, null, 12, d))), 128))], 8, u));
+	}
+});
+//#endregion
+export { f as default };

package/dist/components/BlessPanel.css

@@ -0,0 +1 @@
+.bless-panel{border-radius:var(--bless-radius);border:var(--bless-border-width) solid var(--bless-color-border);font-family:var(--bless-font-sans);color:var(--bless-color-text)}.bless-panel--surface{background:var(--bless-color-surface)}.bless-panel__header{align-items:center;gap:var(--bless-space-2);padding:var(--bless-space-2) var(--bless-space-3);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-panel .bless-panel__title{line-height:var(--bless-leading-normal);font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);text-transform:uppercase;border:0;flex:1;margin:0;padding:0}.bless-panel__actions{align-items:center;gap:var(--bless-space-1);display:inline-flex}.bless-panel__toggle{background:var(--bless-color-surface);width:24px;height:24px;color:inherit;font:inherit;cursor:pointer;transform:skewX(var(--bless-skew));transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);border:0}.bless-panel__toggle:hover{opacity:var(--bless-hover-opacity)}.bless-panel__toggle>span{transform:skewX(var(--bless-skew-counter));display:inline-block}.bless-panel__toggle:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-panel__body{padding:var(--bless-space-3);font-size:var(--bless-text-sm);line-height:var(--bless-leading-normal)}.bless-panel__footer{padding:var(--bless-space-2) var(--bless-space-3);border-top:var(--bless-border-width) solid var(--bless-color-border);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}

package/dist/components/BlessPanel.js

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

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

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    title?: string;
+    toggleable?: boolean;
+    surface?: "bg" | "surface";
+    /** heading level of the title, to fit the page's outline */
+    level?: 2 | 3 | 4 | 5 | 6;
+};
+type __VLS_ModelProps = {
+    "collapsed"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_7) => any;
+} & {
+    actions?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    footer?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    surface: "bg" | "surface";
+    level: 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, 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/BlessPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,56 @@
+import { createBlock as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d, unref as f, useId as p, useModel as m, vShow as h, withCtx as g, withDirectives as _ } from "vue";
+//#region src/components/BlessPanel.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-labelledby"], y = { class: "bless-panel__header" }, b = { class: "bless-panel__actions" }, x = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-labelledby"
+], S = { "aria-hidden": "true" }, C = ["id"], w = {
+	key: 0,
+	class: "bless-panel__footer"
+}, T = /*@__PURE__*/ a({
+	name: "BlessPanel",
+	__name: "BlessPanel",
+	props: /*@__PURE__*/ o({
+		title: {},
+		toggleable: { type: Boolean },
+		surface: { default: "bg" },
+		level: { default: 3 }
+	}, {
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {}
+	}),
+	emits: ["update:collapsed"],
+	setup(a) {
+		let o = m(a, "collapsed"), T = p();
+		return (p, m) => (c(), n("section", {
+			class: s(["bless-panel", `bless-panel--${a.surface}`]),
+			"aria-labelledby": `${f(T)}-t`
+		}, [
+			r("header", y, [(c(), e(u(`h${a.level}`), {
+				id: `${f(T)}-t`,
+				class: "bless-panel__title"
+			}, {
+				default: g(() => [l(p.$slots, "title", {}, () => [i(d(a.title), 1)])]),
+				_: 3
+			}, 8, ["id"])), r("div", b, [l(p.$slots, "actions"), a.toggleable ? (c(), n("button", {
+				key: 0,
+				type: "button",
+				class: "bless-panel__toggle",
+				"aria-expanded": !o.value,
+				"aria-controls": f(T),
+				"aria-labelledby": `${f(T)}-t`,
+				onClick: m[0] ||= (e) => o.value = !o.value
+			}, [r("span", S, d(o.value ? "+" : "−"), 1)], 8, x)) : t("", !0)])]),
+			_(r("div", {
+				id: f(T),
+				class: "bless-panel__body"
+			}, [l(p.$slots, "default")], 8, C), [[h, !o.value]]),
+			p.$slots.footer && !o.value ? (c(), n("footer", w, [l(p.$slots, "footer")])) : t("", !0)
+		], 10, v));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/BlessParallax.css

@@ -0,0 +1 @@
+.bless-parallax{background:var(--bless-color-media-bg);color:#fff;font-family:var(--bless-font-sans);position:relative;overflow:hidden}.bless-parallax__media{transform:translateY(var(--_y));will-change:transform;position:absolute;inset:-40% 0}.bless-parallax__media>*{object-fit:cover;width:100%;height:100%}.bless-parallax__content{place-items:center;height:100%;display:grid;position:relative}@media (prefers-reduced-motion:reduce){.bless-parallax__media{inset:0;transform:none}}

package/dist/components/BlessParallax.js

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

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    src?: string;
+    height?: string;
+    /** 0 = fixed, 1 = scrolls with page */ speed?: number;
+    alt?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    media?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    alt: string;
+    height: string;
+    speed: 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/BlessParallax.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeStyle as i, onBeforeUnmount as a, onMounted as o, openBlock as s, ref as c, renderSlot as l } from "vue";
+//#region src/components/BlessParallax.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "bless-parallax__media" }, d = ["src", "alt"], f = { class: "bless-parallax__content" }, p = /*@__PURE__*/ r({
+	name: "BlessParallax",
+	__name: "BlessParallax",
+	props: {
+		src: {},
+		height: { default: "320px" },
+		speed: { default: .5 },
+		alt: { default: "" }
+	},
+	setup(r) {
+		let p = r, m = c(), h = c(0), g = 0;
+		function _() {
+			let e = m.value?.getBoundingClientRect();
+			e && (h.value = (e.top + e.height / 2 - innerHeight / 2) * (p.speed - 1) * -1);
+		}
+		function v() {
+			cancelAnimationFrame(g), g = requestAnimationFrame(_);
+		}
+		return o(() => {
+			_(), addEventListener("scroll", v, { passive: !0 }), addEventListener("resize", v);
+		}), a(() => (removeEventListener("scroll", v), removeEventListener("resize", v), cancelAnimationFrame(g))), (a, o) => (s(), t("div", {
+			ref_key: "root",
+			ref: m,
+			class: "bless-parallax",
+			style: i({
+				height: r.height,
+				"--_y": `${h.value}px`
+			})
+		}, [n("div", u, [l(a.$slots, "media", {}, () => [r.src ? (s(), t("img", {
+			key: 0,
+			src: r.src,
+			alt: r.alt
+		}, null, 8, d)) : e("", !0)])]), n("div", f, [l(a.$slots, "default")])], 4));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BlessPasswordInput.css

@@ -0,0 +1 @@
+.bless-password{gap:var(--bless-space-2);flex-direction:column;display:flex}.bless-password__toggle{min-width:24px;min-height:24px;color:inherit;font:inherit;font-size:var(--bless-text-md);cursor:pointer;background:0 0;border:0;line-height:1}.bless-password__toggle:hover{color:var(--bless-color-text)}.bless-password__toggle:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}

package/dist/components/BlessPasswordInput.js

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

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    /** show the strength meter under the field */
+    meter?: boolean;
+    /** the reveal button's name; its pressed state says whether it's showing */
+    showLabel?: string;
+};
+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;
+}>, {
+    showLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessPasswordInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import e from "./BlessInput.js";
+import t from "./BlessPasswordMeter.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, openBlock as u, ref as d, toDisplayString as f, useModel as p, withCtx as m } from "vue";
+//#region src/components/BlessPasswordInput.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "bless-password" }, g = ["aria-label", "aria-pressed"], _ = { "aria-hidden": "true" }, v = /*@__PURE__*/ s({
+	name: "BlessPasswordInput",
+	inheritAttrs: !1,
+	__name: "BlessPasswordInput",
+	props: /*@__PURE__*/ c({
+		meter: { type: Boolean },
+		showLabel: { default: "Show password" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = p(s, "modelValue"), v = d(!1);
+		return (d, p) => (u(), i("div", h, [o(e, l({ autocomplete: s.meter ? "new-password" : "current-password" }, d.$attrs, {
+			modelValue: c.value,
+			"onUpdate:modelValue": p[1] ||= (e) => c.value = e,
+			type: v.value ? "text" : "password"
+		}), {
+			suffix: m(() => [a("button", {
+				type: "button",
+				class: "bless-password__toggle",
+				"aria-label": s.showLabel,
+				"aria-pressed": v.value,
+				onClick: p[0] ||= (e) => v.value = !v.value
+			}, [a("span", _, f(v.value ? "◉" : "◎"), 1)], 8, g)]),
+			_: 1
+		}, 16, [
+			"autocomplete",
+			"modelValue",
+			"type"
+		]), s.meter ? (u(), n(t, {
+			key: 0,
+			value: c.value,
+			class: "bless-password__meter"
+		}, null, 8, ["value"])) : r("", !0)]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/BlessPasswordMeter.css

@@ -0,0 +1 @@
+.bless-pwmeter{--_c:var(--bless-color-danger);font-family:var(--bless-font-sans);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}.bless-pwmeter[data-score="2"]{--_c:var(--bless-color-warning)}.bless-pwmeter[data-score="3"]{--_c:var(--bless-color-info)}.bless-pwmeter[data-score="4"]{--_c:var(--bless-color-success)}.bless-pwmeter__head{align-items:center;gap:var(--bless-space-2);display:flex}.bless-pwmeter__meter{border-radius:var(--bless-radius);appearance:none;background:var(--bless-color-surface);height:6px;transform:skewX(var(--bless-skew));border:0;flex:1}.bless-pwmeter__meter::-webkit-meter-bar{background:var(--bless-color-surface);border-radius:var(--bless-radius);border:0}.bless-pwmeter__meter::-webkit-meter-optimum-value{background:var(--_c)}.bless-pwmeter__meter::-webkit-meter-suboptimum-value{background:var(--_c)}.bless-pwmeter__meter::-webkit-meter-even-less-good-value{background:var(--_c)}.bless-pwmeter__meter::-moz-meter-bar{background:var(--_c)}.bless-pwmeter__label{min-width:3.5em;font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase}.bless-pwmeter__state{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-pwmeter__rules{margin:var(--bless-space-2) 0 0;gap:2px;padding:0;list-style:none;display:grid}.bless-pwmeter__rule--ok>span{color:var(--bless-color-success);font-weight:var(--bless-font-weight-bold)}

package/dist/components/BlessPasswordMeter.js

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

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

@@ -0,0 +1,21 @@
+export interface BlessPasswordRule {
+    label: string;
+    test: (v: string) => boolean;
+}
+type __VLS_Props = {
+    value: string;
+    /** each passing rule adds one step; default: 8+ chars, lower+upper, digit, symbol */
+    rules?: BlessPasswordRule[];
+    labels?: string[];
+    /** list the rules with pass / fail marks */
+    showRules?: boolean;
+    /** read after each rule for screen readers: [met, not met] */
+    ruleState?: [string, string];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    labels: string[];
+    rules: BlessPasswordRule[];
+    ruleState: [string, string];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessPasswordMeter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderList as l, toDisplayString as u } from "vue";
+//#region src/components/BlessPasswordMeter.vue?vue&type=script&setup=true&lang.ts
+var d = ["data-score"], f = { class: "bless-pwmeter__head" }, p = [
+	"value",
+	"max",
+	"low",
+	"high",
+	"optimum",
+	"aria-label"
+], m = {
+	class: "bless-pwmeter__label",
+	"aria-live": "polite"
+}, h = {
+	key: 0,
+	role: "list",
+	class: "bless-pwmeter__rules"
+}, g = { "aria-hidden": "true" }, _ = { class: "bless-pwmeter__state" }, v = /*@__PURE__*/ o({
+	name: "BlessPasswordMeter",
+	__name: "BlessPasswordMeter",
+	props: {
+		value: {},
+		rules: { default: () => [
+			{
+				label: "8+ characters",
+				test: (e) => e.length >= 8
+			},
+			{
+				label: "Upper and lower case",
+				test: (e) => /[a-z]/.test(e) && /[A-Z]/.test(e)
+			},
+			{
+				label: "A number",
+				test: (e) => /\d/.test(e)
+			},
+			{
+				label: "A symbol",
+				test: (e) => /[^\p{L}\p{N}\s]/u.test(e)
+			}
+		] },
+		labels: { default: () => [
+			"Weak",
+			"Fair",
+			"Good",
+			"Strong"
+		] },
+		showRules: { type: Boolean },
+		ruleState: { default: () => ["met", "not met"] }
+	},
+	setup(o) {
+		let v = o, y = t(() => v.rules.map((e) => e.test(v.value))), b = t(() => y.value.filter(Boolean).length), x = t(() => v.value ? v.labels[Math.min(v.labels.length - 1, Math.max(0, b.value - 1))] : "");
+		return (t, v) => (c(), r("div", {
+			class: "bless-pwmeter",
+			"data-score": b.value
+		}, [i("div", f, [i("meter", {
+			class: "bless-pwmeter__meter",
+			value: b.value,
+			min: "0",
+			max: o.rules.length,
+			low: Math.ceil(o.rules.length / 2),
+			high: o.rules.length - 1,
+			optimum: o.rules.length,
+			"aria-label": `Password strength: ${x.value || "none"}`
+		}, null, 8, p), i("span", m, u(x.value), 1)]), o.showRules ? (c(), r("ul", h, [(c(!0), r(e, null, l(o.rules, (e, t) => (c(), r("li", {
+			key: e.label,
+			class: s({ "bless-pwmeter__rule--ok": y.value[t] })
+		}, [
+			i("span", g, u(y.value[t] ? "✓" : "·"), 1),
+			a(" " + u(e.label) + " ", 1),
+			i("span", _, u(o.ruleState[+!y.value[t]]), 1)
+		], 2))), 128))])) : n("", !0)], 8, d));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/BlessPickList.css

@@ -0,0 +1 @@
+.bless-picklist__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-picklist{gap:var(--bless-space-3);font-family:var(--bless-font-sans);align-items:stretch;display:flex}.bless-picklist__col{border-radius:var(--bless-radius);gap:var(--bless-space-1);flex-direction:column;flex:1;min-width:0;display:flex}.bless-picklist__col .bless-listbox{flex:1}.bless-picklist__title{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-picklist__btns{justify-content:center;gap:var(--bless-space-1);flex-direction:column;display:flex}.bless-picklist__arrow{display:inline-block}[dir=rtl] .bless-picklist__arrow{transform:scaleX(-1)}@media (width<=800px){.bless-picklist{flex-direction:column}.bless-picklist__arrow,[dir=rtl] .bless-picklist__arrow{transform:rotate(90deg)}.bless-picklist__btns{flex-direction:row;justify-content:center}}

package/dist/components/BlessPickList.js

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

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

@@ -0,0 +1,29 @@
+import { BlessOption } from './select';
+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<({
+        sourceLabel?: string;
+        targetLabel?: string;
+        rows?: number;
+    } & {
+        source?: BlessOption<T>[];
+        target?: BlessOption<T>[];
+    }) & {
+        "onUpdate:source"?: ((value: BlessOption<T>[]) => any) | undefined;
+        "onUpdate:target"?: ((value: BlessOption<T>[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((event: "update:source", value: BlessOption<T>[]) => void) & ((event: "update:target", value: BlessOption<T>[]) => 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];
+}) & {};