@poveste/controls 0.14.0 → 0.16.0

package/dist/index.es.js

@@ -1,22 +1,1677 @@
-import { t as e } from "./HstWrapper-C557fRoN.es.js";
-import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineAsyncComponent as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, onUnmounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, vModelText as x, watch as S, withCtx as C, withDirectives as w, withKeys as T, withModifiers as E } from "@poveste/vendors/vue";
-import { Dropdown as ee, VTooltip as D } from "@poveste/vendors/floating-vue";
-import { Icon as O } from "@poveste/vendors/iconify";
-import { useClipboard as te } from "@poveste/vendors/vue-use";
-//#endregion
-//#region src/components/button/HstButton.vue
-var k = /* @__PURE__ */ u({
+import { C as e, D as t, O as n, _ as r, a as i, b as a, k as o, m as s, n as c, r as l, t as u, u as d, v as f } from "./HstWrapper-Bm5H3_to.es.js";
+import { a as p, i as m, n as h, o as g, r as _, s as v, t as y } from "./PopoverTrigger-BVAfE9fE.es.js";
+import { n as ee, r as b, t as x } from "./VisuallyHiddenInput-0it-_FH2.es.js";
+import { t as te } from "./useKbd-DQM4Oqri.es.js";
+import { Fragment as S, computed as C, createBlock as w, createCommentVNode as T, createElementBlock as E, createElementVNode as D, createTextVNode as O, createVNode as k, defineAsyncComponent as A, defineComponent as j, getCurrentInstance as ne, guardReactiveProps as M, mergeProps as N, nextTick as P, normalizeClass as F, normalizeProps as I, normalizeStyle as L, onBeforeMount as re, onMounted as ie, onUnmounted as R, openBlock as z, ref as B, renderList as V, renderSlot as H, resolveDynamicComponent as U, shallowRef as ae, toDisplayString as W, toRefs as G, unref as K, useAttrs as oe, vModelText as se, watch as ce, withCtx as q, withDirectives as J, withKeys as Y, withMemo as le, withModifiers as X } from "@poveste/vendors/vue";
+import { createEventHook as ue, useClipboard as de, useEventListener as fe, useLiveAnnouncer as pe, useVModel as Z } from "@poveste/vendors/vue-use";
+import { Icon as me } from "@poveste/vendors/iconify";
+//#region src/components/button/HstButton.vue?vue&type=script&setup=true&lang.ts
+var he = ["data-color"], ge = /* @__PURE__ */ j({
 	name: "HstButton",
 	props: { color: {} },
 	setup(e) {
-		let t = {
-			default: "bg-gray-200 dark:bg-gray-750 text-gray-900 dark:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900",
-			primary: "bg-primary-500 hover:bg-primary-600 text-white dark:text-black",
-			flat: "bg-transparent hover:bg-gray-500/20 text-gray-900 dark:text-gray-100"
-		};
-		return (n, r) => (h(), a("button", { class: f(["poveste-button cursor-pointer rounded-sm border-none", t[e.color ?? "default"]]) }, [v(n.$slots, "default")], 2));
-	}
-}), ne = { class: "flex gap-px border border-solid border-black/25 dark:border-white/25 rounded-sm p-px" }, re = /* @__PURE__ */ u({
+		return (t, n) => (z(), E("button", {
+			class: "poveste-button",
+			"data-slot": "button",
+			"data-color": e.color ?? "default"
+		}, [H(t.$slots, "default")], 8, he));
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/ohash@2.0.11/node_modules/ohash/dist/shared/ohash.D__AXeF1.mjs
+function _e(e) {
+	return typeof e == "string" ? `'${e}'` : new ve().serialize(e);
+}
+var ve = /*@__PURE__*/ function() {
+	class e {
+		#e = /* @__PURE__ */ new Map();
+		compare(e, t) {
+			let n = typeof e, r = typeof t;
+			return n === "string" && r === "string" ? e.localeCompare(t) : n === "number" && r === "number" ? e - t : String.prototype.localeCompare.call(this.serialize(e, !0), this.serialize(t, !0));
+		}
+		serialize(e, t) {
+			if (e === null) return "null";
+			switch (typeof e) {
+				case "string": return t ? e : `'${e}'`;
+				case "bigint": return `${e}n`;
+				case "object": return this.$object(e);
+				case "function": return this.$function(e);
+			}
+			return String(e);
+		}
+		serializeObject(e) {
+			let t = Object.prototype.toString.call(e);
+			if (t !== "[object Object]") return this.serializeBuiltInType(t.length < 10 ? `unknown:${t}` : t.slice(8, -1), e);
+			let n = e.constructor, r = n === Object || n === void 0 ? "" : n.name;
+			if (r !== "" && globalThis[r] === n) return this.serializeBuiltInType(r, e);
+			if (typeof e.toJSON == "function") {
+				let t = e.toJSON();
+				return r + (typeof t == "object" && t ? this.$object(t) : `(${this.serialize(t)})`);
+			}
+			return this.serializeObjectEntries(r, Object.entries(e));
+		}
+		serializeBuiltInType(e, t) {
+			let n = this["$" + e];
+			if (n) return n.call(this, t);
+			if (typeof t?.entries == "function") return this.serializeObjectEntries(e, t.entries());
+			throw Error(`Cannot serialize ${e}`);
+		}
+		serializeObjectEntries(e, t) {
+			let n = Array.from(t).sort((e, t) => this.compare(e[0], t[0])), r = `${e}{`;
+			for (let e = 0; e < n.length; e++) {
+				let [t, i] = n[e];
+				r += `${this.serialize(t, !0)}:${this.serialize(i)}`, e < n.length - 1 && (r += ",");
+			}
+			return r + "}";
+		}
+		$object(e) {
+			let t = this.#e.get(e);
+			return t === void 0 && (this.#e.set(e, `#${this.#e.size}`), t = this.serializeObject(e), this.#e.set(e, t)), t;
+		}
+		$function(e) {
+			let t = Function.prototype.toString.call(e);
+			return t.slice(-15) === "[native code] }" ? `${e.name || ""}()[native]` : `${e.name}(${e.length})${t.replace(/\s*\n\s*/g, "")}`;
+		}
+		$Array(e) {
+			let t = "[";
+			for (let n = 0; n < e.length; n++) t += this.serialize(e[n]), n < e.length - 1 && (t += ",");
+			return t + "]";
+		}
+		$Date(e) {
+			try {
+				return `Date(${e.toISOString()})`;
+			} catch {
+				return "Date(null)";
+			}
+		}
+		$ArrayBuffer(e) {
+			return `ArrayBuffer[${new Uint8Array(e).join(",")}]`;
+		}
+		$Set(e) {
+			return `Set${this.$Array(Array.from(e).sort((e, t) => this.compare(e, t)))}`;
+		}
+		$Map(e) {
+			return this.serializeObjectEntries("Map", e.entries());
+		}
+	}
+	for (let t of [
+		"Error",
+		"RegExp",
+		"URL"
+	]) e.prototype["$" + t] = function(e) {
+		return `${t}(${e})`;
+	};
+	for (let t of [
+		"Int8Array",
+		"Uint8Array",
+		"Uint8ClampedArray",
+		"Int16Array",
+		"Uint16Array",
+		"Int32Array",
+		"Uint32Array",
+		"Float32Array",
+		"Float64Array"
+	]) e.prototype["$" + t] = function(e) {
+		return `${t}[${e.join(",")}]`;
+	};
+	for (let t of ["BigInt64Array", "BigUint64Array"]) e.prototype["$" + t] = function(e) {
+		return `${t}[${e.join("n,")}${e.length > 0 ? "n" : ""}]`;
+	};
+	return e;
+}();
+function Q(e, t) {
+	return e === t || _e(e) === _e(t);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/shared/arrays.js
+function ye(e, t, n) {
+	let r = e.findIndex((e) => Q(e, t)), i = e.findIndex((e) => Q(e, n));
+	if (r === -1 || i === -1) return [];
+	let [a, o] = [r, i].sort((e, t) => e - t);
+	return e.slice(a, o + 1);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/shared/isValueEqualOrExist.js
+function be(e, n) {
+	return t(e) ? !1 : Array.isArray(e) ? e.some((e) => Q(e, n)) : Q(e, n);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/shared/useForwardScopeId.js
+function xe() {
+	let e = ne()?.vnode?.scopeId;
+	return e ? { [e]: "" } : {};
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/shared/useTypeahead.js
+function Se(t) {
+	let n = e("", 1e3);
+	return {
+		search: n,
+		handleTypeaheadSearch: (e, r) => {
+			if (n.value += e, t) t(e);
+			else {
+				let e = v(), t = r.map((e) => ({
+					...e,
+					textValue: e.value?.textValue ?? e.ref.textContent?.trim() ?? ""
+				})), i = t.find((t) => t.ref === e), a = we(t.map((e) => e.textValue), n.value, i?.textValue), o = t.find((e) => e.textValue === a);
+				return o && o.ref.focus(), o?.ref;
+			}
+		},
+		resetTypeahead: () => {
+			n.value = "";
+		}
+	};
+}
+function Ce(e, t) {
+	return e.map((n, r) => e[(t + r) % e.length]);
+}
+function we(e, t, n) {
+	let r = t.length > 1 && Array.from(t).every((e) => e === t[0]) ? t[0] : t, i = n ? e.indexOf(n) : -1, a = Ce(e, Math.max(i, 0));
+	r.length === 1 && (a = a.filter((e) => e !== n));
+	let o = a.find((e) => e.toLowerCase().startsWith(r.toLowerCase()));
+	return o === n ? void 0 : o;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/shared/useSingleOrMultipleValue.js
+function Te({ type: e, defaultValue: t, modelValue: n }) {
+	let r = n || t;
+	return n !== void 0 || t !== void 0 ? Array.isArray(r) ? "multiple" : "single" : e ?? "single";
+}
+function Ee({ type: e, defaultValue: t, modelValue: n }) {
+	return e || Te({
+		type: e,
+		defaultValue: t,
+		modelValue: n
+	});
+}
+function De({ type: e, defaultValue: t }) {
+	return t === void 0 ? e === "single" ? void 0 : [] : t;
+}
+function Oe(e, t) {
+	let n = C(() => Ee(e)), r = Z(e, "modelValue", t, {
+		defaultValue: De(e),
+		passive: e.modelValue === void 0,
+		deep: !0
+	});
+	function i(e) {
+		if (n.value === "single") r.value = Q(e, r.value) ? void 0 : e;
+		else {
+			let t = Array.isArray(r.value) ? [...r.value || []] : [r.value].filter(Boolean);
+			if (be(t, e)) {
+				let n = t.findIndex((t) => Q(t, e));
+				t.splice(n, 1);
+			} else t.push(e);
+			r.value = t;
+		}
+	}
+	return {
+		modelValue: r,
+		changeModelValue: i,
+		isSingle: C(() => n.value === "single")
+	};
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/utils.js
+function ke(e, t, n) {
+	return e === void 0 ? !1 : Array.isArray(e) ? e.some((e) => Ae(e, t, n)) : Ae(e, t, n);
+}
+function Ae(e, t, n) {
+	return e === void 0 || t === void 0 ? !1 : typeof e == "string" ? e === t : typeof n == "function" ? n(e, t) : typeof n == "string" ? e?.[n] === t?.[n] : Q(e, t);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/RovingFocus/utils.js
+var je = "rovingFocusGroup.onEntryFocus", Me = {
+	bubbles: !1,
+	cancelable: !0
+}, Ne = {
+	ArrowLeft: "prev",
+	ArrowUp: "prev",
+	ArrowRight: "next",
+	ArrowDown: "next",
+	PageUp: "first",
+	Home: "first",
+	PageDown: "last",
+	End: "last"
+};
+function Pe(e, t) {
+	return t === "rtl" ? e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e : e;
+}
+function Fe(e, t, n) {
+	let r = Pe(e.key, n);
+	if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(r)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(r))) return Ne[r];
+}
+function Ie(e, t = !1) {
+	let n = v();
+	for (let r of e) if (r === n || (r.focus({ preventScroll: t }), v() !== n)) return;
+}
+function Le(e, t) {
+	return e.map((n, r) => e[(t + r) % e.length]);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxRoot.js
+var [Re, ze] = /*#__PURE__*/ o("ListboxRoot"), [Be, Ve] = /*#__PURE__*/ o("ListboxHighlightScroll"), He = /* @__PURE__ */ j({
+	__name: "ListboxRoot",
+	props: {
+		modelValue: {
+			type: null,
+			required: !1
+		},
+		defaultValue: {
+			type: null,
+			required: !1
+		},
+		multiple: {
+			type: Boolean,
+			required: !1
+		},
+		orientation: {
+			type: String,
+			required: !1,
+			default: "vertical"
+		},
+		dir: {
+			type: String,
+			required: !1
+		},
+		disabled: {
+			type: Boolean,
+			required: !1
+		},
+		selectionBehavior: {
+			type: String,
+			required: !1,
+			default: "toggle"
+		},
+		highlightOnHover: {
+			type: Boolean,
+			required: !1
+		},
+		by: {
+			type: [String, Function],
+			required: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"highlight",
+		"entryFocus",
+		"leave"
+	],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, { multiple: o, highlightOnHover: s, orientation: c, disabled: l, selectionBehavior: u, dir: p } = G(r), { getItems: m, getItem: h } = ee({ isProvider: !0 }), { handleTypeaheadSearch: _ } = Se(), { primitiveElement: v, currentElement: y } = g(), S = te(), C = f(p), E = Be(null);
+		Ve({
+			suppressHighlightScroll: B(!1),
+			onHighlightScrollRequest: () => {}
+		});
+		let D = b(y), O = B(), k = B(!1), A = B(!0), j = Z(r, "modelValue", i, {
+			defaultValue: r.defaultValue ?? (o.value ? [] : void 0),
+			passive: r.modelValue === void 0,
+			deep: !0
+		});
+		function ne(e) {
+			if (k.value = !0, r.multiple) {
+				let t = Array.isArray(j.value) ? [...j.value] : [], n = t.findIndex((t) => Ae(t, e, r.by));
+				r.selectionBehavior === "toggle" ? (n === -1 ? t.push(e) : t.splice(n, 1), j.value = t) : (j.value = [e], O.value = e);
+			} else r.selectionBehavior === "toggle" && Ae(j.value, e, r.by) ? j.value = void 0 : j.value = e;
+			setTimeout(() => {
+				k.value = !1;
+			}, 1);
+		}
+		let M = B(null), N = B(null), F = B(!1), I = B(!1), L = ue(), re = ue(), ie = ue();
+		function R() {
+			return m().map((e) => e.ref).filter((e) => e.dataset.disabled !== "");
+		}
+		function V(e, t = !0, n) {
+			if (!e) return;
+			M.value = e;
+			let r = E?.suppressHighlightScroll.value ?? !1;
+			(n ?? A.value) && (r ? M.value.focus({ preventScroll: !0 }) : M.value.focus()), r ? E?.onHighlightScrollRequest(t ? () => {
+				let e = M.value;
+				e?.isConnected && e.scrollIntoView({ block: "nearest" });
+			} : void 0) : t && M.value.scrollIntoView({ block: "nearest" });
+			let a = h(e);
+			i("highlight", a);
+		}
+		function U(e) {
+			if (F.value) ie.trigger(e);
+			else {
+				let t = m().find((t) => Ae(t.value, e, r.by));
+				t && (M.value = t.ref, V(t.ref));
+			}
+		}
+		function ae(e) {
+			if (M.value && M.value.isConnected) {
+				if (e.ctrlKey || e.metaKey || e.altKey) return;
+				e.preventDefault(), e.stopPropagation(), I.value || M.value.click();
+			}
+		}
+		function W(e) {
+			if (A.value) {
+				if (k.value = !0, F.value) re.trigger(e);
+				else {
+					let t = e.altKey || e.ctrlKey || e.metaKey;
+					if (t && e.key === "a" && o.value) {
+						let t = m(), n = t.map((e) => e.value);
+						j.value = [...n], e.preventDefault();
+						let r = t.at(-1);
+						r && V(r.ref);
+					} else if (!t) {
+						let t = _(e.key, m());
+						t && V(t);
+					}
+				}
+				setTimeout(() => {
+					k.value = !1;
+				}, 1);
+			}
+		}
+		function oe() {
+			I.value = !0;
+		}
+		function se() {
+			P(() => {
+				I.value = !1;
+			});
+		}
+		function J() {
+			P(() => {
+				X(new KeyboardEvent("keydown", { key: "PageUp" }));
+			});
+		}
+		function Y(e) {
+			let t = M.value;
+			t?.isConnected && (N.value = t), M.value = null, i("leave", e);
+		}
+		function le(e) {
+			let t = new CustomEvent("listbox.entryFocus", {
+				bubbles: !1,
+				cancelable: !0
+			});
+			if (e.currentTarget?.dispatchEvent(t), i("entryFocus", t), !t.defaultPrevented) {
+				if (N.value) V(N.value);
+				else {
+					let e = R()?.[0];
+					V(e);
+				}
+			}
+		}
+		function X(e) {
+			let t = Fe(e, c.value, C.value);
+			if (!t) return;
+			let n = R();
+			if (M.value) {
+				if (t === "last") n.reverse();
+				else if (t === "prev" || t === "next") {
+					t === "prev" && n.reverse();
+					let e = n.indexOf(M.value);
+					n = n.slice(e + 1);
+				}
+				de(e, n[0]);
+			}
+			if (n.length) {
+				let e = !M.value && t === "prev" ? n.length - 1 : 0;
+				V(n[e]);
+			}
+			if (F.value) return re.trigger(e);
+		}
+		function de(e, t) {
+			if (!F.value && r.selectionBehavior === "replace" && o.value && Array.isArray(j.value) && (!e.altKey && !e.ctrlKey && !e.metaKey || e.shiftKey) && e.shiftKey) {
+				let n = m().filter((e) => e.ref.dataset.disabled !== ""), r = n.find((e) => e.ref === t)?.value;
+				if (e.key === S.END ? r = n.at(-1)?.value : e.key === S.HOME && (r = n[0]?.value), !r || !O.value) return;
+				let i = ye(n.map((e) => e.value), O.value, r);
+				j.value = i;
+			}
+		}
+		async function fe(e, t = !0) {
+			if (a) {
+				if (await P(), F.value) L.trigger({
+					event: e,
+					scroll: t
+				});
+				else {
+					let e = R(), n = e.find((e) => e.dataset.state === "checked"), r = t ? void 0 : !1;
+					n ? V(n, t, r) : e.length && V(e[0], t, r);
+				}
+			}
+		}
+		let pe = !1;
+		return ce(j, () => {
+			if (!k.value) {
+				let e = pe;
+				pe = !0, P(() => {
+					fe(void 0, e);
+				});
+			}
+		}, {
+			immediate: !0,
+			deep: !0
+		}), t({
+			highlightedElement: M,
+			highlightItem: U,
+			highlightFirstItem: J,
+			highlightSelected: fe,
+			getItems: m
+		}), ze({
+			modelValue: j,
+			onValueChange: ne,
+			multiple: o,
+			orientation: c,
+			dir: C,
+			disabled: l,
+			highlightOnHover: s,
+			highlightedElement: M,
+			isVirtual: F,
+			virtualFocusHook: L,
+			virtualKeydownHook: re,
+			virtualHighlightHook: ie,
+			by: r.by,
+			firstValue: O,
+			selectionBehavior: u,
+			focusable: A,
+			onLeave: Y,
+			onEnter: le,
+			changeHighlight: V,
+			onKeydownEnter: ae,
+			onKeydownNavigation: X,
+			onKeydownTypeAhead: W,
+			onCompositionStart: oe,
+			onCompositionEnd: se,
+			highlightFirstItem: J
+		}), (e, t) => (z(), w(K(d), {
+			ref_key: "primitiveElement",
+			ref: v,
+			as: e.as,
+			"as-child": e.asChild,
+			dir: K(C),
+			"data-disabled": K(l) ? "" : void 0,
+			onPointerleave: Y,
+			onFocusout: t[0] ||= async (e) => {
+				let t = e.relatedTarget || e.target;
+				await P(), M.value && K(y) && !K(y).contains(t) && Y(e);
+			}
+		}, {
+			default: q(() => [H(e.$slots, "default", { modelValue: K(j) }), K(D) && e.name ? (z(), w(K(x), {
+				key: 0,
+				name: e.name,
+				value: K(j),
+				disabled: K(l),
+				required: e.required
+			}, null, 8, [
+				"name",
+				"value",
+				"disabled",
+				"required"
+			])) : T("v-if", !0)]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"dir",
+			"data-disabled"
+		]));
+	}
+}), Ue = /* @__PURE__ */ j({
+	__name: "ListboxContent",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1
+		}
+	},
+	setup(t) {
+		let { CollectionSlot: n } = ee(), r = Re(), i = e(!1, 10);
+		return (e, t) => (z(), w(K(n), null, {
+			default: q(() => [k(K(d), {
+				role: "listbox",
+				as: e.as,
+				"as-child": e.asChild,
+				tabindex: K(r).focusable.value ? K(r).highlightedElement.value ? "-1" : "0" : "-1",
+				"aria-orientation": K(r).orientation.value,
+				"aria-multiselectable": !!K(r).multiple.value,
+				"data-orientation": K(r).orientation.value,
+				onMousedown: t[0] ||= X((e) => i.value = !0, ["left"]),
+				onFocus: t[1] ||= (e) => {
+					K(i) || K(r).onEnter(e);
+				},
+				onKeydown: [
+					t[2] ||= Y((e) => {
+						(K(r).orientation.value !== "vertical" || e.key !== "ArrowLeft" && e.key !== "ArrowRight") && (K(r).orientation.value !== "horizontal" || e.key !== "ArrowUp" && e.key !== "ArrowDown") && (e.preventDefault(), K(r).focusable.value && K(r).onKeydownNavigation(e));
+					}, [
+						"down",
+						"up",
+						"left",
+						"right",
+						"home",
+						"end"
+					]),
+					Y(K(r).onKeydownEnter, ["enter"]),
+					K(r).onKeydownTypeAhead
+				]
+			}, {
+				default: q(() => [H(e.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"tabindex",
+				"aria-orientation",
+				"aria-multiselectable",
+				"data-orientation",
+				"onKeydown"
+			])]),
+			_: 3
+		}));
+	}
+}), We = "listbox.select", [Ge, Ke] = /*#__PURE__*/ o("ListboxItem"), qe = /* @__PURE__ */ j({
+	__name: "ListboxItem",
+	props: {
+		value: {
+			type: null,
+			required: !0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "div"
+		}
+	},
+	emits: ["select"],
+	setup(e, { emit: t }) {
+		let i = e, a = t, o = s(void 0, "reka-listbox-item"), { CollectionItem: c } = ee(), { forwardRef: l, currentElement: u } = r(), f = Re(), p = C(() => u.value != null && u.value === f.highlightedElement.value), m = C(() => ke(f.modelValue.value, i.value, f.by)), h = C(() => f.disabled.value || i.disabled);
+		async function g(e) {
+			a("select", e), !e?.defaultPrevented && !h.value && e && (f.onValueChange(i.value), f.changeHighlight(u.value));
+		}
+		function _(e) {
+			let t = {
+				originalEvent: e,
+				value: i.value
+			};
+			n(We, g, t);
+		}
+		return Ke({ isSelected: m }), (e, t) => (z(), w(K(c), { value: e.value }, {
+			default: q(() => [le([
+				p.value,
+				m.value,
+				h.value,
+				K(f).focusable.value,
+				...Object.entries(e.$attrs).flat()
+			], () => k(K(d), N({ id: K(o) }, e.$attrs, {
+				ref: K(l),
+				role: "option",
+				tabindex: K(f).focusable.value ? p.value ? "0" : "-1" : -1,
+				"aria-selected": m.value,
+				as: e.as,
+				"as-child": e.asChild,
+				disabled: h.value ? "" : void 0,
+				"data-disabled": h.value ? "" : void 0,
+				"data-highlighted": p.value ? "" : void 0,
+				"data-state": m.value ? "checked" : "unchecked",
+				onClick: _,
+				onKeydown: Y(X(_, ["prevent"]), ["space"]),
+				onPointermove: t[0] ||= () => {
+					K(f).highlightedElement.value !== K(u) && K(f).highlightOnHover.value && K(f).changeHighlight(K(u), !1, !1);
+				}
+			}), {
+				default: q(() => [H(e.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"id",
+				"tabindex",
+				"aria-selected",
+				"as",
+				"as-child",
+				"disabled",
+				"data-disabled",
+				"data-highlighted",
+				"data-state",
+				"onKeydown"
+			]), t, 1)]),
+			_: 3
+		}, 8, ["value"]));
+	}
+}), [Je, Ye] = /*#__PURE__*/ o("RovingFocusGroup"), Xe = /* @__PURE__ */ j({
+	__name: "RovingFocusGroup",
+	props: {
+		orientation: {
+			type: String,
+			required: !1,
+			default: void 0
+		},
+		dir: {
+			type: String,
+			required: !1
+		},
+		loop: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		currentTabStopId: {
+			type: [String, null],
+			required: !1
+		},
+		defaultCurrentTabStopId: {
+			type: String,
+			required: !1
+		},
+		preventScrollOnEntryFocus: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1
+		}
+	},
+	emits: ["entryFocus", "update:currentTabStopId"],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, { loop: a, orientation: o, dir: s } = G(r), c = f(s), l = Z(r, "currentTabStopId", i, {
+			defaultValue: r.defaultCurrentTabStopId,
+			passive: r.currentTabStopId === void 0
+		}), u = B(!1), p = B(!1), m = B(0), { getItems: h, CollectionSlot: g } = ee({ isProvider: !0 });
+		function _(e) {
+			let t = !p.value;
+			if (e.currentTarget && e.target === e.currentTarget && t && !u.value) {
+				let t = new CustomEvent(je, Me);
+				if (e.currentTarget.dispatchEvent(t), i("entryFocus", t), !t.defaultPrevented) {
+					let e = h().map((e) => e.ref).filter((e) => e.dataset.disabled !== "");
+					Ie([
+						e.find((e) => e.getAttribute("data-active") === ""),
+						e.find((e) => e.getAttribute("data-highlighted") === ""),
+						e.find((e) => e.id === l.value),
+						...e
+					].filter(Boolean), r.preventScrollOnEntryFocus);
+				}
+			}
+			p.value = !1;
+		}
+		function v() {
+			setTimeout(() => {
+				p.value = !1;
+			}, 1);
+		}
+		return t({ getItems: h }), Ye({
+			loop: a,
+			dir: c,
+			orientation: o,
+			currentTabStopId: l,
+			onItemFocus: (e) => {
+				l.value = e;
+			},
+			onItemShiftTab: () => {
+				u.value = !0;
+			},
+			onFocusableItemAdd: () => {
+				m.value++;
+			},
+			onFocusableItemRemove: () => {
+				m.value--;
+			}
+		}), (e, t) => (z(), w(K(g), null, {
+			default: q(() => [k(K(d), {
+				tabindex: u.value || m.value === 0 ? -1 : 0,
+				"data-orientation": K(o),
+				as: e.as,
+				"as-child": e.asChild,
+				dir: K(c),
+				style: { outline: "none" },
+				onMousedown: t[0] ||= (e) => p.value = !0,
+				onMouseup: v,
+				onFocus: _,
+				onBlur: t[1] ||= (e) => u.value = !1
+			}, {
+				default: q(() => [H(e.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"tabindex",
+				"data-orientation",
+				"as",
+				"as-child",
+				"dir"
+			])]),
+			_: 3
+		}));
+	}
+}), Ze = /* @__PURE__ */ j({
+	__name: "RovingFocusItem",
+	props: {
+		tabStopId: {
+			type: String,
+			required: !1
+		},
+		focusable: {
+			type: Boolean,
+			required: !1,
+			default: !0
+		},
+		active: {
+			type: Boolean,
+			required: !1
+		},
+		allowShiftKey: {
+			type: Boolean,
+			required: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "span"
+		}
+	},
+	setup(e) {
+		let t = e, n = Je(), r = s(), i = C(() => t.tabStopId || r), a = C(() => n.currentTabStopId.value === i.value), { getItems: o, CollectionItem: c } = ee();
+		ie(() => {
+			t.focusable && n.onFocusableItemAdd();
+		}), R(() => {
+			t.focusable && n.onFocusableItemRemove();
+		}), ce(() => t.focusable, (e, t) => {
+			e !== t && (e ? n.onFocusableItemAdd() : n.onFocusableItemRemove());
+		});
+		function l(e) {
+			if (e.key === "Tab" && e.shiftKey) {
+				n.onItemShiftTab();
+				return;
+			}
+			if (e.target !== e.currentTarget) return;
+			let r = Fe(e, n.orientation.value, n.dir.value);
+			if (r !== void 0) {
+				if (e.metaKey || e.ctrlKey || e.altKey || !t.allowShiftKey && e.shiftKey) return;
+				e.preventDefault();
+				let i = [...o().map((e) => e.ref).filter((e) => e.dataset.disabled !== "")];
+				if (r === "last") i.reverse();
+				else if (r === "prev" || r === "next") {
+					r === "prev" && i.reverse();
+					let t = i.indexOf(e.currentTarget);
+					i = n.loop.value ? Le(i, t + 1) : i.slice(t + 1);
+				}
+				P(() => Ie(i));
+			}
+		}
+		return (e, t) => (z(), w(K(c), null, {
+			default: q(() => [k(K(d), {
+				tabindex: a.value ? 0 : -1,
+				"data-orientation": K(n).orientation.value,
+				"data-active": e.active ? "" : void 0,
+				"data-disabled": e.focusable ? void 0 : "",
+				as: e.as,
+				"as-child": e.asChild,
+				onMousedown: t[0] ||= (t) => {
+					e.focusable ? K(n).onItemFocus(i.value) : t.preventDefault();
+				},
+				onFocus: t[1] ||= (e) => K(n).onItemFocus(i.value),
+				onKeydown: l
+			}, {
+				default: q(() => [H(e.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"tabindex",
+				"data-orientation",
+				"data-active",
+				"data-disabled",
+				"as",
+				"as-child"
+			])]),
+			_: 3
+		}));
+	}
+}), [Qe, $e] = /*#__PURE__*/ o("CheckboxGroupRoot"), et = /* @__PURE__ */ j({
+	__name: "CheckboxGroupRoot",
+	props: {
+		defaultValue: {
+			type: Array,
+			required: !1
+		},
+		modelValue: {
+			type: Array,
+			required: !1
+		},
+		rovingFocus: {
+			type: Boolean,
+			required: !1,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		dir: {
+			type: String,
+			required: !1
+		},
+		orientation: {
+			type: String,
+			required: !1
+		},
+		loop: {
+			type: Boolean,
+			required: !1
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, { disabled: i, rovingFocus: a, dir: o } = G(n), s = f(o), { primitiveElement: c, currentElement: l } = g(), u = b(l), p = Z(n, "modelValue", r, {
+			defaultValue: n.defaultValue ?? [],
+			passive: n.modelValue === void 0
+		}), m = C(() => a.value ? {
+			loop: n.loop,
+			dir: s.value,
+			orientation: n.orientation
+		} : {});
+		return $e({
+			modelValue: p,
+			rovingFocus: a,
+			disabled: i
+		}), (e, t) => (z(), w(U(K(a) ? K(Xe) : K(d)), N({
+			ref_key: "primitiveElement",
+			ref: c,
+			as: e.as,
+			"as-child": e.asChild
+		}, m.value), {
+			default: q(() => [H(e.$slots, "default"), K(u) && e.name ? (z(), w(K(x), {
+				key: 0,
+				name: e.name,
+				value: K(p),
+				required: e.required
+			}, null, 8, [
+				"name",
+				"value",
+				"required"
+			])) : T("v-if", !0)]),
+			_: 3
+		}, 16, ["as", "as-child"]));
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/Checkbox/utils.js
+function tt(e) {
+	return e === "indeterminate";
+}
+function nt(e) {
+	return tt(e) ? "indeterminate" : e ? "checked" : "unchecked";
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/Checkbox/CheckboxRoot.js
+var [rt, it] = /*#__PURE__*/ o("CheckboxRoot"), at = /* @__PURE__ */ j({
+	inheritAttrs: !1,
+	__name: "CheckboxRoot",
+	props: {
+		defaultValue: {
+			type: null,
+			required: !1
+		},
+		modelValue: {
+			type: null,
+			required: !1,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1
+		},
+		value: {
+			type: null,
+			required: !1,
+			default: "on"
+		},
+		id: {
+			type: String,
+			required: !1
+		},
+		trueValue: {
+			type: null,
+			required: !1,
+			default: () => !0
+		},
+		falseValue: {
+			type: null,
+			required: !1,
+			default: () => !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "button"
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: n }) {
+		let i = e, a = n, { forwardRef: o, currentElement: s } = r(), c = Qe(null), l = Z(i, "modelValue", a, {
+			defaultValue: i.defaultValue ?? i.falseValue,
+			passive: i.modelValue === void 0
+		}), u = C(() => c?.disabled.value || i.disabled), f = C(() => Q(l.value, i.trueValue)), p = C(() => t(c?.modelValue.value) ? l.value === "indeterminate" ? "indeterminate" : f.value : be(c.modelValue.value, i.value));
+		function m() {
+			if (t(c?.modelValue.value)) l.value === "indeterminate" ? l.value = i.trueValue : l.value = f.value ? i.falseValue : i.trueValue;
+			else {
+				let e = [...c.modelValue.value || []];
+				if (be(e, i.value)) {
+					let t = e.findIndex((e) => Q(e, i.value));
+					e.splice(t, 1);
+				} else e.push(i.value);
+				c.modelValue.value = e;
+			}
+		}
+		let h = b(s), g = xe(), _ = oe(), v = C(() => {
+			if (!_["aria-label"]) return i.id && s.value ? document.querySelector(`[for="${i.id}"]`)?.innerText : void 0;
+		});
+		return it({
+			disabled: u,
+			state: p
+		}), (e, t) => (z(), E(S, null, [(z(), w(U(K(c)?.rovingFocus.value ? K(Ze) : K(d)), N({
+			...e.$attrs,
+			...K(g)
+		}, {
+			id: e.id,
+			ref: K(o),
+			role: "checkbox",
+			"as-child": e.asChild,
+			as: e.as,
+			type: e.as === "button" ? "button" : void 0,
+			"aria-checked": K(tt)(p.value) ? "mixed" : p.value,
+			"aria-required": e.required,
+			"aria-label": e.$attrs["aria-label"] || v.value,
+			"data-state": K(nt)(p.value),
+			"data-disabled": u.value ? "" : void 0,
+			disabled: u.value,
+			focusable: K(c)?.rovingFocus.value ? !u.value : void 0,
+			onKeydown: Y(X(() => {}, ["prevent"]), ["enter"]),
+			onClick: m
+		}), {
+			default: q(() => [H(e.$slots, "default", {
+				modelValue: K(l),
+				state: p.value
+			})]),
+			_: 3
+		}, 16, [
+			"id",
+			"as-child",
+			"as",
+			"type",
+			"aria-checked",
+			"aria-required",
+			"aria-label",
+			"data-state",
+			"data-disabled",
+			"disabled",
+			"focusable",
+			"onKeydown"
+		])), K(h) && e.name && !K(c) ? (z(), w(K(x), N({
+			key: 0,
+			type: "checkbox",
+			checked: !!p.value,
+			name: e.name,
+			value: e.value,
+			disabled: u.value,
+			required: e.required
+		}, K(g)), null, 16, [
+			"checked",
+			"name",
+			"value",
+			"disabled",
+			"required"
+		])) : T("v-if", !0)], 64));
+	}
+}), ot = /* @__PURE__ */ j({
+	__name: "PopoverAnchor",
+	props: {
+		reference: {
+			type: null,
+			required: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1
+		}
+	},
+	setup(e) {
+		let t = e;
+		r();
+		let n = p();
+		return re(() => {
+			n.hasCustomAnchor.value = !0;
+		}), R(() => {
+			n.hasCustomAnchor.value = !1;
+		}), (e, n) => (z(), w(K(i), I(M(t)), {
+			default: q(() => [H(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), st = /* @__PURE__ */ j({
+	__name: "Label",
+	props: {
+		for: {
+			type: String,
+			required: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "label"
+		}
+	},
+	setup(e) {
+		let t = e;
+		return r(), (e, n) => (z(), w(K(d), N(t, { onMousedown: n[0] ||= (e) => {
+			!e.defaultPrevented && e.detail > 1 && e.preventDefault();
+		} }), {
+			default: q(() => [H(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), ct = "radio.select";
+function lt(e, t, r) {
+	n(ct, r, {
+		originalEvent: e,
+		value: t
+	});
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.43_typescript@6.0.3_/node_modules/reka-ui/dist/RadioGroup/Radio.js
+var ut = /* @__PURE__ */ j({
+	inheritAttrs: !1,
+	__name: "Radio",
+	props: {
+		id: {
+			type: String,
+			required: !1
+		},
+		value: {
+			type: null,
+			required: !1
+		},
+		disabled: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		checked: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "button"
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		}
+	},
+	emits: ["update:checked", "select"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, a = Z(n, "checked", i, { passive: n.checked === void 0 }), { value: o } = G(n), { forwardRef: s, currentElement: c } = r(), l = b(c), u = xe(), f = C(() => n.id && c.value ? document.querySelector(`[for="${n.id}"]`)?.innerText : void 0);
+		function p(e) {
+			n.disabled || lt(e, n.value, (e) => {
+				i("select", e), !e?.defaultPrevented && (a.value = !0, l.value && e.stopPropagation());
+			});
+		}
+		return (e, t) => (z(), E(S, null, [k(K(d), N({
+			id: e.id,
+			ref: K(s),
+			role: "radio",
+			type: e.as === "button" ? "button" : void 0,
+			as: e.as,
+			"aria-checked": K(a) ?? !1,
+			"aria-label": f.value,
+			"as-child": e.asChild,
+			disabled: e.disabled ? "" : void 0,
+			"data-state": K(a) ? "checked" : "unchecked",
+			"data-disabled": e.disabled ? "" : void 0,
+			value: K(o),
+			required: e.required,
+			name: e.name
+		}, {
+			...K(u),
+			...e.$attrs
+		}, { onClick: X(p, ["stop"]) }), {
+			default: q(() => [H(e.$slots, "default", { checked: K(a) })]),
+			_: 3
+		}, 16, [
+			"id",
+			"type",
+			"as",
+			"aria-checked",
+			"aria-label",
+			"as-child",
+			"disabled",
+			"data-state",
+			"data-disabled",
+			"value",
+			"required",
+			"name"
+		]), K(l) && e.name ? (z(), w(K(x), N({
+			key: 0,
+			type: "radio",
+			tabindex: "-1",
+			value: K(o),
+			checked: !!K(a),
+			name: e.name,
+			disabled: e.disabled,
+			required: e.required
+		}, K(u)), null, 16, [
+			"value",
+			"checked",
+			"name",
+			"disabled",
+			"required"
+		])) : T("v-if", !0)], 64));
+	}
+}), [dt, ft] = /*#__PURE__*/ o("RadioGroupRoot"), pt = /* @__PURE__ */ j({
+	__name: "RadioGroupRoot",
+	props: {
+		modelValue: {
+			type: null,
+			required: !1
+		},
+		defaultValue: {
+			type: null,
+			required: !1
+		},
+		disabled: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		orientation: {
+			type: String,
+			required: !1,
+			default: void 0
+		},
+		dir: {
+			type: String,
+			required: !1
+		},
+		loop: {
+			type: Boolean,
+			required: !1,
+			default: !0
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { forwardRef: a, currentElement: o } = r(), s = Z(n, "modelValue", i, {
+			defaultValue: n.defaultValue,
+			passive: n.modelValue === void 0
+		}), { disabled: c, loop: l, orientation: u, name: p, required: m, dir: h } = G(n), g = f(h), _ = b(o);
+		return ft({
+			modelValue: s,
+			changeModelValue: (e) => {
+				s.value = e;
+			},
+			disabled: c,
+			loop: l,
+			orientation: u,
+			name: p?.value,
+			required: m
+		}), (e, t) => (z(), w(K(Xe), {
+			"as-child": "",
+			orientation: K(u),
+			dir: K(g),
+			loop: K(l)
+		}, {
+			default: q(() => [k(K(d), {
+				ref: K(a),
+				role: "radiogroup",
+				"data-disabled": K(c) ? "" : void 0,
+				"as-child": e.asChild,
+				as: e.as,
+				"aria-orientation": K(u),
+				"aria-required": K(m),
+				dir: K(g)
+			}, {
+				default: q(() => [H(e.$slots, "default", { modelValue: K(s) }), K(_) && K(p) ? (z(), w(K(x), {
+					key: 0,
+					required: K(m),
+					disabled: K(c),
+					value: K(s),
+					name: K(p)
+				}, null, 8, [
+					"required",
+					"disabled",
+					"value",
+					"name"
+				])) : T("v-if", !0)]),
+				_: 3
+			}, 8, [
+				"data-disabled",
+				"as-child",
+				"as",
+				"aria-orientation",
+				"aria-required",
+				"dir"
+			])]),
+			_: 3
+		}, 8, [
+			"orientation",
+			"dir",
+			"loop"
+		]));
+	}
+}), [mt, ht] = /*#__PURE__*/ o("RadioGroupItem"), gt = /* @__PURE__ */ j({
+	inheritAttrs: !1,
+	__name: "RadioGroupItem",
+	props: {
+		id: {
+			type: String,
+			required: !1
+		},
+		value: {
+			type: null,
+			required: !1
+		},
+		disabled: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "button"
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		}
+	},
+	emits: ["select"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { forwardRef: a, currentElement: o } = r(), s = dt(), c = C(() => s.disabled.value || n.disabled), l = C(() => s.required.value || n.required), u = C(() => Q(s.modelValue?.value, n.value));
+		ht({
+			disabled: c,
+			checked: u
+		});
+		let d = B(!1), f = [
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		];
+		fe("keydown", (e) => {
+			f.includes(e.key) && (d.value = !0);
+		}), fe("keyup", () => {
+			d.value = !1;
+		});
+		function p() {
+			setTimeout(() => {
+				d.value && o.value?.click();
+			}, 0);
+		}
+		let m = xe();
+		return (e, t) => (z(), w(K(Ze), {
+			checked: u.value,
+			disabled: c.value,
+			"as-child": "",
+			focusable: !c.value,
+			active: u.value
+		}, {
+			default: q(() => [k(ut, N({
+				...K(m),
+				...e.$attrs,
+				...n
+			}, {
+				ref: K(a),
+				checked: u.value,
+				required: l.value,
+				disabled: c.value,
+				"onUpdate:checked": t[0] ||= (t) => K(s).changeModelValue(e.value),
+				onSelect: t[1] ||= (e) => i("select", e),
+				onKeydown: t[2] ||= Y(X(() => {}, ["prevent"]), ["enter"]),
+				onFocus: p
+			}), {
+				default: q(() => [H(e.$slots, "default", {
+					checked: u.value,
+					required: l.value,
+					disabled: c.value
+				})]),
+				_: 3
+			}, 16, [
+				"checked",
+				"required",
+				"disabled"
+			])]),
+			_: 3
+		}, 8, [
+			"checked",
+			"disabled",
+			"focusable",
+			"active"
+		]));
+	}
+}), [_t, vt] = /*#__PURE__*/ o("ToggleGroupRoot"), yt = /* @__PURE__ */ j({
+	__name: "ToggleGroupRoot",
+	props: {
+		rovingFocus: {
+			type: Boolean,
+			required: !1,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		orientation: {
+			type: String,
+			required: !1
+		},
+		dir: {
+			type: String,
+			required: !1
+		},
+		loop: {
+			type: Boolean,
+			required: !1,
+			default: !0
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		},
+		type: {
+			type: String,
+			required: !1
+		},
+		modelValue: {
+			type: null,
+			required: !1
+		},
+		defaultValue: {
+			type: null,
+			required: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { loop: a, rovingFocus: o, disabled: s, dir: c } = G(n), l = f(c), { forwardRef: u, currentElement: p } = r(), { modelValue: m, changeModelValue: h, isSingle: g } = Oe(n, i), _ = b(p);
+		return vt({
+			isSingle: g,
+			modelValue: m,
+			changeModelValue: h,
+			dir: l,
+			orientation: n.orientation,
+			loop: a,
+			rovingFocus: o,
+			disabled: s
+		}), (e, t) => (z(), w(U(K(o) ? K(Xe) : K(d)), {
+			"as-child": "",
+			orientation: K(o) ? e.orientation : void 0,
+			dir: K(l),
+			loop: K(o) ? K(a) : void 0
+		}, {
+			default: q(() => [k(K(d), {
+				ref: K(u),
+				role: "group",
+				"as-child": e.asChild,
+				as: e.as
+			}, {
+				default: q(() => [H(e.$slots, "default", { modelValue: K(m) }), K(_) && e.name ? (z(), w(x, {
+					key: 0,
+					name: e.name,
+					required: e.required,
+					value: K(m)
+				}, null, 8, [
+					"name",
+					"required",
+					"value"
+				])) : T("v-if", !0)]),
+				_: 3
+			}, 8, ["as-child", "as"])]),
+			_: 3
+		}, 8, [
+			"orientation",
+			"dir",
+			"loop"
+		]));
+	}
+}), bt = /* @__PURE__ */ j({
+	inheritAttrs: !1,
+	__name: "Toggle",
+	props: {
+		defaultValue: {
+			type: Boolean,
+			required: !1
+		},
+		modelValue: {
+			type: [Boolean, null],
+			required: !1,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "button"
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { forwardRef: a, currentElement: o } = r(), s = xe(), c = _t(null), l = Z(n, "modelValue", i, {
+			defaultValue: n.defaultValue,
+			passive: n.modelValue === void 0
+		});
+		function u() {
+			l.value = !l.value;
+		}
+		let f = C(() => l.value ? "on" : "off"), p = b(o);
+		return (e, t) => (z(), E(S, null, [k(K(d), N({
+			ref: K(a),
+			type: e.as === "button" ? "button" : void 0,
+			"as-child": n.asChild,
+			as: e.as,
+			"aria-pressed": K(l),
+			"data-state": f.value,
+			"data-disabled": e.disabled ? "" : void 0,
+			disabled: e.disabled
+		}, {
+			...K(s),
+			...e.$attrs
+		}, { onClick: u }), {
+			default: q(() => [H(e.$slots, "default", {
+				modelValue: K(l),
+				disabled: e.disabled,
+				pressed: K(l),
+				state: f.value
+			})]),
+			_: 3
+		}, 16, [
+			"type",
+			"as-child",
+			"as",
+			"aria-pressed",
+			"data-state",
+			"data-disabled",
+			"disabled"
+		]), K(p) && e.name && !K(c) ? (z(), w(x, N({
+			key: 0,
+			type: "checkbox",
+			name: e.name,
+			value: K(l),
+			required: e.required
+		}, K(s)), null, 16, [
+			"name",
+			"value",
+			"required"
+		])) : T("v-if", !0)], 64));
+	}
+}), xt = /* @__PURE__ */ j({
+	__name: "ToggleGroupItem",
+	props: {
+		value: {
+			type: null,
+			required: !0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1
+		},
+		asChild: {
+			type: Boolean,
+			required: !1
+		},
+		as: {
+			type: null,
+			required: !1,
+			default: "button"
+		}
+	},
+	setup(e) {
+		let t = e, n = _t(), i = C(() => n.disabled?.value || t.disabled), a = C(() => be(n.modelValue.value, t.value)), { forwardRef: o } = r(), s = xe();
+		return (e, r) => (z(), w(U(K(n).rovingFocus.value ? K(Ze) : K(d)), N({ "as-child": "" }, K(n).rovingFocus.value ? {
+			focusable: !i.value,
+			active: a.value
+		} : {}), {
+			default: q(() => [k(K(bt), N({
+				...K(s),
+				...t
+			}, {
+				ref: K(o),
+				disabled: i.value,
+				"model-value": a.value,
+				"onUpdate:modelValue": r[0] ||= (t) => K(n).changeModelValue(e.value)
+			}), {
+				default: q((t) => [H(e.$slots, "default", I(M(t)))]),
+				_: 3
+			}, 16, ["disabled", "model-value"])]),
+			_: 3
+		}, 16));
+	}
+}), St = /* @__PURE__ */ j({
 	name: "HstButtonGroup",
 	props: {
 		title: {},
@@ -24,43 +1679,81 @@ var k = /* @__PURE__ */ u({
 		options: {}
 	},
 	emits: ["update:modelValue"],
-	setup(i, { emit: c }) {
-		let l = i, u = c, d = n(() => Array.isArray(l.options) ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? {
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = C(() => Array.isArray(n.options) ? n.options.map((e) => typeof e == "string" || typeof e == "number" ? {
 			value: e,
 			label: String(e)
-		} : e) : Object.keys(l.options).map((e) => ({
+		} : e) : Object.entries(n.options).map(([e, t]) => ({
 			value: e,
-			label: l.options[e]
+			label: String(t)
 		})));
-		function f(e) {
-			u("update:modelValue", e);
+		function a(e) {
+			e != null && r("update:modelValue", e);
 		}
-		return (n, c) => (h(), r(e, {
+		return (t, n) => (z(), w(u, {
 			tag: "div",
-			role: "group",
-			title: i.title,
-			class: "poveste-button-group flex-nowrap items-center"
+			title: e.title,
+			class: "poveste-button-group"
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", ne, [(h(!0), a(t, null, _(d.value, ({ label: e, value: t }) => (h(), r(k, {
-				key: t,
-				class: "px-1 h-[22px] flex-1 rounded-[3px]!",
-				color: t === i.modelValue ? "primary" : "flat",
-				rounded: !1,
-				onClick: (e) => f(t)
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [k(K(yt), {
+				type: "single",
+				class: "poveste-button-group-options",
+				"data-slot": "options",
+				"model-value": e.modelValue ?? null,
+				"onUpdate:modelValue": a
 			}, {
-				default: C(() => [s(y(e), 1)]),
-				_: 2
-			}, 1032, ["color", "onClick"]))), 128))])]),
+				default: q(() => [(z(!0), E(S, null, V(i.value, ({ label: e, value: t }) => (z(), w(K(xt), {
+					key: t,
+					"as-child": "",
+					value: t
+				}, {
+					default: q(() => [k(ge, {
+						class: "poveste-button-group-option",
+						"data-slot": "option"
+					}, {
+						default: q(() => [O(W(e), 1)]),
+						_: 2
+					}, 1024)]),
+					_: 2
+				}, 1032, ["value"]))), 128))]),
+				_: 1
+			}, 8, ["model-value"])]),
 			_: 3
 		}, 8, ["title"]));
 	}
-}), ie = {
+}), Ct = {
+	class: "poveste-checkbox-visual",
+	"data-slot": "visual"
+}, wt = {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 24 24",
-	class: "relative z-10"
-}, ae = ["stroke-dasharray", "stroke-dashoffset"], A = /* @__PURE__ */ u({
+	class: "poveste-checkbox-visual-check",
+	"data-slot": "visual-check"
+}, Tt = ["stroke-dasharray", "stroke-dashoffset"], Et = /* @__PURE__ */ j({
+	name: "CheckboxVisual",
+	props: { modelValue: { type: Boolean } },
+	setup(e) {
+		let t = e, n = B(), r = B(0), i = C(() => +!!t.modelValue), a = C(() => (1 - i.value) * r.value), o = B(!1);
+		return ce(() => t.modelValue, () => {
+			o.value = !0;
+		}), ce(n, () => {
+			r.value = n.value?.getTotalLength?.() ?? 21.21;
+		}), (e, t) => (z(), E("span", Ct, [t[0] ||= D("span", {
+			class: "poveste-checkbox-visual-box",
+			"data-slot": "visual-box"
+		}, null, -1), (z(), E("svg", wt, [D("path", {
+			ref_key: "path",
+			ref: n,
+			d: "m 4 12 l 5 5 l 10 -10",
+			fill: "none",
+			class: F(o.value ? "poveste-checkbox-visual-animated" : void 0),
+			"stroke-dasharray": r.value,
+			"stroke-dashoffset": a.value
+		}, null, 10, Tt)]))]));
+	}
+}), Dt = ["data-checked"], Ot = /* @__PURE__ */ j({
 	name: "HstSimpleCheckbox",
 	props: {
 		modelValue: { type: Boolean },
@@ -68,30 +1761,25 @@ var k = /* @__PURE__ */ u({
 	},
 	emits: { "update:modelValue": (e) => !0 },
 	setup(e, { emit: t }) {
-		let r = e, i = t;
-		function s() {
-			r.withToggle && i("update:modelValue", !r.modelValue);
-		}
-		S(() => r.modelValue, () => {
-			p.value = !0;
-		});
-		let c = g(), l = g(0), u = n(() => +!!r.modelValue), d = n(() => (1 - u.value) * l.value), p = g(!1);
-		return S(c, () => {
-			l.value = c.value.getTotalLength?.() ?? 21.21;
-		}), (t, n) => (h(), a("div", {
-			class: f(["poveste-simple-checkbox group text-white w-[16px] h-[16px] relative", { "cursor-pointer": e.withToggle }]),
-			onClick: s
-		}, [o("div", { class: f(["border border-solid group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out group-hover:border-primary-500 group-hover:dark:border-primary-500", [e.modelValue ? "border-primary-500 border-8" : "border-black/25 dark:border-white/25 delay-150"]]) }, null, 2), (h(), a("svg", ie, [o("path", {
-			ref_key: "path",
-			ref: c,
-			d: "m 4 12 l 5 5 l 10 -10",
-			fill: "none",
-			class: f(["stroke-white stroke-2 duration-200 ease-in-out", [p.value ? "transition-all" : "transition-none", { "delay-150": e.modelValue }]]),
-			"stroke-dasharray": l.value,
-			"stroke-dashoffset": d.value
-		}, null, 10, ae)]))], 2));
+		let n = t;
+		return (t, r) => e.withToggle ? (z(), w(K(at), {
+			key: 0,
+			"model-value": e.modelValue ?? !1,
+			class: "poveste-simple-checkbox poveste-simple-checkbox-interactive",
+			"data-slot": "box",
+			"data-checked": e.modelValue ? "" : void 0,
+			"onUpdate:modelValue": r[0] ||= (e) => n("update:modelValue", e === !0)
+		}, {
+			default: q(() => [k(Et, { "model-value": e.modelValue }, null, 8, ["model-value"])]),
+			_: 1
+		}, 8, ["model-value", "data-checked"])) : (z(), E("span", {
+			key: 1,
+			class: "poveste-simple-checkbox",
+			"data-slot": "box",
+			"data-checked": e.modelValue ? "" : void 0
+		}, [k(Et, { "model-value": e.modelValue }, null, 8, ["model-value"])], 8, Dt));
 	}
-}), oe = /* @__PURE__ */ u({
+}), kt = /* @__PURE__ */ j({
 	name: "HstCheckbox",
 	props: {
 		modelValue: { type: [
@@ -102,36 +1790,32 @@ var k = /* @__PURE__ */ u({
 		title: {}
 	},
 	emits: { "update:modelValue": (e) => !0 },
-	setup(t, { emit: i }) {
-		let a = t, o = i;
-		function s() {
-			if (typeof a.modelValue == "string") {
-				o("update:modelValue", a.modelValue === "false" ? "true" : "false");
-				return;
-			}
-			o("update:modelValue", !a.modelValue);
-		}
-		let l = n(() => typeof a.modelValue == "string" ? a.modelValue !== "false" : a.modelValue);
-		return (n, i) => (h(), r(e, {
-			tag: "div",
-			role: "checkbox",
-			tabindex: "0",
-			"aria-checked": l.value,
-			class: "poveste-checkbox cursor-pointer items-center",
-			title: t.title,
-			onClick: i[0] ||= (e) => s(),
-			onKeydown: [i[1] ||= T(E((e) => s(), ["prevent"]), ["enter"]), i[2] ||= T(E((e) => s(), ["prevent"]), ["space"])]
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = C(() => typeof n.modelValue == "string"), a = C(() => typeof n.modelValue == "string" ? n.modelValue !== "false" : n.modelValue ?? void 0);
+		return (t, n) => (z(), w(u, {
+			class: "poveste-checkbox",
+			title: e.title
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [c(A, { "model-value": l.value }, null, 8, ["model-value"])]),
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [k(K(at), {
+				"model-value": i.value ? String(a.value) : a.value,
+				"true-value": !i.value || "true",
+				"false-value": i.value ? "false" : !1,
+				class: "poveste-checkbox-box",
+				"data-slot": "control",
+				"onUpdate:modelValue": n[0] ||= (e) => r("update:modelValue", e)
+			}, {
+				default: q(() => [k(Ot, { "model-value": a.value }, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"true-value",
+				"false-value"
+			])]),
 			_: 3
-		}, 8, ["aria-checked", "title"]));
+		}, 8, ["title"]));
 	}
-}), se = { class: "-my-1" }, ce = [
-	"for",
-	"onKeydown",
-	"onClick"
-], le = /* @__PURE__ */ u({
+}), At = /* @__PURE__ */ j({
 	name: "HstCheckboxList",
 	props: {
 		title: {},
@@ -139,29 +1823,38 @@ var k = /* @__PURE__ */ u({
 		options: {}
 	},
 	emits: ["update:modelValue"],
-	setup(i, { emit: l }) {
-		let u = i, d = l, m = n(() => Array.isArray(u.options) ? Object.fromEntries(u.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : u.options);
-		function g(e) {
-			u.modelValue.includes(e) ? d("update:modelValue", u.modelValue.filter((t) => t !== e)) : d("update:modelValue", [...u.modelValue, e]);
-		}
-		return (n, l) => (h(), r(e, {
-			role: "group",
-			title: i.title,
-			class: f(["poveste-checkbox-list cursor-text", n.$attrs.class]),
-			style: p(n.$attrs.style)
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = C(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : n.options);
+		return (t, n) => (z(), w(u, {
+			tag: "div",
+			title: e.title,
+			class: F(["poveste-checkbox-list", t.$attrs.class]),
+			style: L(t.$attrs.style)
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", se, [(h(!0), a(t, null, _(m.value, (e, t) => (h(), a("label", {
-				key: t,
-				tabindex: "0",
-				for: `${t}-radio`,
-				class: "cursor-pointer flex items-center relative py-1 group",
-				onKeydown: [T(E((e) => g(t), ["prevent"]), ["enter"]), T(E((e) => g(t), ["prevent"]), ["space"])],
-				onClick: (e) => g(t)
-			}, [c(A, {
-				"model-value": i.modelValue.includes(t),
-				class: "mr-2"
-			}, null, 8, ["model-value"]), s(" " + y(e), 1)], 40, ce))), 128))])]),
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [k(K(et), {
+				"model-value": e.modelValue,
+				class: "poveste-checkbox-list-options",
+				"data-slot": "options",
+				"onUpdate:modelValue": n[0] ||= (e) => r("update:modelValue", e)
+			}, {
+				default: q(() => [(z(!0), E(S, null, V(i.value, (t, n) => (z(), w(K(st), {
+					key: n,
+					class: "poveste-checkbox-list-option",
+					"data-slot": "option"
+				}, {
+					default: q(() => [k(K(at), {
+						value: n,
+						class: "poveste-checkbox-list-box",
+						"data-slot": "control"
+					}, {
+						default: q(() => [k(Ot, { "model-value": e.modelValue.includes(n) }, null, 8, ["model-value"])]),
+						_: 2
+					}, 1032, ["value"]), O(" " + W(t), 1)]),
+					_: 2
+				}, 1024))), 128))]),
+				_: 1
+			}, 8, ["model-value"])]),
 			_: 3
 		}, 8, [
 			"title",
@@ -169,7 +1862,7 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), ue = { class: "flex flex-row gap-1" }, de = ["value"], fe = /* @__PURE__ */ u({
+}), jt = { class: "flex flex-row gap-1" }, Mt = ["value"], Nt = /* @__PURE__ */ j({
 	name: "HstColorSelect",
 	inheritAttrs: !1,
 	props: {
@@ -177,15 +1870,15 @@ var k = /* @__PURE__ */ u({
 		modelValue: {}
 	},
 	emits: { "update:modelValue": (e) => !0 },
-	setup(t, { emit: i }) {
-		let a = t, s = i, c = n({
-			get: () => a.modelValue,
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = C({
+			get: () => n.modelValue,
 			set: (e) => {
-				s("update:modelValue", e);
+				r("update:modelValue", e);
 			}
 		});
-		function l(e, t = 15) {
-			let n = !1, r, i = () => {
+		function a(e, t = 15) {
+			let n = !1, r = null, i = () => {
 				r == null ? n = !1 : (e(...r), r = null, setTimeout(i, t));
 			};
 			return (...a) => {
@@ -196,31 +1889,31 @@ var k = /* @__PURE__ */ u({
 				e(...a), n = !0, setTimeout(i, t);
 			};
 		}
-		let u = l((e) => {
-			s("update:modelValue", e);
+		let o = a((e) => {
+			r("update:modelValue", e);
 		});
-		function m(e) {
-			u(e);
+		function s(e) {
+			o(e);
 		}
-		return (n, i) => (h(), r(e, {
-			title: t.title,
-			class: f(["poveste-select cursor-text items-center", n.$attrs.class]),
-			style: p(n.$attrs.style)
+		return (t, n) => (z(), w(u, {
+			title: e.title,
+			class: F(["poveste-select cursor-text items-center", t.$attrs.class]),
+			style: L(t.$attrs.style)
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", ue, [w(o("input", d({
-				...n.$attrs,
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [D("div", jt, [J(D("input", N({
+				...t.$attrs,
 				class: null,
 				style: null
 			}, {
-				"onUpdate:modelValue": i[0] ||= (e) => c.value = e,
+				"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
 				type: "text",
 				class: "text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm"
-			}), null, 16), [[x, c.value]]), o("input", {
+			}), null, 16), [[se, i.value]]), D("input", {
 				type: "color",
-				value: t.modelValue,
-				onInput: i[1] ||= ((e) => m(e.target.value))
-			}, null, 40, de)])]),
+				value: e.modelValue,
+				onInput: n[1] ||= ((e) => s(e.target.value))
+			}, null, 40, Mt)])]),
 			_: 3
 		}, 8, [
 			"title",
@@ -228,31 +1921,36 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), j = /* @__PURE__ */ u({
+}), $ = /* @__PURE__ */ j({
 	name: "HstCopyIcon",
 	props: { content: { type: [String, Function] } },
 	setup(e) {
-		let t = e, { copy: n, copied: i } = te();
+		let t = e, { copy: n, copied: r } = de(), { polite: i } = pe();
 		async function a() {
 			let e = typeof t.content == "function" ? await t.content() : t.content;
-			n(e);
+			await n(e), r.value && i("Copied");
 		}
-		return (e, t) => w((h(), r(b(O), {
-			icon: "carbon:copy-file",
-			class: "w-4 h-4 opacity-50 hover:opacity-100 hover:text-primary-500 cursor-pointer",
-			onClick: t[0] ||= (e) => a()
-		}, null, 512)), [[b(D), {
+		return (e, t) => (z(), w(c, {
 			content: "Copied!",
-			triggers: [],
-			shown: b(i),
-			distance: 12,
-			delay: 0
-		}]]);
+			open: K(r),
+			offset: 12
+		}, {
+			default: q(() => [D("button", {
+				type: "button",
+				"aria-label": "Copy",
+				class: "flex p-0 bg-transparent border-0 text-inherit opacity-50 hover:opacity-100 focus-visible:opacity-100 hover:text-primary-500 cursor-pointer",
+				onClick: t[0] ||= (e) => a()
+			}, [k(K(me), {
+				icon: "carbon:copy-file",
+				class: "w-4 h-4"
+			})])]),
+			_: 1
+		}, 8, ["open"]));
 	}
-}), pe = {
+}), Pt = {
 	key: 0,
 	class: "poveste-color-shades grid gap-4 grid-cols-[repeat(auto-fill,minmax(200px,1fr))] m-4"
-}, me = ["onMouseenter"], he = { class: "flex gap-1" }, ge = { class: "my-0 truncate shrink" }, _e = { class: "flex gap-1" }, M = { class: "my-0 opacity-50 truncate shrink" }, N = /* @__PURE__ */ u({
+}, Ft = ["onMouseenter"], It = { class: "flex gap-1" }, Lt = { class: "my-0 truncate shrink" }, Rt = { class: "flex gap-1" }, zt = { class: "my-0 opacity-50 truncate shrink" }, Bt = /* @__PURE__ */ j({
 	name: "HstColorShades",
 	props: {
 		shades: {},
@@ -260,117 +1958,129 @@ var k = /* @__PURE__ */ u({
 		search: {}
 	},
 	setup(e) {
-		let c = e;
-		function l(e, t = "") {
-			return Object.entries(e).reduce((e, [n, r]) => {
-				let i = t ? n === "DEFAULT" ? t : `${t}-${n}` : n, a = typeof r == "object" ? l(r, i) : { [i]: r };
+		let t = e;
+		function n(e, t = "") {
+			return Object.entries(e).reduce((e, [r, i]) => {
+				let a = t ? r === "DEFAULT" ? t : `${t}-${r}` : r, o = typeof i == "object" ? n(i, a) : { [a]: i };
 				return {
 					...e,
-					...a
+					...o
 				};
 			}, {});
 		}
-		let u = n(() => {
-			let e = c.shades, t = c.getName, n = l(e);
-			return Object.entries(n).map(([e, n]) => ({
+		let r = C(() => {
+			let e = t.shades, r = t.getName, i = n(e);
+			return Object.entries(i).map(([e, t]) => ({
 				key: e,
-				color: n,
-				name: t ? t(e, n) : e
+				color: t,
+				name: r ? r(e, t) : e
 			}));
-		}), d = n(() => {
-			let e = u.value;
-			if (c.search) {
-				let t = new RegExp(c.search, "i");
-				e = e.filter(({ name: e }) => t.test(e));
+		}), i = C(() => {
+			let e = r.value;
+			if (t.search) {
+				let n = new RegExp(t.search, "i");
+				e = e.filter(({ name: e }) => n.test(e));
 			}
 			return e;
-		}), f = g(null);
-		return (e, n) => d.value.length ? (h(), a("div", pe, [(h(!0), a(t, null, _(d.value, (t) => (h(), a("div", {
-			key: t.key,
+		}), a = B(null);
+		return (e, t) => i.value.length ? (z(), E("div", Pt, [(z(!0), E(S, null, V(i.value, (n) => (z(), E("div", {
+			key: n.key,
 			class: "flex flex-col gap-2",
-			onMouseenter: (e) => f.value = t.key,
-			onMouseleave: n[0] ||= (e) => f.value = null
-		}, [v(e.$slots, "default", { color: t.color }, () => [o("div", {
+			onMouseenter: (e) => a.value = n.key,
+			onMouseleave: t[0] ||= (e) => a.value = null
+		}, [H(e.$slots, "default", { color: n.color }, () => [D("div", {
 			class: "rounded-full w-16 h-16",
-			style: p({ backgroundColor: t.color })
-		}, null, 4)]), o("div", null, [o("div", he, [w((h(), a("pre", ge, [s(y(t.name), 1)])), [[b(D), t.name.length > 23 ? t.name : ""]]), f.value === t.key ? (h(), r(j, {
+			style: L({ backgroundColor: n.color })
+		}, null, 4)]), D("div", null, [D("div", It, [k(c, { content: n.name.length > 23 ? n.name : "" }, {
+			default: q(() => [D("pre", Lt, W(n.name), 1)]),
+			_: 2
+		}, 1032, ["content"]), a.value === n.key ? (z(), w($, {
 			key: 0,
-			content: t.name,
+			content: n.name,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)]), o("div", _e, [w((h(), a("pre", M, [s(y(t.color), 1)])), [[b(D), t.color.length > 23 ? t.color : ""]]), f.value === t.key ? (h(), r(j, {
+		}, null, 8, ["content"])) : T("", !0)]), D("div", Rt, [k(c, { content: n.color.length > 23 ? n.color : "" }, {
+			default: q(() => [D("pre", zt, W(n.color), 1)]),
+			_: 2
+		}, 1032, ["content"]), a.value === n.key ? (z(), w($, {
 			key: 0,
-			content: t.color,
+			content: n.color,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)])])], 40, me))), 128))])) : i("", !0);
+		}, null, 8, ["content"])) : T("", !0)])])], 40, Ft))), 128))])) : T("", !0);
 	}
-}), P = ["onMouseenter"], F = { class: "flex gap-1" }, I = { class: "my-0 truncate shrink" }, ve = { class: "flex gap-1" }, ye = { class: "my-0 opacity-50 truncate shrink" }, be = /* @__PURE__ */ u({
+}), Vt = ["onMouseenter"], Ht = { class: "flex gap-1" }, Ut = { class: "my-0 truncate shrink" }, Wt = { class: "flex gap-1" }, Gt = { class: "my-0 opacity-50 truncate shrink" }, Kt = /* @__PURE__ */ j({
 	name: "HstTokenGrid",
 	props: {
 		tokens: {},
 		colSize: { default: 180 },
-		getName: {
-			type: Function,
-			default: null
-		}
+		getName: {}
 	},
 	setup(e) {
-		let c = e, l = n(() => {
-			let e = c.tokens, t = c.getName;
-			return Object.entries(e).map(([e, n]) => ({
+		let t = e, n = C(() => {
+			let e = t.tokens, n = t.getName;
+			return Object.entries(e).map(([e, t]) => ({
 				key: e,
-				name: t ? t(e, n) : e,
-				value: typeof n == "number" ? n.toString() : n
+				name: n ? n(e, t) : e,
+				value: typeof t == "number" ? t.toString() : t
 			}));
-		}), u = n(() => `${c.colSize}px`), d = g(null);
-		return (n, c) => (h(), a("div", {
+		}), r = C(() => `${t.colSize}px`), i = B(null);
+		function a(e, t) {
+			return typeof e != "string" && !Array.isArray(e) ? "" : e.length > t ? String(e) : "";
+		}
+		return (t, o) => (z(), E("div", {
 			class: "poveste-token-grid bind-col-size grid gap-4 m-4",
-			style: p({ "--poveste-col-size": u.value })
-		}, [(h(!0), a(t, null, _(l.value, (t) => (h(), a("div", {
-			key: t.key,
+			style: L({ "--poveste-col-size": r.value })
+		}, [(z(!0), E(S, null, V(n.value, (n) => (z(), E("div", {
+			key: n.key,
 			class: "flex flex-col gap-2",
-			onMouseenter: (e) => d.value = t.key,
-			onMouseleave: c[0] ||= (e) => d.value = null
-		}, [v(n.$slots, "default", { token: t }), o("div", null, [o("div", F, [w((h(), a("pre", I, [s(y(t.name), 1)])), [[b(D), t.name.length > e.colSize / 8 ? t.name : ""]]), d.value === t.key ? (h(), r(j, {
+			onMouseenter: (e) => i.value = n.key,
+			onMouseleave: o[0] ||= (e) => i.value = null
+		}, [H(t.$slots, "default", { token: n }), D("div", null, [D("div", Ht, [k(c, { content: n.name.length > e.colSize / 8 ? n.name : "" }, {
+			default: q(() => [D("pre", Ut, W(n.name), 1)]),
+			_: 2
+		}, 1032, ["content"]), i.value === n.key ? (z(), w($, {
 			key: 0,
-			content: t.name,
+			content: n.name,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)]), o("div", ve, [w((h(), a("pre", ye, [s(y(t.value), 1)])), [[b(D), t.value.length > e.colSize / 8 ? t.value : ""]]), d.value === t.key ? (h(), r(j, {
+		}, null, 8, ["content"])) : T("", !0)]), D("div", Wt, [k(c, { content: a(n.value, e.colSize / 8) }, {
+			default: q(() => [D("pre", Gt, W(n.value), 1)]),
+			_: 2
+		}, 1032, ["content"]), i.value === n.key ? (z(), w($, {
 			key: 0,
-			content: typeof t.value == "string" ? t.value : JSON.stringify(t.value),
+			content: typeof n.value == "string" ? n.value : JSON.stringify(n.value),
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)])])], 40, P))), 128))], 4));
+		}, null, 8, ["content"])) : T("", !0)])])], 40, Vt))), 128))], 4));
 	}
-}), xe = ["onMouseenter"], Se = { class: "mx-4" }, Ce = { class: "flex gap-1" }, we = { class: "my-0 truncate shrink" }, Te = { class: "flex gap-1" }, Ee = { class: "my-0 opacity-50 truncate shrink" }, De = /* @__PURE__ */ u({
+}), qt = ["onMouseenter"], Jt = { class: "mx-4" }, Yt = { class: "flex gap-1" }, Xt = { class: "my-0 truncate shrink" }, Zt = { class: "flex gap-1" }, Qt = { class: "my-0 opacity-50 truncate shrink" }, $t = /* @__PURE__ */ j({
 	name: "HstTokenList",
 	props: {
 		tokens: {},
 		getName: { type: Function }
 	},
 	setup(e) {
-		let s = e, c = n(() => {
-			let e = s.tokens, t = s.getName;
-			return Object.entries(e).map(([e, n]) => ({
+		let t = e, n = C(() => {
+			let e = t.tokens, n = t.getName;
+			return Object.entries(e).map(([e, t]) => ({
 				key: e,
-				name: t ? t(e, n) : e,
-				value: typeof n == "number" ? n.toString() : n
+				name: n ? n(e, t) : e,
+				value: typeof t == "number" ? t.toString() : t
 			}));
-		}), l = g(null);
-		return (e, n) => (h(!0), a(t, null, _(c.value, (t) => (h(), a("div", {
-			key: t.key,
+		}), r = B(null);
+		return (e, t) => (z(!0), E(S, null, V(n.value, (n) => (z(), E("div", {
+			key: n.key,
 			class: "poveste-token-list flex flex-col gap-2 my-8",
-			onMouseenter: (e) => l.value = t.key,
-			onMouseleave: n[0] ||= (e) => l.value = null
-		}, [v(e.$slots, "default", { token: t }), o("div", Se, [o("div", Ce, [o("pre", we, y(t.name), 1), l.value === t.key ? (h(), r(j, {
+			onMouseenter: (e) => r.value = n.key,
+			onMouseleave: t[0] ||= (e) => r.value = null
+		}, [H(e.$slots, "default", { token: n }), D("div", Jt, [D("div", Yt, [D("pre", Xt, W(n.name), 1), r.value === n.key ? (z(), w($, {
 			key: 0,
-			content: t.name,
+			content: n.name,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)]), o("div", Te, [o("pre", Ee, y(t.value), 1), l.value === t.key ? (h(), r(j, {
+		}, null, 8, ["content"])) : T("", !0)]), D("div", Zt, [D("pre", Qt, W(n.value), 1), r.value === n.key ? (z(), w($, {
 			key: 0,
-			content: typeof t.value == "string" ? t.value : JSON.stringify(t.value),
+			content: typeof n.value == "string" ? n.value : JSON.stringify(n.value),
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)])])], 40, xe))), 128));
+		}, null, 8, ["content"])) : T("", !0)])])], 40, qt))), 128));
 	}
-}), Oe = /* @__PURE__ */ u({
+}), en = /* @__PURE__ */ j({
 	name: "HstNumber",
 	inheritAttrs: !1,
 	props: {
@@ -378,51 +2088,53 @@ var k = /* @__PURE__ */ u({
 		modelValue: {}
 	},
 	emits: { "update:modelValue": (e) => !0 },
-	setup(t, { emit: i }) {
-		let a = t, s = i, c = n({
-			get: () => a.modelValue,
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = C({
+			get: () => n.modelValue,
 			set: (e) => {
-				s("update:modelValue", e);
+				r("update:modelValue", e);
 			}
-		}), l = g();
-		function u() {
-			l.value.focus(), l.value.select();
-		}
-		let _ = g(!1), y, b;
-		function S(e) {
-			_.value = !0, y = e.clientX, b = c.value, window.addEventListener("mousemove", T), window.addEventListener("mouseup", E);
-		}
-		function T(e) {
-			let t = Number.parseFloat(l.value.step);
-			Number.isNaN(t) && (t = 1), c.value = b + Math.round((e.clientX - y) / 10 / t) * t;
-		}
-		function E() {
-			_.value = !1, window.removeEventListener("mousemove", T), window.removeEventListener("mouseup", E);
-		}
-		return m(() => {
-			E();
-		}), (n, i) => (h(), r(e, {
-			class: f(["poveste-number cursor-ew-resize items-center", [n.$attrs.class, { "select-none": _.value }]]),
-			title: t.title,
-			style: p(n.$attrs.style),
-			onClick: u,
-			onMousedown: S
+		}), a = B();
+		function o() {
+			a.value?.focus(), a.value?.select();
+		}
+		let s = B(!1), c, l;
+		function d(e) {
+			s.value = !0, c = e.clientX, l = i.value ?? 0, window.addEventListener("mousemove", f), window.addEventListener("mouseup", p);
+		}
+		function f(e) {
+			let t = Number.parseFloat(a.value?.step ?? "");
+			Number.isNaN(t) && (t = 1), i.value = l + Math.round((e.clientX - c) / 10 / t) * t;
+		}
+		function p() {
+			s.value = !1, window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", p);
+		}
+		return R(() => {
+			p();
+		}), (t, n) => (z(), w(u, {
+			class: F(["poveste-number", t.$attrs.class]),
+			title: e.title,
+			style: L(t.$attrs.style),
+			"data-dragging": s.value ? "" : void 0,
+			onClick: o,
+			onMousedown: d
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [w(o("input", d({
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [J(D("input", N({
 				ref_key: "input",
-				ref: l
+				ref: a
 			}, {
-				...n.$attrs,
+				...t.$attrs,
 				class: null,
 				style: null
 			}, {
-				"onUpdate:modelValue": i[0] ||= (e) => c.value = e,
+				"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
 				type: "number",
-				class: [{ "select-none": _.value }, "text-inherit bg-transparent w-full outline-none pl-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm cursor-ew-resize box-border"]
+				class: "poveste-number-input",
+				"data-slot": "control"
 			}), null, 16), [[
-				x,
-				c.value,
+				se,
+				i.value,
 				void 0,
 				{ number: !0 }
 			]])]),
@@ -430,16 +2142,11 @@ var k = /* @__PURE__ */ u({
 		}, 8, [
 			"title",
 			"class",
-			"style"
+			"style",
+			"data-dragging"
 		]));
 	}
-}), L = { class: "-my-1" }, ke = [
-	"id",
-	"name",
-	"value",
-	"checked",
-	"onChange"
-], Ae = ["for", "onKeydown"], je = /* @__PURE__ */ u({
+}), tn = /* @__PURE__ */ j({
 	name: "HstRadio",
 	props: {
 		title: {},
@@ -447,45 +2154,41 @@ var k = /* @__PURE__ */ u({
 		options: {}
 	},
 	emits: ["update:modelValue"],
-	setup(i, { emit: c }) {
-		let l = i, u = c, d = n(() => Array.isArray(l.options) ? Object.fromEntries(l.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : l.options);
-		function m(e) {
-			u("update:modelValue", e), b.value = !0;
-		}
-		let b = g(!1);
-		return (n, c) => (h(), r(e, {
-			role: "group",
-			title: i.title,
-			class: f(["poveste-radio cursor-text", n.$attrs.class]),
-			style: p(n.$attrs.style)
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = C(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : n.options);
+		return (t, n) => (z(), w(u, {
+			tag: "div",
+			title: e.title,
+			class: F(["poveste-radio", t.$attrs.class]),
+			style: L(t.$attrs.style)
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", L, [(h(!0), a(t, null, _(d.value, (e, n) => (h(), a(t, { key: n }, [o("input", {
-				id: `${n}-radio_${i.title}`,
-				type: "radio",
-				name: `${n}-radio_${i.title}`,
-				value: n,
-				checked: n === i.modelValue,
-				class: "hidden!",
-				onChange: (e) => m(n)
-			}, null, 40, ke), o("label", {
-				tabindex: "0",
-				for: `${n}-radio_${i.title}`,
-				class: "cursor-pointer flex items-center relative py-1 group",
-				onKeydown: [T(E((e) => m(n), ["prevent"]), ["enter"]), T(E((e) => m(n), ["prevent"]), ["space"])]
-			}, [(h(), a("svg", {
-				width: "16",
-				height: "16",
-				viewBox: "-12 -12 24 24",
-				class: f(["relative z-10 border border-solid text-inherit rounded-full box-border inset-0 transition-border duration-150 ease-out mr-2 group-hover:border-primary-500", [i.modelValue === n ? "border-primary-500" : "border-black/25 dark:border-white/25"]])
-			}, [o("circle", {
-				r: "7",
-				class: f(["will-change-transform", [
-					b.value ? "transition-all" : "transition-none",
-					{ "delay-150": i.modelValue === n },
-					i.modelValue === n ? "fill-primary-500" : "fill-transparent scale-0"
-				]])
-			}, null, 2)], 2)), s(" " + y(e), 1)], 40, Ae)], 64))), 128))])]),
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [k(K(pt), {
+				"model-value": e.modelValue ?? null,
+				class: "poveste-radio-options",
+				"data-slot": "options",
+				"onUpdate:modelValue": n[0] ||= (e) => r("update:modelValue", e)
+			}, {
+				default: q(() => [(z(!0), E(S, null, V(i.value, (e, t) => (z(), w(K(st), {
+					key: t,
+					class: "poveste-radio-option",
+					"data-slot": "option"
+				}, {
+					default: q(() => [k(K(gt), {
+						value: t,
+						class: "poveste-radio-box",
+						"data-slot": "control"
+					}, {
+						default: q(() => [...n[1] ||= [D("span", {
+							class: "poveste-radio-dot",
+							"data-slot": "dot"
+						}, null, -1)]]),
+						_: 1
+					}, 8, ["value"]), O(" " + W(e), 1)]),
+					_: 2
+				}, 1024))), 128))]),
+				_: 1
+			}, 8, ["model-value"])]),
 			_: 3
 		}, 8, [
 			"title",
@@ -493,39 +2196,82 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), Me = { class: "cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal" }, Ne = { class: "flex-1 truncate" }, Pe = { class: "flex flex-col bg-gray-50 dark:bg-gray-700" }, Fe = ["onClick"], Ie = /* @__PURE__ */ u({
+}), nn = {
+	type: "button",
+	class: "poveste-select-trigger",
+	"data-slot": "trigger"
+}, rn = {
+	class: "poveste-select-label",
+	"data-slot": "value"
+}, an = /* @__PURE__ */ j({
 	name: "CustomSelect",
 	props: {
 		modelValue: {},
 		options: {}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: i }) {
-		let l = e, u = i, f = n(() => Array.isArray(l.options) ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? [e, String(e)] : [e.value, e.label]) : Object.entries(l.options)), p = n(() => f.value.find(([e]) => e === l.modelValue)?.[1]);
-		function m(e, t) {
-			u("update:modelValue", e), t();
-		}
-		return (e, n) => (h(), r(b(ee), {
-			"auto-size": "",
-			"auto-boundary-max-size": ""
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = B(!1), a = ae();
+		ie(() => {
+			a.value = l();
+		});
+		let o = C(() => Array.isArray(n.options) ? n.options.map((e) => typeof e == "string" || typeof e == "number" ? [e, String(e)] : [e.value, e.label]) : Object.entries(n.options)), s = C(() => o.value.find(([e]) => e === n.modelValue)?.[1]);
+		function c(e) {
+			e != null && (r("update:modelValue", e), i.value = !1);
+		}
+		return (t, n) => (z(), w(K(m), {
+			open: i.value,
+			"onUpdate:open": n[0] ||= (e) => i.value = e
 		}, {
-			popper: C(({ hide: n }) => [o("div", Pe, [(h(!0), a(t, null, _(f.value, ([t, r]) => (h(), a("div", d({ ref_for: !0 }, {
-				...e.$attrs,
-				class: null,
-				style: null
+			default: q(() => [k(K(y), { "as-child": "" }, {
+				default: q(() => [D("button", nn, [D("span", rn, [H(t.$slots, "default", { label: s.value }, () => [O(W(s.value), 1)])]), k(K(me), {
+					icon: "carbon:chevron-sort",
+					class: "poveste-select-chevron"
+				})])]),
+				_: 3
+			}), a.value ? (z(), w(K(h), {
+				key: 0,
+				to: a.value
 			}, {
-				key: r,
-				class: ["px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700", { "bg-primary-200 dark:bg-primary-800": l.modelValue === t }],
-				onClick: (e) => m(t, n)
-			}), y(r), 17, Fe))), 128))])]),
-			default: C(() => [o("div", Me, [o("div", Ne, [v(e.$slots, "default", { label: p.value }, () => [s(y(p.value), 1)])]), c(b(O), {
-				icon: "carbon:chevron-sort",
-				class: "w-4 h-4 flex-none ml-auto"
-			})])]),
+				default: q(() => [k(K(_), {
+					class: "poveste-select-popper",
+					align: "start",
+					"side-offset": 6,
+					"collision-padding": 8
+				}, {
+					default: q(() => [k(K(He), {
+						class: "poveste-select-options",
+						"data-slot": "options",
+						"selection-behavior": "replace",
+						"highlight-on-hover": "",
+						"model-value": e.modelValue,
+						"onUpdate:modelValue": c
+					}, {
+						default: q(() => [k(K(Ue), {
+							class: "poveste-select-list",
+							"data-slot": "listbox"
+						}, {
+							default: q(() => [(z(!0), E(S, null, V(o.value, ([e, t]) => (z(), w(K(qe), {
+								key: t,
+								class: "poveste-select-option",
+								"data-slot": "option",
+								value: e
+							}, {
+								default: q(() => [O(W(t), 1)]),
+								_: 2
+							}, 1032, ["value"]))), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["model-value"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["to"])) : T("", !0)]),
 			_: 3
-		}));
+		}, 8, ["open"]));
 	}
-}), Le = /* @__PURE__ */ u({
+}), on = /* @__PURE__ */ j({
 	name: "HstSelect",
 	props: {
 		title: {},
@@ -533,18 +2279,19 @@ var k = /* @__PURE__ */ u({
 		options: {}
 	},
 	emits: ["update:modelValue"],
-	setup(t, { emit: n }) {
-		let i = n;
-		return (n, a) => (h(), r(e, {
-			title: t.title,
-			class: f(["poveste-select cursor-text items-center", n.$attrs.class]),
-			style: p(n.$attrs.style)
+	setup(e, { emit: t }) {
+		let n = t;
+		return (t, r) => (z(), w(u, {
+			title: e.title,
+			class: F(["poveste-select", t.$attrs.class]),
+			"data-slot": "control",
+			style: L(t.$attrs.style)
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [c(Ie, {
-				options: t.options,
-				"model-value": t.modelValue,
-				"onUpdate:modelValue": a[0] ||= (e) => i("update:modelValue", e)
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [k(an, {
+				options: e.options,
+				"model-value": e.modelValue,
+				"onUpdate:modelValue": r[0] ||= (e) => n("update:modelValue", e)
 			}, null, 8, ["options", "model-value"])]),
 			_: 3
 		}, 8, [
@@ -553,7 +2300,10 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), Re = { class: "relative w-full flex items-center" }, ze = /* @__PURE__ */ u({
+}), sn = {
+	class: "poveste-slider-field",
+	"data-slot": "field"
+}, cn = /* @__PURE__ */ j({
 	name: "HstSlider",
 	inheritAttrs: !1,
 	props: {
@@ -563,51 +2313,55 @@ var k = /* @__PURE__ */ u({
 		max: {}
 	},
 	emits: { "update:modelValue": (e) => !0 },
-	setup(t, { emit: s }) {
-		let c = t, l = s, u = g(!1), m = g(null), _ = n({
-			get: () => c.modelValue,
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = B(!1), a = C({
+			get: () => n.modelValue,
 			set: (e) => {
-				l("update:modelValue", e);
+				r("update:modelValue", e);
 			}
-		}), v = n(() => (c.modelValue - c.min) / (c.max - c.min)), y = n(() => m.value ? { left: `${8 + (m.value.clientWidth - 16) * v.value}px` } : {});
-		return (n, s) => (h(), r(e, {
-			class: f(["poveste-slider items-center", n.$attrs.class]),
-			title: t.title,
-			style: p(n.$attrs.style)
+		}), o = C(() => ((n.modelValue ?? n.min) - n.min) / (n.max - n.min)), s = C(() => ({ "--_poveste-slider-fraction": String(o.value) }));
+		return (t, n) => (z(), w(u, {
+			class: F(["poveste-slider", t.$attrs.class]),
+			title: e.title,
+			style: L(t.$attrs.style)
 		}, {
-			default: C(() => [o("div", Re, [
-				s[3] ||= o("div", { class: "absolute inset-0 flex items-center" }, [o("div", { class: "border border-black/25 dark:border-white/25 h-1 w-full rounded-full" })], -1),
-				w(o("input", d({
-					ref_key: "input",
-					ref: m,
-					"onUpdate:modelValue": s[0] ||= (e) => _.value = e,
-					class: "range-input appearance-none border-0 bg-transparent cursor-pointer relative w-full m-0 text-gray-700",
+			default: q(() => [D("div", sn, [
+				n[3] ||= D("div", { class: "poveste-slider-track-area" }, [D("div", {
+					class: "poveste-slider-track",
+					"data-slot": "track"
+				})], -1),
+				J(D("input", N({
+					"onUpdate:modelValue": n[0] ||= (e) => a.value = e,
+					class: "poveste-slider-input",
+					"data-slot": "control",
 					type: "range"
 				}, {
-					...n.$attrs,
+					...t.$attrs,
 					class: null,
 					style: null,
-					min: t.min,
-					max: t.max
+					min: e.min,
+					max: e.max
 				}, {
-					onMouseover: s[1] ||= (e) => u.value = !0,
-					onMouseleave: s[2] ||= (e) => u.value = !1
+					onMouseover: n[1] ||= (e) => i.value = !0,
+					onMouseleave: n[2] ||= (e) => i.value = !1
 				}), null, 16), [[
-					x,
-					_.value,
+					se,
+					a.value,
 					void 0,
 					{ number: !0 }
 				]]),
-				u.value ? w((h(), a("div", {
+				i.value ? (z(), w(c, {
 					key: 0,
-					class: "absolute",
-					style: p(y.value)
-				}, null, 4)), [[b(D), {
-					content: t.modelValue.toString(),
-					shown: !0,
-					distance: 16,
-					delay: 0
-				}]]) : i("", !0)
+					content: String(e.modelValue ?? ""),
+					open: !0,
+					offset: 16
+				}, {
+					default: q(() => [D("div", {
+						class: "poveste-slider-tooltip-anchor",
+						style: L(s.value)
+					}, null, 4)]),
+					_: 1
+				}, 8, ["content"])) : T("", !0)
 			])]),
 			_: 1
 		}, 8, [
@@ -616,35 +2370,37 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), Be = ["value"], Ve = /* @__PURE__ */ u({
+}), ln = ["value"], un = /* @__PURE__ */ j({
 	name: "HstText",
+	inheritAttrs: !1,
 	props: {
 		title: {},
 		modelValue: {}
 	},
 	emits: { "update:modelValue": (e) => !0 },
-	setup(t, { emit: n }) {
-		let i = n, a = g();
-		return (n, s) => (h(), r(e, {
-			title: t.title,
-			class: f(["poveste-text cursor-text items-center", n.$attrs.class]),
-			style: p(n.$attrs.style),
-			onClick: s[1] ||= (e) => a.value.focus()
+	setup(e, { emit: t }) {
+		let n = t, r = B();
+		return (t, i) => (z(), w(u, {
+			title: e.title,
+			class: F(["poveste-text", t.$attrs.class]),
+			style: L(t.$attrs.style),
+			onClick: i[1] ||= (e) => r.value?.focus()
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("input", d({
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [D("input", N({
 				ref_key: "input",
-				ref: a
+				ref: r
 			}, {
-				...n.$attrs,
+				...t.$attrs,
 				class: null,
 				style: null
 			}, {
 				type: "text",
-				value: t.modelValue,
-				class: "text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm",
-				onInput: s[0] ||= (e) => i("update:modelValue", e.target.value)
-			}), null, 16, Be)]),
+				class: "poveste-text-input",
+				"data-slot": "control",
+				value: e.modelValue,
+				onInput: i[0] ||= (e) => n("update:modelValue", e.target.value)
+			}), null, 16, ln)]),
 			_: 3
 		}, 8, [
 			"title",
@@ -652,7 +2408,7 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), He = ["value"], Ue = /* @__PURE__ */ u({
+}), dn = ["value"], fn = /* @__PURE__ */ j({
 	name: "HstTextarea",
 	inheritAttrs: !1,
 	props: {
@@ -660,27 +2416,28 @@ var k = /* @__PURE__ */ u({
 		modelValue: {}
 	},
 	emits: { "update:modelValue": (e) => !0 },
-	setup(t, { emit: n }) {
-		let i = n, a = g();
-		return (n, s) => (h(), r(e, {
-			title: t.title,
-			class: f(["poveste-textarea cursor-text", n.$attrs.class]),
-			style: p(n.$attrs.style),
-			onClick: s[1] ||= (e) => a.value.focus()
+	setup(e, { emit: t }) {
+		let n = t, r = B();
+		return (t, i) => (z(), w(u, {
+			title: e.title,
+			class: F(["poveste-textarea", t.$attrs.class]),
+			style: L(t.$attrs.style),
+			onClick: i[1] ||= (e) => r.value?.focus()
 		}, {
-			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("textarea", d({
+			actions: q(() => [H(t.$slots, "actions")]),
+			default: q(() => [D("textarea", N({
 				ref_key: "input",
-				ref: a
+				ref: r
 			}, {
-				...n.$attrs,
+				...t.$attrs,
 				class: null,
 				style: null
 			}, {
-				value: t.modelValue,
-				class: "text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm box-border resize-y min-h-[26px]",
-				onInput: s[0] ||= (e) => i("update:modelValue", e.target.value)
-			}), null, 16, He)]),
+				class: "poveste-textarea-input",
+				"data-slot": "control",
+				value: e.modelValue,
+				onInput: i[0] ||= (e) => n("update:modelValue", e.target.value)
+			}), null, 16, dn)]),
 			_: 3
 		}, 8, [
 			"title",
@@ -688,26 +2445,34 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), R = k, z = re, B = oe, V = le, H = Ve, U = Oe, W = ze, G = Ue, K = Le, q = N, J = De, Y = be, X = j, Z = je, Q = Object.assign(l(() => import("./HstJson-Dz6cYiFP.es.js")), {
+}), pn = ge, mn = St, hn = kt, gn = At, _n = un, vn = en, yn = cn, bn = fn, xn = on, Sn = Bt, Cn = $t, wn = Kt, Tn = $, En = c, Dn = tn, On = Object.assign(A(() => import("./HstJson-D83KEa9o.es.js")), {
 	name: "HstJson",
 	emits: ["update:modelValue"]
-}), $ = fe, We = {
-	HstButton: R,
-	HstButtonGroup: z,
-	HstCheckbox: B,
-	HstCheckboxList: V,
-	HstText: H,
-	HstNumber: U,
-	HstSlider: W,
-	HstTextarea: G,
-	HstSelect: K,
-	HstRadio: Z,
-	HstJson: Q,
-	HstColorShades: q,
-	HstTokenList: J,
-	HstTokenGrid: Y,
-	HstCopyIcon: X,
-	HstColorSelect: $
+}), kn = Object.assign(A(() => import("./HstDate-Ct5Jp_ZD.es.js")), {
+	name: "HstDate",
+	emits: ["update:modelValue"]
+}), An = Object.assign(A(() => import("./HstColor-DHgxKTkm.es.js")), {
+	name: "HstColor",
+	emits: ["update:modelValue"]
+}), jn = Nt, Mn = {
+	HstButton: pn,
+	HstButtonGroup: mn,
+	HstCheckbox: hn,
+	HstCheckboxList: gn,
+	HstText: _n,
+	HstNumber: vn,
+	HstSlider: yn,
+	HstTextarea: bn,
+	HstSelect: xn,
+	HstRadio: Dn,
+	HstColor: An,
+	HstDate: kn,
+	HstJson: On,
+	HstColorShades: Sn,
+	HstTokenList: Cn,
+	HstTokenGrid: wn,
+	HstCopyIcon: Tn,
+	HstColorSelect: jn
 };
 //#endregion
-export { R as HstButton, z as HstButtonGroup, B as HstCheckbox, V as HstCheckboxList, $ as HstColorSelect, q as HstColorShades, X as HstCopyIcon, Q as HstJson, U as HstNumber, Z as HstRadio, K as HstSelect, W as HstSlider, H as HstText, G as HstTextarea, Y as HstTokenGrid, J as HstTokenList, We as components };
+export { pn as HstButton, mn as HstButtonGroup, hn as HstCheckbox, gn as HstCheckboxList, An as HstColor, jn as HstColorSelect, Sn as HstColorShades, Tn as HstCopyIcon, kn as HstDate, On as HstJson, vn as HstNumber, Dn as HstRadio, xn as HstSelect, yn as HstSlider, _n as HstText, bn as HstTextarea, wn as HstTokenGrid, Cn as HstTokenList, En as HstTooltip, ot as PopoverAnchor, _ as PopoverContent, h as PopoverPortal, m as PopoverRoot, y as PopoverTrigger, Mn as components, l as portalTarget };