blessing-ui 0.1.0

package/dist/components/BlessCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,69 @@
+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, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useAttrs as h, useModel as g, vModelCheckbox as _, withDirectives as v } from "vue";
+//#region src/components/BlessCheckbox.vue?vue&type=script&setup=true&lang.ts
+var y = ["for"], b = [
+	"id",
+	"value",
+	"disabled",
+	"indeterminate",
+	"aria-invalid",
+	"aria-describedby"
+], x = {
+	key: 0,
+	class: "bless-checkbox__text"
+}, S = { class: "bless-checkbox__label" }, C = ["id"], w = /*@__PURE__*/ s({
+	name: "BlessCheckbox",
+	inheritAttrs: !1,
+	__name: "BlessCheckbox",
+	props: /*@__PURE__*/ c({
+		id: {},
+		value: {},
+		indeterminate: { type: Boolean },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		description: {}
+	}, {
+		modelValue: {
+			type: [Boolean, Array],
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = s, w = g(s, "modelValue"), T = t(c), E = n(), D = h(), O = r(() => c.invalid || E.invalid.value), k = r(() => e(c.description && `${T()}-desc`, E.describedby.value, D["aria-describedby"]));
+		return (e, t) => (d(), a("label", {
+			class: u(["bless-checkbox", {
+				"bless-checkbox--disabled": s.disabled,
+				"bless-checkbox--invalid": O.value
+			}]),
+			for: m(T)()
+		}, [
+			v(o("input", l(e.$attrs, {
+				id: m(T)(),
+				"onUpdate:modelValue": t[0] ||= (e) => w.value = e,
+				type: "checkbox",
+				value: s.value,
+				disabled: s.disabled,
+				indeterminate: s.indeterminate,
+				class: "bless-checkbox__input",
+				"aria-invalid": O.value || void 0,
+				"aria-describedby": k.value
+			}), null, 16, b), [[_, w.value]]),
+			t[1] ||= o("span", {
+				class: "bless-checkbox__box",
+				"aria-hidden": "true"
+			}, [o("svg", {
+				viewBox: "0 0 16 16",
+				class: "bless-checkbox__check"
+			}, [o("path", { d: "M3 8.5l3 3 7-7" })]), o("span", { class: "bless-checkbox__mixed" })], -1),
+			e.$slots.default || s.description ? (d(), a("span", x, [o("span", S, [f(e.$slots, "default")]), s.description ? (d(), a("span", {
+				key: 0,
+				id: `${m(T)()}-desc`,
+				class: "bless-checkbox__description"
+			}, p(s.description), 9, C)) : i("", !0)])) : i("", !0)
+		], 10, y));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/BlessChip.css

@@ -0,0 +1 @@
+.bless-chip{border-radius:var(--bless-radius-petal);align-items:center;gap:var(--bless-space-1);padding:2px var(--bless-space-3);background:var(--bless-color-surface);color:var(--bless-color-text);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);line-height:var(--bless-leading-normal);transform:skewX(var(--bless-skew));display:inline-flex}.bless-chip>*{transform:skewX(var(--bless-skew-counter))}.bless-chip--sm{padding:0 var(--bless-space-2);font-size:var(--bless-text-xs)}.bless-chip--accent{background:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-chip--text{background:var(--bless-color-text);color:var(--bless-color-on-text)}.bless-chip__img{object-fit:cover;border-radius:var(--bless-radius-petal);width:18px;height:18px}.bless-chip__remove{min-width:24px;min-height:24px;color:inherit;font:inherit;cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);background:0 0;border:0;place-items:center;margin-block:-4px;margin-inline-end:calc(-1 * var(--bless-space-2));padding:0;line-height:1;display:inline-grid}.bless-chip__remove:hover{opacity:var(--bless-hover-opacity)}.bless-chip__remove:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:1px}

package/dist/components/BlessChip.js

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

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    image?: string;
+    removable?: boolean;
+    removeLabel?: string;
+    color?: "surface" | "accent" | "text";
+    size?: "sm" | "md";
+};
+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, {
+    remove: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+}>, {
+    color: "surface" | "accent" | "text";
+    size: "sm" | "md";
+    removeLabel: 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/BlessChip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,41 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
+//#region src/components/BlessChip.vue?vue&type=script&setup=true&lang.ts
+var l = ["src"], u = {
+	key: 1,
+	class: "bless-chip__icon",
+	"aria-hidden": "true"
+}, d = { class: "bless-chip__label" }, f = ["aria-label"], p = /*@__PURE__*/ i({
+	name: "BlessChip",
+	__name: "BlessChip",
+	props: {
+		label: {},
+		icon: {},
+		image: {},
+		removable: { type: Boolean },
+		removeLabel: { default: "Remove" },
+		color: { default: "surface" },
+		size: { default: "md" }
+	},
+	emits: ["remove"],
+	setup(i, { emit: p }) {
+		let m = p;
+		return (p, h) => (o(), t("span", { class: a(["bless-chip", [`bless-chip--${i.color}`, `bless-chip--${i.size}`]]) }, [
+			i.image ? (o(), t("img", {
+				key: 0,
+				src: i.image,
+				alt: "",
+				class: "bless-chip__img"
+			}, null, 8, l)) : i.icon ? (o(), t("span", u, c(i.icon), 1)) : e("", !0),
+			n("span", d, [s(p.$slots, "default", {}, () => [r(c(i.label), 1)])]),
+			i.removable ? (o(), t("button", {
+				key: 2,
+				type: "button",
+				class: "bless-chip__remove",
+				"aria-label": `${i.removeLabel} ${i.label ?? ""}`,
+				onClick: h[0] ||= (e) => m("remove")
+			}, [...h[1] ||= [n("span", { "aria-hidden": "true" }, "×", -1)]], 8, f)) : e("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BlessCircularProgress.css

@@ -0,0 +1 @@
+.bless-circular{--_c:var(--bless-color-accent);width:var(--_s);height:var(--_s);font-family:var(--bless-font-sans);color:var(--bless-color-text);place-items:center;display:inline-grid;position:relative}.bless-circular--text{--_c:var(--bless-color-text)}.bless-circular--danger{--_c:var(--bless-color-danger)}.bless-circular--success{--_c:var(--bless-color-success)}.bless-circular--warning{--_c:var(--bless-color-warning)}.bless-circular--info{--_c:var(--bless-color-info)}.bless-circular svg{grid-area:1/1;transform:rotate(-90deg)}.bless-circular__track{stroke:var(--bless-color-surface)}.bless-circular__bar{stroke:var(--_c);stroke-linecap:butt;transition:stroke-dashoffset var(--bless-duration-slow) var(--bless-ease-out)}.bless-circular--indeterminate svg{animation:bless-circular-spin 1s var(--bless-ease-linear) infinite}@keyframes bless-circular-spin{to{transform:rotate(270deg)}}.bless-circular__value{font-size:calc(var(--_s) * .26);font-weight:var(--bless-font-weight-bold);font-variant-numeric:tabular-nums;grid-area:1/1}@media (prefers-reduced-motion:reduce){.bless-circular--indeterminate svg{animation-duration:2s}}

package/dist/components/BlessCircularProgress.js

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

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

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    /** omit for indeterminate */
+    value?: number;
+    max?: number;
+    size?: number;
+    thickness?: number;
+    color?: "accent" | "text" | "danger" | "success" | "warning" | "info";
+    label?: string;
+    showValue?: boolean;
+    format?: (v: number) => string;
+};
+declare var __VLS_1: {
+    value: number;
+    percent: number;
+};
+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<{}>, {
+    color: "accent" | "text" | "danger" | "success" | "warning" | "info";
+    size: number;
+    max: number;
+    showValue: boolean;
+    thickness: 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/BlessCircularProgress.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,82 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+//#region src/components/BlessCircularProgress.vue?vue&type=script&setup=true&lang.ts
+var d = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-valuemax"
+], f = [
+	"viewBox",
+	"width",
+	"height"
+], p = [
+	"cx",
+	"cy",
+	"r",
+	"stroke-width"
+], m = [
+	"cx",
+	"cy",
+	"r",
+	"stroke-width",
+	"stroke-dasharray",
+	"stroke-dashoffset"
+], h = {
+	key: 0,
+	class: "bless-circular__value"
+}, g = /*@__PURE__*/ a({
+	name: "BlessCircularProgress",
+	__name: "BlessCircularProgress",
+	props: {
+		value: {},
+		max: { default: 100 },
+		size: { default: 48 },
+		thickness: { default: 4 },
+		color: { default: "accent" },
+		label: {},
+		showValue: {
+			type: Boolean,
+			default: !1
+		},
+		format: {}
+	},
+	setup(a) {
+		let g = a, _ = e(() => (g.size - g.thickness) / 2), v = e(() => 2 * Math.PI * _.value), y = e(() => g.value == null ? 0 : Math.min(1, Math.max(0, g.value / g.max))), b = e(() => (g.format ?? ((e) => `${Math.round(e / g.max * 100)}%`))(g.value ?? 0));
+		return (e, g) => (c(), n("span", {
+			class: o(["bless-circular", [`bless-circular--${a.color}`, { "bless-circular--indeterminate": a.value == null }]]),
+			style: s({ "--_s": `${a.size}px` }),
+			role: "progressbar",
+			"aria-label": a.label ?? "Progress",
+			"aria-valuenow": a.value,
+			"aria-valuetext": a.value != null && a.format ? b.value : void 0,
+			"aria-valuemin": "0",
+			"aria-valuemax": a.max
+		}, [(c(), n("svg", {
+			viewBox: `0 0 ${a.size} ${a.size}`,
+			width: a.size,
+			height: a.size,
+			"aria-hidden": "true"
+		}, [r("circle", {
+			class: "bless-circular__track",
+			cx: a.size / 2,
+			cy: a.size / 2,
+			r: _.value,
+			"stroke-width": a.thickness,
+			fill: "none"
+		}, null, 8, p), r("circle", {
+			class: "bless-circular__bar",
+			cx: a.size / 2,
+			cy: a.size / 2,
+			r: _.value,
+			"stroke-width": a.thickness,
+			fill: "none",
+			"stroke-dasharray": v.value,
+			"stroke-dashoffset": a.value == null ? v.value * .75 : v.value * (1 - y.value)
+		}, null, 8, m)], 8, f)), a.showValue && a.value != null ? (c(), n("span", h, [l(e.$slots, "default", {
+			value: a.value,
+			percent: y.value * 100
+		}, () => [i(u(b.value), 1)])])) : t("", !0)], 14, d));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BlessClientOnly.js

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

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

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    fallback?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/BlessClientOnly.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,12 @@
+import { defineComponent as e, onMounted as t, ref as n, renderSlot as r } from "vue";
+//#region src/components/BlessClientOnly.vue?vue&type=script&setup=true&lang.ts
+var i = /*@__PURE__*/ e({
+	name: "BlessClientOnly",
+	__name: "BlessClientOnly",
+	setup(e) {
+		let i = n(!1);
+		return t(() => i.value = !0), (e, t) => i.value ? r(e.$slots, "default", {}, void 0, void 0, 0) : r(e.$slots, "fallback", {}, void 0, void 0, 1);
+	}
+});
+//#endregion
+export { i as default };

package/dist/components/BlessCollapsible.css

@@ -0,0 +1 @@
+.bless-collapsible{border-radius:var(--bless-radius);font-family:var(--bless-font-sans);color:var(--bless-color-text);border-bottom:var(--bless-border-width) solid var(--bless-color-border)}.bless-collapsible__summary{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-3) 0;cursor:pointer;font-size:var(--bless-text-md);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);list-style:none;display:flex}.bless-collapsible__summary::-webkit-details-marker{display:none}.bless-collapsible__summary:hover{opacity:var(--bless-hover-opacity)}.bless-collapsible__summary:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-collapsible__title{flex:1}.bless-collapsible__chevron{border-inline-end:2px solid;width:8px;height:8px;transition:transform var(--bless-duration-base) var(--bless-ease-in-out);border-bottom:2px solid;transform:rotate(45deg)translateY(-2px)}.bless-collapsible[open]>.bless-collapsible__summary .bless-collapsible__chevron{transform:rotate(-135deg)translateY(-2px)}.bless-collapsible__content{display:grid}.bless-collapsible__inner{padding:0 0 var(--bless-space-4);font-size:var(--bless-text-sm);line-height:var(--bless-leading-normal)}.bless-collapsible--disabled{opacity:.4}.bless-collapsible--disabled .bless-collapsible__summary{cursor:not-allowed}@supports (interpolate-size:allow-keywords){.bless-collapsible::details-content{height:0;transition:height var(--bless-duration-slow) var(--bless-ease-in-out), content-visibility var(--bless-duration-slow) allow-discrete;overflow:clip}.bless-collapsible[open]::details-content{height:auto}}

package/dist/components/BlessCollapsible.js

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

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

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    title?: string;
+    /** native exclusive-open group (details name=) */
+    name?: string;
+    disabled?: boolean;
+};
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/BlessCollapsible.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { createElementBlock as e, createElementVNode as t, createTextVNode as n, defineComponent as r, mergeModels as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c, useModel as l } from "vue";
+//#region src/components/BlessCollapsible.vue?vue&type=script&setup=true&lang.ts
+var u = ["open", "name"], d = ["tabindex", "aria-disabled"], f = { class: "bless-collapsible__title" }, p = { class: "bless-collapsible__content" }, m = { class: "bless-collapsible__inner" }, h = /*@__PURE__*/ r({
+	name: "BlessCollapsible",
+	__name: "BlessCollapsible",
+	props: /*@__PURE__*/ i({
+		title: {},
+		name: {},
+		disabled: { type: Boolean }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(r) {
+		let i = l(r, "open");
+		return (l, h) => (o(), e("details", {
+			class: a(["bless-collapsible", { "bless-collapsible--disabled": r.disabled }]),
+			open: i.value,
+			name: r.name,
+			onToggle: h[1] ||= (e) => i.value = e.target.open
+		}, [t("summary", {
+			class: "bless-collapsible__summary",
+			tabindex: r.disabled ? -1 : void 0,
+			"aria-disabled": r.disabled || void 0,
+			onClick: h[0] ||= (e) => r.disabled && e.preventDefault()
+		}, [t("span", f, [s(l.$slots, "title", {}, () => [n(c(r.title), 1)])]), h[2] ||= t("span", {
+			class: "bless-collapsible__chevron",
+			"aria-hidden": "true"
+		}, null, -1)], 8, d), t("div", p, [t("div", m, [s(l.$slots, "default")])])], 42, u));
+	}
+});
+//#endregion
+export { h as default };

package/dist/components/BlessColorPicker.css

@@ -0,0 +1 @@
+.bless-color{align-items:center;gap:var(--bless-space-2);font-family:var(--bless-font-sans);color:var(--bless-color-text);display:inline-flex}.bless-color__well{border-radius:var(--bless-radius-plate);background:var(--_c);border:var(--bless-border-width) solid var(--bless-color-border);cursor:pointer;width:36px;height:36px;transform:skewX(var(--bless-skew));display:inline-block;position:relative}.bless-color__well:has(:focus-visible){outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-color__input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.bless-color__value{font-size:var(--bless-text-xs);letter-spacing:var(--bless-tracking-wide);color:var(--bless-color-text-muted)}.bless-color__swatches{gap:var(--bless-space-1);display:inline-flex}.bless-color__swatch{background:var(--_c);cursor:pointer;width:20px;height:20px;transform:skewX(var(--bless-skew));transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);border:2px solid #0000}.bless-color__swatch:hover{opacity:var(--bless-hover-opacity)}.bless-color__swatch--on{border-color:var(--bless-color-text)}.bless-color__swatch:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-color--disabled{opacity:.4;pointer-events:none}

package/dist/components/BlessColorPicker.js

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

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    id?: string;
+    /** preset swatches: hex, or { value, label } so a screen reader hears a name, not a hex */
+    swatches?: (string | {
+        value: string;
+        label: string;
+    })[];
+    disabled?: boolean;
+    /** accessible name when there is no visible label (a BlessField's label is used otherwise) */
+    label?: string;
+    /** show the hex next to the well */
+    showValue?: 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;
+}>, {
+    showValue: boolean;
+    swatches: (string | {
+        value: string;
+        label: string;
+    })[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,73 @@
+import { useFieldId as e } from "../composables/useFieldId.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, toDisplayString as f, unref as p, useModel as m, vModelText as h, withDirectives as g } from "vue";
+//#region src/components/BlessColorPicker.vue?vue&type=script&setup=true&lang.ts
+var _ = ["for"], v = [
+	"id",
+	"disabled",
+	"aria-label"
+], y = ["for"], b = ["aria-label"], x = [
+	"aria-label",
+	"aria-pressed",
+	"disabled",
+	"onClick"
+], S = /*@__PURE__*/ a({
+	name: "BlessColorPicker",
+	inheritAttrs: !1,
+	__name: "BlessColorPicker",
+	props: /*@__PURE__*/ o({
+		id: {},
+		swatches: { default: () => [] },
+		disabled: { type: Boolean },
+		label: {},
+		showValue: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: { default: "#e85078" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(a) {
+		let o = a, S = m(a, "modelValue"), C = e(o), w = (e) => typeof e == "string" ? {
+			value: e,
+			label: e
+		} : e;
+		return (e, o) => (u(), r("div", { class: c(["bless-color", { "bless-color--disabled": a.disabled }]) }, [
+			i("label", {
+				for: p(C)(),
+				class: "bless-color__well",
+				style: l({ "--_c": S.value })
+			}, [g(i("input", s(e.$attrs, {
+				id: p(C)(),
+				"onUpdate:modelValue": o[0] ||= (e) => S.value = e,
+				type: "color",
+				class: "bless-color__input",
+				disabled: a.disabled,
+				"aria-label": a.label
+			}), null, 16, v), [[h, S.value]])], 12, _),
+			a.showValue ? (u(), r("output", {
+				key: 0,
+				for: p(C)(),
+				class: "bless-color__value"
+			}, f(S.value), 9, y)) : n("", !0),
+			a.swatches.length ? (u(), r("div", {
+				key: 1,
+				class: "bless-color__swatches",
+				role: "group",
+				"aria-label": `${a.label ?? "Colour"} presets`
+			}, [(u(!0), r(t, null, d(a.swatches.map(w), (e) => (u(), r("button", {
+				key: e.value,
+				type: "button",
+				class: c(["bless-color__swatch", { "bless-color__swatch--on": e.value.toLowerCase() === S.value.toLowerCase() }]),
+				style: l({ "--_c": e.value }),
+				"aria-label": e.label,
+				"aria-pressed": e.value.toLowerCase() === S.value.toLowerCase(),
+				disabled: a.disabled,
+				onClick: (t) => S.value = e.value
+			}, null, 14, x))), 128))], 8, b)) : n("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/BlessCombobox.css

@@ -0,0 +1 @@
+.bless-combobox{--_h:40px;--_fs:var(--bless-text-md);font-family:var(--bless-font-sans);color:var(--bless-color-text);position:relative}.bless-combobox--sm{--_h:32px;--_fs:var(--bless-text-sm)}.bless-combobox--lg{--_h:48px;--_fs:var(--bless-text-lg)}.bless-combobox__field{border-radius:var(--bless-radius-plate);align-items:center;gap:var(--bless-space-1);min-height:var(--_h);padding:var(--bless-space-1) var(--bless-space-8) var(--bless-space-1) var(--bless-space-3);box-sizing:border-box;border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);cursor:text;background:0 0;flex-wrap:wrap;display:flex;position:relative}.bless-combobox__field:after{content:"";inset-inline-start:0;bottom:calc(-2 * var(--bless-border-width));width:100%;height:calc(2 * var(--bless-border-width));background:var(--bless-color-accent);transform-origin:0;transition:transform var(--bless-duration-slow) var(--bless-ease-out);position:absolute;transform:scaleX(0)}[dir=rtl] .bless-combobox__field:after{transform-origin:100%}.bless-combobox--open .bless-combobox__field:after,.bless-combobox__field:focus-within:after{transform:scaleX(1)}.bless-combobox__input{min-width:60px;height:calc(var(--_h) - 2 * var(--bless-space-1));font:inherit;font-size:var(--_fs);color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-combobox__input::placeholder{color:var(--bless-color-text-muted)}.bless-combobox__chevron{inset-inline-end:var(--bless-space-3);border-inline-end:2px solid;pointer-events:none;width:8px;height:8px;transition:transform var(--bless-duration-base);border-bottom:2px solid;position:absolute;top:50%;transform:translateY(-70%)rotate(45deg)}.bless-combobox__chip{font-size:var(--bless-text-xs);align-items:center;gap:4px;display:inline-flex}.bless-combobox__chip-x{color:inherit;font:inherit;cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out);background:0 0;border:0;padding:0 2px;line-height:1}.bless-combobox__chip-x:hover{opacity:var(--bless-hover-opacity)}.bless-combobox__panel{inset:unset;border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);box-shadow:var(--bless-shadow-plate);margin:0;padding:0;position:fixed}.bless-combobox__list{max-height:240px;padding:var(--bless-space-1) 0;scrollbar-width:thin;overflow-y:auto}.bless-combobox__option{align-items:center;gap:var(--bless-space-2);padding:var(--bless-space-2) var(--bless-space-3);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-combobox__option--active{background:var(--bless-color-surface)}.bless-combobox__option--selected{font-weight:var(--bless-font-weight-bold)}.bless-combobox__option[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-combobox__check{width:1em;font-size:var(--bless-text-xs);flex:none}.bless-combobox__empty{padding:var(--bless-space-3);font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);margin:0}.bless-combobox--invalid .bless-combobox__field{border-bottom-color:var(--bless-color-danger)}.bless-combobox--disabled{opacity:.4;pointer-events:none}.bless-combobox__field{transform:skewX(var(--bless-skew))}.bless-combobox__field>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}.bless-combobox__field>:first-child{padding-inline-start:calc(var(--bless-space-3) + 4px)}.bless-combobox__field>:last-child{padding-inline-end:calc(var(--bless-space-3) + 4px)}.bless-combobox__field>.bless-combobox__chevron{clip-path:polygon(0 0,18% 0,50% 55%,82% 0,100% 0,50% 100%);width:11px;height:7px;transform:skewX(var(--bless-skew-counter)) translateY(-50%);background:currentColor;border:0;inset-inline-end:calc(var(--bless-space-3) + 4px)}.bless-combobox--open .bless-combobox__field>.bless-combobox__chevron{transform:skewX(var(--bless-skew-counter)) translateY(-50%) scaleY(-1)}

package/dist/components/BlessCombobox.js

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

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

@@ -0,0 +1,42 @@
+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<({
+        id?: string;
+        options: BlessOption<T>[];
+        placeholder?: string;
+        multiple?: boolean;
+        /** allow creating a new option from the query; emits `create` */
+        creatable?: boolean;
+        disabled?: boolean;
+        invalid?: boolean;
+        emptyText?: string;
+        size?: "sm" | "md" | "lg";
+        /** accessible name when there is no <label for> */
+        label?: string;
+    } & {
+        modelValue?: T | T[] | undefined;
+    }) & {
+        onSearch?: ((query: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | T[] | undefined) => any) | undefined;
+        onCreate?: ((label: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        option?: (props: {
+            option: BlessOption<T>;
+        }) => any;
+    };
+    emit: (((evt: "search", query: string) => void) & ((evt: "create", label: string) => void)) & ((event: "update:modelValue", value: T | 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];
+}) & {};