@filipgutica/ui 1.5.0 → 1.7.0

package/dist/index.js

@@ -1,102 +1,66 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, mergeProps as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, provide as g, readonly as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, shallowRef as S, toDisplayString as C, unref as w, useId as T, useModel as E, useSlots as ee, watch as te, withCtx as D } from "vue";
-import { CheckboxIndicator as O, CheckboxRoot as k, DialogClose as A, DialogContent as j, DialogDescription as ne, DialogOverlay as M, DialogPortal as N, DialogRoot as P, DialogTitle as F, DialogTrigger as I, Primitive as L, ProgressIndicator as R, ProgressRoot as z, RadioGroupItem as B, RadioGroupRoot as V, SliderRange as H, SliderRoot as U, SliderThumb as W, SliderTrack as G } from "reka-ui";
-import { useTimeoutFn as K } from "@vueuse/core";
-//#endregion
-//#region src/components/UiButton.vue
-var q = /* @__PURE__ */ c({
-	__name: "UiButton",
-	props: {
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		size: { default: "md" },
-		type: { default: "button" },
-		variant: { default: "primary" }
-	},
-	setup(e) {
-		return (t, r) => (h(), n(w(L), {
-			as: "button",
-			class: "fg-button",
-			"data-size": e.size,
-			"data-variant": e.variant,
-			"aria-busy": e.loading ? "true" : void 0,
-			disabled: e.disabled || e.loading,
-			type: e.type
-		}, {
-			default: D(() => [b(t.$slots, "default")]),
-			_: 3
-		}, 8, [
-			"data-size",
-			"data-variant",
-			"aria-busy",
-			"disabled",
-			"type"
-		]));
-	}
-}), J = { class: "fg-card" }, Y = {
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, inject as h, mergeModels as g, mergeProps as _, normalizeStyle as v, openBlock as y, provide as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, shallowRef as T, toDisplayString as E, unref as D, useModel as ee, useSlots as te, watch as O, withCtx as k } from "vue";
+import { CheckboxIndicator as A, CheckboxRoot as j, Primitive as M, ProgressIndicator as N, ProgressRoot as P, RadioGroupItem as F, RadioGroupRoot as I, SliderRange as L, SliderRoot as R, SliderThumb as z, SliderTrack as B } from "reka-ui";
+//#region src/components/UiCard.vue?vue&type=script&setup=true&lang.ts
+var V = { class: "fg-card" }, H = {
 	key: 0,
 	class: "fg-card__header"
-}, X = {
+}, U = {
 	key: 1,
 	class: "fg-card__actions"
-}, Z = {
+}, W = {
 	key: 1,
 	class: "fg-card__body"
-}, re = {
+}, G = {
 	key: 2,
 	class: "fg-card__footer"
-}, ie = /* @__PURE__ */ c({
+}, K = /* @__PURE__ */ m({
 	__name: "UiCard",
 	props: {
 		title: { default: () => void 0 },
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = ee();
-		return (a, s) => (h(), i("div", J, [
-			e.title || t.title || t.actions ? (h(), i("header", Y, [e.title || t.title ? (h(), n(x(e.titleTag), {
+		let t = te();
+		return (n, r) => (y(), u("div", V, [
+			e.title || t.title || t.actions ? (y(), u("header", H, [e.title || t.title ? (y(), c(w(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: D(() => [b(a.$slots, "title", {}, () => [o(C(e.title), 1)])]),
+				default: k(() => [C(n.$slots, "title", {}, () => [f(E(e.title), 1)])]),
 				_: 3
-			})) : r("", !0), t.actions ? (h(), i("div", X, [b(a.$slots, "actions")])) : r("", !0)])) : r("", !0),
-			t.default ? (h(), i("div", Z, [b(a.$slots, "default")])) : r("", !0),
-			t.footer ? (h(), i("footer", re, [b(a.$slots, "footer")])) : r("", !0)
+			})) : l("", !0), t.actions ? (y(), u("div", U, [C(n.$slots, "actions")])) : l("", !0)])) : l("", !0),
+			t.default ? (y(), u("div", W, [C(n.$slots, "default")])) : l("", !0),
+			t.footer ? (y(), u("footer", G, [C(n.$slots, "footer")])) : l("", !0)
 		]));
 	}
-}), ae = [
+}), q = [
 	"data-wrap",
 	"data-line-numbers",
 	"data-variant"
-], oe = {
+], J = {
 	key: 0,
 	class: "fg-code-block__header"
-}, se = {
+}, Y = {
 	key: 0,
 	class: "fg-code-block__title"
-}, ce = {
+}, X = {
 	key: 1,
 	class: "fg-code-block__language"
-}, le = { class: "fg-code-block__actions" }, ue = ["disabled", "title"], de = {
+}, Z = { class: "fg-code-block__actions" }, ne = ["disabled", "title"], re = {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, fe = {
+}, ie = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, pe = { key: 0 }, me = ["aria-label"], he = {
+}, ae = { key: 0 }, oe = ["aria-label"], se = {
 	key: 0,
 	class: "fg-code-block__number",
 	"aria-hidden": "true"
-}, ge = { class: "fg-code-block__text" }, _e = ["data-state"], ve = /* @__PURE__ */ c({
+}, ce = { class: "fg-code-block__text" }, le = ["data-state"], ue = /* @__PURE__ */ m({
 	__name: "UiCodeBlock",
 	props: {
 		code: {},
@@ -116,8 +80,8 @@ var q = /* @__PURE__ */ c({
 		},
 		variant: { default: "default" }
 	},
-	setup(n) {
-		let s = S(), c = v(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
+	setup(t) {
+		let n = T(), r = x(""), i = s(() => n.value ?? t.code.split("\n").map((e) => [{ content: e }])), a = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -130,116 +94,104 @@ var q = /* @__PURE__ */ c({
 			sh: "bash",
 			shell: "bash"
 		};
-		te(() => [n.code, n.language], async ([e, t], n, r) => {
-			let i = !1;
-			r(() => {
-				i = !0;
-			}), s.value = void 0, c.value = "";
-			let a = t.trim().toLowerCase(), o = Object.hasOwn(u, a) ? u[a] : void 0;
-			if (o) try {
+		O(() => [t.code, t.language], async ([e, t], i, o) => {
+			let s = !1;
+			o(() => {
+				s = !0;
+			}), n.value = void 0, r.value = "";
+			let c = t.trim().toLowerCase(), l = Object.hasOwn(a, c) ? a[c] : void 0;
+			if (l) try {
 				let { highlightCode: t } = await import("./code-highlight-BuTmXL3w.js");
-				if (i) return;
-				let n = await t({
+				if (s) return;
+				let r = await t({
 					code: e,
-					language: o
+					language: l
 				});
-				if (i) return;
-				let r = e.split("\n");
-				s.value = r.map((e, t) => {
-					let r = n[t] ?? [];
-					return e.endsWith("\r") ? [...r, { content: "\r" }] : r;
+				if (s) return;
+				let i = e.split("\n");
+				n.value = i.map((e, t) => {
+					let n = r[t] ?? [];
+					return e.endsWith("\r") ? [...n, { content: "\r" }] : n;
 				});
 			} catch {
-				i || (c.value = "Syntax highlighting unavailable. Showing plain text.");
+				s || (r.value = "Syntax highlighting unavailable. Showing plain text.");
 			}
 		}, { immediate: !0 });
-		let d = v(!1), { start: p } = K(() => {
-			d.value = !1;
-		}, 1500, { immediate: !1 }), m = v(!1), g = v(""), _ = t(() => d.value && !g.value), x = t(() => n.variant === "compact" && _.value && !c.value), w = t(() => g.value ? g.value : n.variant === "compact" && c.value ? d.value ? `Code copied to clipboard. ${c.value}` : c.value : d.value ? "Code copied to clipboard." : c.value), T = async () => {
-			if (g.value = "", d.value = !1, typeof navigator > "u" || !navigator.clipboard?.writeText) {
-				g.value = "Clipboard unavailable. Select the code to copy it.";
-				return;
-			}
-			m.value = !0;
-			try {
-				await navigator.clipboard.writeText(n.code), d.value = !0, p();
-			} catch {
-				g.value = "Could not copy. Select the code to copy it.";
-			} finally {
-				m.value = !1;
-			}
-		};
-		return (t, s) => (h(), i("div", {
+		let { copied: c, pending: p, error: m, copy: h } = e({
+			unavailableMessage: "Clipboard unavailable. Select the code to copy it.",
+			failureMessage: "Could not copy. Select the code to copy it."
+		}), g = s(() => c.value && !m.value), _ = s(() => t.variant === "compact" && g.value && !r.value), b = s(() => m.value ? m.value : t.variant === "compact" && r.value ? c.value ? `Code copied to clipboard. ${r.value}` : r.value : c.value ? "Code copied to clipboard." : r.value), w = () => h(t.code);
+		return (e, n) => (y(), u("div", {
 			class: "fg-code-block",
-			"data-wrap": n.wrap,
-			"data-line-numbers": n.lineNumbers,
-			"data-variant": n.variant
+			"data-wrap": t.wrap,
+			"data-line-numbers": t.lineNumbers,
+			"data-variant": t.variant
 		}, [
-			n.variant === "default" || n.copyable || t.$slots.actions ? (h(), i("div", oe, [
-				n.variant === "default" ? (h(), i("span", se, C(n.title || n.language), 1)) : r("", !0),
-				n.title && n.variant === "default" ? (h(), i("span", ce, C(n.language), 1)) : r("", !0),
-				a("div", le, [b(t.$slots, "actions"), n.copyable ? (h(), i("button", {
+			t.variant === "default" || t.copyable || e.$slots.actions ? (y(), u("div", J, [
+				t.variant === "default" ? (y(), u("span", Y, E(t.title || t.language), 1)) : l("", !0),
+				t.title && t.variant === "default" ? (y(), u("span", X, E(t.language), 1)) : l("", !0),
+				d("div", Z, [C(e.$slots, "actions"), t.copyable ? (y(), u("button", {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
-					disabled: m.value,
+					disabled: D(p),
 					"aria-label": "Copy code",
-					title: n.variant === "compact" ? _.value ? "Copied" : "Copy code" : void 0,
-					onClick: T
-				}, [(h(), i("svg", de, [n.variant === "compact" && _.value ? (h(), i("path", fe)) : (h(), i(e, { key: 1 }, [s[0] ||= a("rect", {
+					title: t.variant === "compact" ? g.value ? "Copied" : "Copy code" : void 0,
+					onClick: w
+				}, [(y(), u("svg", re, [t.variant === "compact" && g.value ? (y(), u("path", ie)) : (y(), u(o, { key: 1 }, [n[0] ||= d("rect", {
 					x: "8",
 					y: "8",
 					width: "12",
 					height: "13",
 					rx: "2"
-				}, null, -1), s[1] ||= a("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))])), n.variant === "default" ? (h(), i("span", pe, C(_.value ? "Copied" : "Copy"), 1)) : r("", !0)], 8, ue)) : r("", !0)])
-			])) : r("", !0),
-			a("pre", {
+				}, null, -1), n[1] ||= d("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))])), t.variant === "default" ? (y(), u("span", ae, E(g.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, ne)) : l("", !0)])
+			])) : l("", !0),
+			d("pre", {
 				class: "fg-code-block__pre",
 				tabindex: "0",
-				"aria-label": n.title || `${n.language} code`
-			}, [a("code", null, [(h(!0), i(e, null, y(l.value, (t, s) => (h(), i("span", {
-				key: s,
+				"aria-label": t.title || `${t.language} code`
+			}, [d("code", null, [(y(!0), u(o, null, S(i.value, (e, n) => (y(), u("span", {
+				key: n,
 				class: "fg-code-block__line"
-			}, [n.lineNumbers ? (h(), i("span", he, C(s + 1), 1)) : r("", !0), a("span", ge, [(h(!0), i(e, null, y(t, (e, t) => (h(), i("span", {
+			}, [t.lineNumbers ? (y(), u("span", se, E(n + 1), 1)) : l("", !0), d("span", ce, [(y(!0), u(o, null, S(e, (e, t) => (y(), u("span", {
 				key: t,
-				style: f({ color: e.color })
-			}, C(e.content), 5))), 128)), o(C(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, me),
-			a("span", {
+				style: v({ color: e.color })
+			}, E(e.content), 5))), 128)), f(E(n < i.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, oe),
+			d("span", {
 				class: "fg-code-block__status",
 				role: "status",
-				"data-state": x.value ? "success" : void 0
-			}, C(w.value), 9, _e)
-		], 8, ae));
+				"data-state": _.value ? "success" : void 0
+			}, E(b.value), 9, le)
+		], 8, q));
 	}
-}), ye = /* @__PURE__ */ c({
+}), de = /* @__PURE__ */ m({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (h(), n(w(L), {
+		return (t, n) => (y(), c(D(M), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
 			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
 		}, {
-			default: D(() => [b(t.$slots, "default")]),
+			default: k(() => [C(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), be = /* @__PURE__ */ c({
+}), fe = /* @__PURE__ */ m({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (h(), n(w(L), {
+		return (t, n) => (y(), c(D(M), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
 		}, {
-			default: D(() => [b(t.$slots, "default")]),
+			default: k(() => [C(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), xe = ["data-size", "data-disabled"], Se = { class: "fg-checkbox__label" }, Ce = /* @__PURE__ */ c({
+}), pe = ["data-size", "data-disabled"], me = { class: "fg-checkbox__label" }, he = /* @__PURE__ */ m({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -257,117 +209,24 @@ var q = /* @__PURE__ */ c({
 		let n = t, r = (e) => {
 			n("update:modelValue", e === !0);
 		};
-		return (t, n) => (h(), i("label", {
+		return (t, n) => (y(), u("label", {
 			class: "fg-checkbox",
 			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [s(w(k), {
+		}, [p(D(j), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: D(() => [s(w(O), { class: "fg-checkbox__indicator" }, {
-				default: D(() => [...n[0] ||= [o("✓", -1)]]),
+			default: k(() => [p(D(A), { class: "fg-checkbox__indicator" }, {
+				default: k(() => [...n[0] ||= [f("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), a("span", Se, [b(t.$slots, "default")])], 8, xe));
-	}
-}), we = { class: "fg-dialog__header" }, Te = { class: "fg-dialog__body" }, Ee = {
-	key: 0,
-	class: "fg-dialog__footer"
-}, De = /* @__PURE__ */ c({
-	inheritAttrs: !1,
-	__name: "UiDialog",
-	props: {
-		description: { default: () => void 0 },
-		open: { type: Boolean },
-		title: {}
-	},
-	emits: ["update:open"],
-	setup(e, { emit: t }) {
-		let c = t;
-		return (t, l) => (h(), n(w(P), {
-			open: e.open,
-			"onUpdate:open": l[0] ||= (e) => c("update:open", e)
-		}, {
-			default: D(() => [s(w(N), null, {
-				default: D(() => [s(w(M), { class: "fg-dialog__overlay" }), s(w(j), d({
-					class: "fg-dialog__content",
-					"aria-modal": "true"
-				}, t.$attrs), {
-					default: D(() => [
-						a("div", we, [a("div", null, [s(w(F), { class: "fg-dialog__title" }, {
-							default: D(() => [o(C(e.title), 1)]),
-							_: 1
-						}), e.description ? (h(), n(w(ne), {
-							key: 0,
-							class: "fg-dialog__description"
-						}, {
-							default: D(() => [o(C(e.description), 1)]),
-							_: 1
-						})) : r("", !0)]), s(w(A), {
-							class: "fg-dialog__close",
-							"aria-label": "Close dialog"
-						}, {
-							default: D(() => [...l[1] ||= [o(" × ", -1)]]),
-							_: 1
-						})]),
-						a("div", Te, [b(t.$slots, "default")]),
-						t.$slots.footer ? (h(), i("div", Ee, [b(t.$slots, "footer")])) : r("", !0)
-					]),
-					_: 3
-				}, 16)]),
-				_: 3
-			})]),
-			_: 3
-		}, 8, ["open"]));
-	}
-}), Oe = { class: "fg-drawer__header" }, ke = { class: "fg-drawer__body" }, Ae = /* @__PURE__ */ c({
-	inheritAttrs: !1,
-	__name: "UiDrawer",
-	props: {
-		open: { type: Boolean },
-		title: {}
-	},
-	emits: ["update:open", "closeAutoFocus"],
-	setup(e, { emit: t }) {
-		let i = t;
-		return (t, c) => (h(), n(w(P), {
-			open: e.open,
-			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
-		}, {
-			default: D(() => [t.$slots.trigger ? (h(), n(w(I), {
-				key: 0,
-				"as-child": ""
-			}, {
-				default: D(() => [b(t.$slots, "trigger")]),
-				_: 3
-			})) : r("", !0), s(w(N), null, {
-				default: D(() => [s(w(M), { class: "fg-drawer__overlay" }), s(w(j), d({
-					class: "fg-drawer__content",
-					"aria-modal": "true",
-					"aria-describedby": void 0
-				}, t.$attrs, { onCloseAutoFocus: c[0] ||= (e) => i("closeAutoFocus", e) }), {
-					default: D(() => [a("div", Oe, [s(w(F), { class: "fg-drawer__title" }, {
-						default: D(() => [o(C(e.title), 1)]),
-						_: 1
-					}), s(w(A), {
-						class: "fg-drawer__close",
-						"aria-label": "Close drawer"
-					}, {
-						default: D(() => [...c[2] ||= [o(" × ", -1)]]),
-						_: 1
-					})]), a("div", ke, [b(t.$slots, "default")])]),
-					_: 3
-				}, 16)]),
-				_: 3
-			})]),
-			_: 3
-		}, 8, ["open"]));
+		}, 8, ["disabled", "model-value"]), d("span", me, [C(t.$slots, "default")])], 8, pe));
 	}
-}), Q = Symbol("UiFieldContext"), je = ["data-invalid"], Me = ["for"], Ne = ["id"], Pe = ["id"], Fe = /* @__PURE__ */ c({
+}), Q = Symbol("UiFieldContext"), ge = ["data-invalid"], _e = ["for"], ve = ["id"], ye = ["id"], be = /* @__PURE__ */ m({
 	__name: "UiField",
 	props: {
 		controlId: {},
@@ -376,39 +235,39 @@ var q = /* @__PURE__ */ c({
 		label: {}
 	},
 	setup(e) {
-		let n = t(() => e.description && !e.error ? `${e.controlId}-description` : void 0), o = t(() => e.error ? `${e.controlId}-error` : void 0), s = t(() => !!e.error);
-		return g(Q, {
-			controlId: t(() => e.controlId),
-			descriptionId: n,
-			errorId: o,
-			invalid: s
-		}), (t, s) => (h(), i("div", {
+		let t = s(() => e.description && !e.error ? `${e.controlId}-description` : void 0), n = s(() => e.error ? `${e.controlId}-error` : void 0), r = s(() => !!e.error);
+		return b(Q, {
+			controlId: s(() => e.controlId),
+			descriptionId: t,
+			errorId: n,
+			invalid: r
+		}), (r, i) => (y(), u("div", {
 			class: "fg-field",
 			"data-invalid": e.error ? "true" : void 0
 		}, [
-			a("label", {
+			d("label", {
 				class: "fg-field__label",
 				for: e.controlId
-			}, C(e.label), 9, Me),
-			b(t.$slots, "default", {
-				descriptionId: n.value,
-				errorId: o.value
+			}, E(e.label), 9, _e),
+			C(r.$slots, "default", {
+				descriptionId: t.value,
+				errorId: n.value
 			}),
-			e.description && !e.error ? (h(), i("p", {
+			e.description && !e.error ? (y(), u("p", {
 				key: 0,
-				id: n.value,
+				id: t.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, C(e.description), 9, Ne)) : r("", !0),
-			e.error ? (h(), i("p", {
+			}, E(e.description), 9, ve)) : l("", !0),
+			e.error ? (y(), u("p", {
 				key: 1,
-				id: o.value,
+				id: n.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, C(e.error), 9, Pe)) : r("", !0)
-		], 8, je));
+			}, E(e.error), 9, ye)) : l("", !0)
+		], 8, ge));
 	}
-}), Ie = /* @__PURE__ */ c({
+}), $ = /* @__PURE__ */ m({
 	__name: "UiInput",
 	props: {
 		disabled: {
@@ -426,21 +285,21 @@ var q = /* @__PURE__ */ c({
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let r = l(Q, void 0), i = t, a = (e) => {
-			e.currentTarget instanceof HTMLInputElement && i("update:modelValue", e.currentTarget.value);
+		let n = h(Q, void 0), r = t, i = (e) => {
+			e.currentTarget instanceof HTMLInputElement && r("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (h(), n(w(L), {
-			id: w(r)?.controlId.value ?? e.id,
+		return (t, r) => (y(), c(D(M), {
+			id: D(n)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
-			"aria-describedby": w(r)?.descriptionId.value,
-			"aria-errormessage": w(r)?.errorId.value,
-			"aria-invalid": e.invalid || w(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": D(n)?.descriptionId.value,
+			"aria-errormessage": D(n)?.errorId.value,
+			"aria-invalid": e.invalid || D(n)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			type: e.type,
 			value: e.modelValue,
-			onInput: a
+			onInput: i
 		}, null, 8, [
 			"id",
 			"aria-describedby",
@@ -452,7 +311,7 @@ var q = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), Le = 100, Re = /* @__PURE__ */ c({
+}), xe = 100, Se = /* @__PURE__ */ m({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -460,22 +319,22 @@ var q = /* @__PURE__ */ c({
 		value: {}
 	},
 	setup(e) {
-		let r = t(() => {
-			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Le;
+		let t = s(() => {
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : xe;
 			return {
 				max: t,
 				value: e.value === null || !Number.isFinite(e.value) ? null : Math.min(t, Math.max(0, e.value))
 			};
-		}), i = t(() => r.value.value === null ? 0 : r.value.value / r.value.max * 100);
-		return (t, a) => (h(), n(w(z), {
+		}), n = s(() => t.value.value === null ? 0 : t.value.value / t.value.max * 100);
+		return (r, i) => (y(), c(D(P), {
 			class: "fg-progress",
 			"aria-label": e.label,
-			max: r.value.max,
-			"model-value": r.value.value
+			max: t.value.max,
+			"model-value": t.value.value
 		}, {
-			default: D(() => [s(w(R), {
+			default: k(() => [p(D(N), {
 				class: "fg-progress__indicator",
-				style: f({ transform: `translateX(-${100 - i.value}%)` })
+				style: v({ transform: `translateX(-${100 - n.value}%)` })
 			}, null, 8, ["style"])]),
 			_: 1
 		}, 8, [
@@ -484,7 +343,7 @@ var q = /* @__PURE__ */ c({
 			"model-value"
 		]));
 	}
-}), ze = { class: "fg-radio-card__content" }, Be = /* @__PURE__ */ c({
+}), Ce = { class: "fg-radio-card__content" }, we = /* @__PURE__ */ m({
 	__name: "UiRadioCard",
 	props: {
 		disabled: {
@@ -494,21 +353,21 @@ var q = /* @__PURE__ */ c({
 		value: {}
 	},
 	setup(e) {
-		return (t, r) => (h(), n(w(B), {
+		return (t, n) => (y(), c(D(F), {
 			class: "fg-radio-card",
 			disabled: e.disabled,
 			value: e.value
 		}, {
-			default: D(() => [r[0] ||= a("span", {
+			default: k(() => [n[0] ||= d("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
-			}, null, -1), a("span", ze, [b(t.$slots, "default")])]),
+			}, null, -1), d("span", Ce, [C(t.$slots, "default")])]),
 			_: 3
 		}, 8, ["disabled", "value"]));
 	}
-}), Ve = /* @__PURE__ */ c({
+}), Te = /* @__PURE__ */ m({
 	__name: "UiRadioCardGroup",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ g({
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -524,7 +383,7 @@ var q = /* @__PURE__ */ c({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = E(e, "modelValue"), r = (t) => {
+		let t = ee(e, "modelValue"), n = (t) => {
 			if (t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
 			let n = t.currentTarget, r = t.target;
 			if (!(n instanceof HTMLElement) || !(r instanceof HTMLElement)) return;
@@ -540,14 +399,14 @@ var q = /* @__PURE__ */ c({
 			let d = o[u];
 			!d || d === r || (t.preventDefault(), d.focus(), d.click());
 		};
-		return (i, a) => (h(), n(w(V), d({
+		return (r, i) => (y(), c(D(I), _({
 			modelValue: t.value,
-			"onUpdate:modelValue": a[0] ||= (e) => t.value = e,
+			"onUpdate:modelValue": i[0] ||= (e) => t.value = e,
 			class: "fg-radio-card-group",
 			disabled: e.disabled,
 			loop: e.loop
-		}, e.orientation === void 0 ? {} : { orientation: e.orientation }, { onKeydown: r }), {
-			default: D(() => [b(i.$slots, "default")]),
+		}, e.orientation === void 0 ? {} : { orientation: e.orientation }, { onKeydown: n }), {
+			default: k(() => [C(r.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -555,7 +414,7 @@ var q = /* @__PURE__ */ c({
 			"loop"
 		]));
 	}
-}), $ = /* @__PURE__ */ c({
+}), Ee = /* @__PURE__ */ m({
 	__name: "UiSelect",
 	props: {
 		disabled: {
@@ -572,22 +431,22 @@ var q = /* @__PURE__ */ c({
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let r = l(Q, void 0), i = t, a = (e) => {
-			e.currentTarget instanceof HTMLSelectElement && i("update:modelValue", e.currentTarget.value);
+		let n = h(Q, void 0), r = t, i = (e) => {
+			e.currentTarget instanceof HTMLSelectElement && r("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (h(), n(w(L), {
-			id: w(r)?.controlId.value ?? e.id,
+		return (t, r) => (y(), c(D(M), {
+			id: D(n)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
-			"aria-describedby": w(r)?.descriptionId.value,
-			"aria-errormessage": w(r)?.errorId.value,
-			"aria-invalid": e.invalid || w(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": D(n)?.descriptionId.value,
+			"aria-errormessage": D(n)?.errorId.value,
+			"aria-invalid": e.invalid || D(n)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			value: e.modelValue,
-			onChange: a
+			onChange: i
 		}, {
-			default: D(() => [b(t.$slots, "default")]),
+			default: k(() => [C(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -599,7 +458,7 @@ var q = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), He = /* @__PURE__ */ c({
+}), De = /* @__PURE__ */ m({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -615,42 +474,42 @@ var q = /* @__PURE__ */ c({
 		step: { default: 1 }
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: r }) {
-		let i = l(Q, void 0), a = t(() => {
+	setup(e, { emit: t }) {
+		let n = h(Q, void 0), r = s(() => {
 			let t = Number.isFinite(e.min) ? e.min : 0;
 			return {
 				max: Number.isFinite(e.max) && e.max > t ? e.max : t + 100,
 				min: t,
 				step: Number.isFinite(e.step) && e.step > 0 ? e.step : 1
 			};
-		}), o = r, c = t({
+		}), i = t, a = s({
 			get: () => {
-				let t = e.modelValue !== void 0 && Number.isFinite(e.modelValue) ? e.modelValue : a.value.min;
-				return [Math.min(a.value.max, Math.max(a.value.min, t))];
+				let t = e.modelValue !== void 0 && Number.isFinite(e.modelValue) ? e.modelValue : r.value.min;
+				return [Math.min(r.value.max, Math.max(r.value.min, t))];
 			},
 			set: ([e]) => {
-				e !== void 0 && o("update:modelValue", e);
+				e !== void 0 && i("update:modelValue", e);
 			}
 		});
-		return (t, r) => (h(), n(w(U), {
-			modelValue: c.value,
-			"onUpdate:modelValue": r[0] ||= (e) => c.value = e,
+		return (t, i) => (y(), c(D(R), {
+			modelValue: a.value,
+			"onUpdate:modelValue": i[0] ||= (e) => a.value = e,
 			class: "fg-slider",
 			"data-size": e.size,
 			disabled: e.disabled,
-			max: a.value.max,
-			min: a.value.min,
-			step: a.value.step
+			max: r.value.max,
+			min: r.value.min,
+			step: r.value.step
 		}, {
-			default: D(() => [s(w(G), { class: "fg-slider__track" }, {
-				default: D(() => [s(w(H), { class: "fg-slider__range" })]),
+			default: k(() => [p(D(B), { class: "fg-slider__track" }, {
+				default: k(() => [p(D(L), { class: "fg-slider__range" })]),
 				_: 1
-			}), s(w(W), {
-				id: w(i)?.controlId.value ?? e.id,
+			}), p(D(z), {
+				id: D(n)?.controlId.value ?? e.id,
 				class: "fg-slider__thumb",
-				"aria-describedby": w(i)?.descriptionId.value,
-				"aria-errormessage": w(i)?.errorId.value,
-				"aria-invalid": w(i)?.invalid.value ? "true" : void 0,
+				"aria-describedby": D(n)?.descriptionId.value,
+				"aria-errormessage": D(n)?.errorId.value,
+				"aria-invalid": D(n)?.invalid.value ? "true" : void 0,
 				"aria-label": e.label
 			}, null, 8, [
 				"id",
@@ -669,118 +528,22 @@ var q = /* @__PURE__ */ c({
 			"step"
 		]));
 	}
-}), Ue = { class: "fg-tabs" }, We = ["aria-label"], Ge = [
-	"id",
-	"aria-controls",
-	"aria-selected",
-	"tabindex",
-	"onClick",
-	"onFocus"
-], Ke = [
-	"id",
-	"role",
-	"aria-labelledby",
-	"hidden",
-	"tabindex"
-], qe = ["id", "hidden"], Je = /* @__PURE__ */ c({
-	__name: "UiTabs",
-	props: {
-		items: {},
-		label: {},
-		modelValue: {}
-	},
-	emits: ["update:modelValue"],
-	setup(n, { emit: o }) {
-		let s = o, c = T(), l = v(!1), u = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), d = (e) => `${c}-tab-${encodeURIComponent(e)}`, f = (e) => `${c}-panel-${encodeURIComponent(e)}`, m = (e) => `${c}-heading-${encodeURIComponent(e)}`;
-		p(() => {
-			l.value = !0;
-		});
-		let g = (e) => {
-			e !== u.value && s("update:modelValue", e);
-		}, _ = (e) => {
-			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
-				"ArrowLeft",
-				"ArrowRight",
-				"Home",
-				"End"
-			].includes(e.key)) return;
-			let t = e.currentTarget, n = e.target;
-			if (!(t instanceof HTMLElement) || !(n instanceof HTMLButtonElement)) return;
-			let r = [...t.querySelectorAll("[role=\"tab\"]")], i = r.indexOf(n);
-			if (i < 0 || r.length === 0) return;
-			let a = getComputedStyle(t).direction === "rtl", o = e.key === (a ? "ArrowRight" : "ArrowLeft"), s = r[e.key === "Home" ? 0 : e.key === "End" ? r.length - 1 : (i + (o ? -1 : 1) + r.length) % r.length];
-			s && (e.preventDefault(), s.focus());
-		};
-		return (t, o) => (h(), i("div", Ue, [l.value ? (h(), i("div", {
-			key: 0,
-			class: "fg-tabs__list",
-			role: "tablist",
-			"aria-label": n.label,
-			onKeydown: _
-		}, [(h(!0), i(e, null, y(n.items, (e) => (h(), i("button", {
-			id: d(e.value),
-			key: e.value,
-			type: "button",
-			class: "fg-tabs__tab",
-			role: "tab",
-			"aria-controls": f(e.value),
-			"aria-selected": e.value === u.value,
-			tabindex: e.value === u.value ? 0 : -1,
-			onClick: (t) => g(e.value),
-			onFocus: (t) => g(e.value)
-		}, C(e.label), 41, Ge))), 128))], 40, We)) : r("", !0), (h(!0), i(e, null, y(n.items, (e) => (h(), i("section", {
-			id: f(e.value),
-			key: e.value,
-			class: "fg-tabs__panel",
-			role: l.value ? "tabpanel" : void 0,
-			"aria-labelledby": l.value ? d(e.value) : m(e.value),
-			hidden: l.value && e.value !== u.value,
-			tabindex: l.value ? 0 : void 0
-		}, [a("h3", {
-			id: m(e.value),
-			class: "fg-tabs__heading",
-			hidden: l.value
-		}, C(e.label), 9, qe), b(t.$slots, "panel", { value: e.value })], 8, Ke))), 128))]));
-	}
-}), Ye = /* @__PURE__ */ c({
+}), Oe = /* @__PURE__ */ m({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (t, r) => (h(), n(w(L), {
+		return (t, n) => (y(), c(D(M), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
 		}, {
-			default: D(() => [b(t.$slots, "default")]),
+			default: k(() => [C(t.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
-}), Xe = ({ targetIds: e }) => {
-	let t = v(e[0]), n, r, i;
-	return p(() => {
-		let a = e.flatMap((e) => {
-			let t = document.getElementById(e);
-			return t ? [{
-				id: e,
-				element: t
-			}] : [];
-		}), o = () => {
-			n = void 0;
-			let e = document.documentElement, r = Number.parseFloat(getComputedStyle(e).scrollPaddingTop) || 0, i = a[0]?.id;
-			for (let e of a) e.element.getBoundingClientRect().top <= r + 1 && (i = e.id);
-			window.scrollY > 0 && window.scrollY + window.innerHeight >= e.scrollHeight - 2 && (i = a.at(-1)?.id), t.value = i;
-		}, s = () => {
-			n === void 0 && (n = requestAnimationFrame(o));
-		};
-		window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s), window.addEventListener("pageshow", s), document.body.addEventListener("transitionend", s), typeof ResizeObserver < "u" && (r = new ResizeObserver(s), r.observe(document.body)), i = () => {
-			window.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("pageshow", s), document.body.removeEventListener("transitionend", s);
-		}, o();
-	}), m(() => {
-		i?.(), r?.disconnect(), n !== void 0 && cancelAnimationFrame(n);
-	}), _(t);
-};
+});
 //#endregion
-export { ye as UiAlert, be as UiBadge, q as UiButton, ie as UiCard, Ce as UiCheckbox, ve as UiCodeBlock, De as UiDialog, Ae as UiDrawer, Fe as UiField, Ie as UiInput, Re as UiProgress, Be as UiRadioCard, Ve as UiRadioCardGroup, $ as UiSelect, He as UiSlider, Ye as UiSurface, Je as UiTabs, Xe as useActiveSection };
+export { de as UiAlert, fe as UiBadge, r as UiButton, K as UiCard, he as UiCheckbox, ue as UiCodeBlock, t as UiDialog, i as UiDrawer, be as UiField, $ as UiInput, Se as UiProgress, we as UiRadioCard, Te as UiRadioCardGroup, Ee as UiSelect, De as UiSlider, Oe as UiSurface, n as UiTabs, a as useActiveSection };