@filipgutica/ui 1.11.2 → 1.13.0

package/dist/index.js

@@ -1,66 +1,67 @@
 import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-DCS_wyYq.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 ee, renderList as x, renderSlot as S, resolveDynamicComponent as C, shallowRef as te, toDisplayString as w, unref as T, useId as E, useModel as ne, useSlots as D, watch as re, withCtx as O } from "vue";
-import { CheckboxIndicator as k, CheckboxRoot as A, Primitive as j, ProgressIndicator as M, ProgressRoot as N, RadioGroupItem as P, RadioGroupRoot as F, SliderRange as I, SliderRoot as L, SliderThumb as R, SliderTrack as z, Toggle as B } from "reka-ui";
+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 ee, renderList as x, renderSlot as S, resolveDynamicComponent as C, shallowRef as te, toDisplayString as w, unref as T, useAttrs as E, useId as D, useModel as O, useSlots as k, watch as ne, withCtx as A } from "vue";
+import { CheckboxIndicator as re, 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, Toggle as V } from "reka-ui";
 //#region src/components/UiCard.vue?vue&type=script&setup=true&lang.ts
-var V = { class: "fg-card" }, H = {
+var H = { class: "fg-card" }, U = {
 	key: 0,
 	class: "fg-card__header"
-}, U = {
+}, W = {
 	key: 1,
 	class: "fg-card__actions"
-}, W = {
+}, G = {
 	key: 1,
 	class: "fg-card__body"
-}, G = {
+}, K = {
 	key: 2,
 	class: "fg-card__footer"
-}, K = /* @__PURE__ */ m({
+}, q = /* @__PURE__ */ m({
 	__name: "UiCard",
 	props: {
 		title: { default: () => void 0 },
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = D();
-		return (n, r) => (y(), u("div", V, [
-			e.title || t.title || t.actions ? (y(), u("header", H, [e.title || t.title ? (y(), c(C(e.titleTag), {
+		let t = k();
+		return (n, r) => (y(), u("div", H, [
+			e.title || t.title || t.actions ? (y(), u("header", U, [e.title || t.title ? (y(), c(C(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: O(() => [S(n.$slots, "title", {}, () => [f(w(e.title), 1)])]),
+				default: A(() => [S(n.$slots, "title", {}, () => [f(w(e.title), 1)])]),
 				_: 3
-			})) : l("", !0), t.actions ? (y(), u("div", U, [S(n.$slots, "actions")])) : l("", !0)])) : l("", !0),
-			t.default ? (y(), u("div", W, [S(n.$slots, "default")])) : l("", !0),
-			t.footer ? (y(), u("footer", G, [S(n.$slots, "footer")])) : l("", !0)
+			})) : l("", !0), t.actions ? (y(), u("div", W, [S(n.$slots, "actions")])) : l("", !0)])) : l("", !0),
+			t.default ? (y(), u("div", G, [S(n.$slots, "default")])) : l("", !0),
+			t.footer ? (y(), u("footer", K, [S(n.$slots, "footer")])) : l("", !0)
 		]));
 	}
-}), q = [
+}), J = [
+	"data-command",
 	"data-wrap",
 	"data-line-numbers",
 	"data-variant"
-], J = {
+], Y = {
 	key: 0,
 	class: "fg-code-block__header"
-}, Y = {
+}, X = {
 	key: 0,
 	class: "fg-code-block__title"
-}, X = {
+}, ie = {
 	key: 1,
 	class: "fg-code-block__language"
-}, ie = { class: "fg-code-block__actions" }, ae = ["disabled", "title"], oe = {
+}, ae = { class: "fg-code-block__actions" }, oe = ["disabled", "title"], se = {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, se = {
+}, ce = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, ce = { key: 0 }, le = ["aria-label"], ue = {
+}, le = { key: 0 }, ue = ["aria-label"], de = {
 	key: 0,
 	class: "fg-code-block__number",
 	"aria-hidden": "true"
-}, de = { class: "fg-code-block__text" }, fe = ["data-state"], pe = /* @__PURE__ */ m({
+}, fe = { class: "fg-code-block__text" }, pe = ["data-state"], me = /* @__PURE__ */ m({
 	__name: "UiCodeBlock",
 	props: {
 		code: {},
@@ -81,7 +82,14 @@ var V = { class: "fg-card" }, H = {
 		variant: { default: "default" }
 	},
 	setup(t) {
-		let n = te(), r = ee(""), i = s(() => n.value ?? t.code.split("\n").map((e) => [{ content: e }])), a = {
+		let n = s(() => {
+			let e = t.language.trim().toLowerCase(), n = [
+				"bash",
+				"sh",
+				"shell"
+			].includes(e);
+			return t.variant === "compact" ? n || e === "text" : n && !t.title;
+		}), r = te(), i = ee(""), a = s(() => r.value ?? t.code.split("\n").map((e) => [{ content: e }])), c = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -94,104 +102,105 @@ var V = { class: "fg-card" }, H = {
 			sh: "bash",
 			shell: "bash"
 		};
-		re(() => [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;
+		ne(() => [t.code, t.language], async ([e, t], n, a) => {
+			let o = !1;
+			a(() => {
+				o = !0;
+			}), r.value = void 0, i.value = "";
+			let s = t.trim().toLowerCase(), l = Object.hasOwn(c, s) ? c[s] : void 0;
 			if (l) try {
 				let { highlightCode: t } = await import("./code-highlight-BuTmXL3w.js");
-				if (s) return;
-				let r = await t({
+				if (o) return;
+				let n = await t({
 					code: e,
 					language: l
 				});
-				if (s) return;
+				if (o) return;
 				let i = e.split("\n");
-				n.value = i.map((e, t) => {
-					let n = r[t] ?? [];
-					return e.endsWith("\r") ? [...n, { content: "\r" }] : n;
+				r.value = i.map((e, t) => {
+					let r = n[t] ?? [];
+					return e.endsWith("\r") ? [...r, { content: "\r" }] : r;
 				});
 			} catch {
-				s || (r.value = "Syntax highlighting unavailable. Showing plain text.");
+				o || (i.value = "Syntax highlighting unavailable. Showing plain text.");
 			}
 		}, { immediate: !0 });
-		let { copied: c, pending: p, error: m, copy: h } = e({
+		let { copied: p, pending: m, error: h, copy: g } = 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), C = () => h(t.code);
-		return (e, n) => (y(), u("div", {
+		}), _ = s(() => p.value && !h.value), b = s(() => t.variant === "compact" && _.value && !i.value), C = s(() => h.value ? h.value : t.variant === "compact" && i.value ? p.value ? `Code copied to clipboard. ${i.value}` : i.value : p.value ? "Code copied to clipboard." : i.value), E = () => g(t.code);
+		return (e, r) => (y(), u("div", {
 			class: "fg-code-block",
+			"data-command": n.value || void 0,
 			"data-wrap": t.wrap,
 			"data-line-numbers": t.lineNumbers,
 			"data-variant": t.variant
 		}, [
-			t.variant === "default" || t.copyable || e.$slots.actions ? (y(), u("div", J, [
-				t.variant === "default" ? (y(), u("span", Y, w(t.title || t.language), 1)) : l("", !0),
-				t.title && t.variant === "default" ? (y(), u("span", X, w(t.language), 1)) : l("", !0),
-				d("div", ie, [S(e.$slots, "actions"), t.copyable ? (y(), u("button", {
+			t.variant === "default" || t.copyable || e.$slots.actions ? (y(), u("div", Y, [
+				t.variant === "default" ? (y(), u("span", X, w(t.title || t.language), 1)) : l("", !0),
+				t.title && t.variant === "default" ? (y(), u("span", ie, w(t.language), 1)) : l("", !0),
+				d("div", ae, [S(e.$slots, "actions"), t.copyable ? (y(), u("button", {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
-					disabled: T(p),
+					disabled: T(m),
 					"aria-label": "Copy code",
-					title: t.variant === "compact" ? g.value ? "Copied" : "Copy code" : void 0,
-					onClick: C
-				}, [(y(), u("svg", oe, [t.variant === "compact" && g.value ? (y(), u("path", se)) : (y(), u(o, { key: 1 }, [n[0] ||= d("rect", {
+					title: t.variant === "compact" ? _.value ? "Copied" : "Copy code" : void 0,
+					onClick: E
+				}, [(y(), u("svg", se, [t.variant === "compact" && _.value ? (y(), u("path", ce)) : (y(), u(o, { key: 1 }, [r[0] ||= d("rect", {
 					x: "8",
 					y: "8",
 					width: "12",
 					height: "13",
 					rx: "2"
-				}, 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", ce, w(g.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, ae)) : l("", !0)])
+				}, null, -1), r[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", le, w(_.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, oe)) : l("", !0)])
 			])) : l("", !0),
 			d("pre", {
 				class: "fg-code-block__pre",
 				tabindex: "0",
 				"aria-label": t.title || `${t.language} code`
-			}, [d("code", null, [(y(!0), u(o, null, x(i.value, (e, n) => (y(), u("span", {
+			}, [d("code", null, [(y(!0), u(o, null, x(a.value, (e, n) => (y(), u("span", {
 				key: n,
 				class: "fg-code-block__line"
-			}, [t.lineNumbers ? (y(), u("span", ue, w(n + 1), 1)) : l("", !0), d("span", de, [(y(!0), u(o, null, x(e, (e, t) => (y(), u("span", {
+			}, [t.lineNumbers ? (y(), u("span", de, w(n + 1), 1)) : l("", !0), d("span", fe, [(y(!0), u(o, null, x(e, (e, t) => (y(), u("span", {
 				key: t,
 				style: v({ color: e.color })
-			}, w(e.content), 5))), 128)), f(w(n < i.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, le),
+			}, w(e.content), 5))), 128)), f(w(n < a.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, ue),
 			d("span", {
 				class: "fg-code-block__status",
 				role: "status",
-				"data-state": _.value ? "success" : void 0
-			}, w(b.value), 9, fe)
-		], 8, q));
+				"data-state": b.value ? "success" : void 0
+			}, w(C.value), 9, pe)
+		], 8, J));
 	}
-}), me = /* @__PURE__ */ m({
+}), he = /* @__PURE__ */ m({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, n) => (y(), c(T(j), {
+		return (t, n) => (y(), c(T(M), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
 			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: A(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), he = /* @__PURE__ */ m({
+}), ge = /* @__PURE__ */ m({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, n) => (y(), c(T(j), {
+		return (t, n) => (y(), c(T(M), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: A(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), ge = ["data-size", "data-disabled"], _e = { class: "fg-checkbox__label" }, ve = /* @__PURE__ */ m({
+}), _e = ["data-size", "data-disabled"], ve = { class: "fg-checkbox__label" }, ye = /* @__PURE__ */ m({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -213,20 +222,20 @@ var V = { class: "fg-card" }, H = {
 			class: "fg-checkbox",
 			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [p(T(A), {
+		}, [p(T(j), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: O(() => [p(T(k), { class: "fg-checkbox__indicator" }, {
-				default: O(() => [...n[0] ||= [f("✓", -1)]]),
+			default: A(() => [p(T(re), { class: "fg-checkbox__indicator" }, {
+				default: A(() => [...n[0] ||= [f("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), d("span", _e, [S(t.$slots, "default")])], 8, ge));
+		}, 8, ["disabled", "model-value"]), d("span", ve, [S(t.$slots, "default")])], 8, _e));
 	}
-}), Z = Symbol("UiFieldContext"), ye = ["data-invalid"], be = ["for"], xe = ["id"], Se = ["id"], Ce = /* @__PURE__ */ m({
+}), Z = Symbol("UiFieldContext"), be = ["data-invalid"], xe = ["for"], Se = ["id"], Ce = ["id"], we = /* @__PURE__ */ m({
 	__name: "UiField",
 	props: {
 		controlId: {},
@@ -248,7 +257,7 @@ var V = { class: "fg-card" }, H = {
 			d("label", {
 				class: "fg-field__label",
 				for: e.controlId
-			}, w(e.label), 9, be),
+			}, w(e.label), 9, xe),
 			S(r.$slots, "default", {
 				descriptionId: t.value,
 				errorId: n.value
@@ -258,40 +267,40 @@ var V = { class: "fg-card" }, H = {
 				id: t.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, w(e.description), 9, xe)) : l("", !0),
+			}, w(e.description), 9, Se)) : l("", !0),
 			e.error ? (y(), u("p", {
 				key: 1,
 				id: n.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, w(e.error), 9, Se)) : l("", !0)
-		], 8, ye));
+			}, w(e.error), 9, Ce)) : l("", !0)
+		], 8, be));
 	}
-}), we = { class: "fg-figure" }, Te = ["aria-labelledby", "aria-label"], Ee = ["id"], De = {
+}), Te = { class: "fg-figure" }, Ee = ["aria-labelledby", "aria-label"], De = ["id"], Oe = {
 	key: 0,
 	class: "fg-figure__number"
-}, Oe = /* @__PURE__ */ m({
+}, ke = /* @__PURE__ */ m({
 	__name: "UiFigure",
 	props: { number: { default: () => void 0 } },
 	setup(e) {
-		let t = D(), n = E(), r = () => e.number !== void 0 || !!t.caption;
-		return (t, i) => (y(), u("figure", we, [d("div", {
+		let t = k(), n = D(), r = () => e.number !== void 0 || !!t.caption;
+		return (t, i) => (y(), u("figure", Te, [d("div", {
 			class: "fg-figure__plate",
 			role: "region",
 			tabindex: "0",
 			"aria-labelledby": r() ? T(n) : void 0,
 			"aria-label": r() ? void 0 : "Figure"
-		}, [S(t.$slots, "default")], 8, Te), r() ? (y(), u("figcaption", {
+		}, [S(t.$slots, "default")], 8, Ee), r() ? (y(), u("figcaption", {
 			key: 0,
 			id: T(n),
 			class: "fg-figure__caption"
 		}, [
-			e.number === void 0 ? l("", !0) : (y(), u("span", De, "Figure " + w(e.number) + ".", 1)),
+			e.number === void 0 ? l("", !0) : (y(), u("span", Oe, "Figure " + w(e.number) + ".", 1)),
 			i[0] ||= f(),
 			S(t.$slots, "caption")
-		], 8, Ee)) : l("", !0)]));
+		], 8, De)) : l("", !0)]));
 	}
-}), ke = /* @__PURE__ */ m({
+}), Ae = /* @__PURE__ */ m({
 	__name: "UiInput",
 	props: {
 		disabled: {
@@ -312,7 +321,7 @@ var V = { class: "fg-card" }, H = {
 		let n = h(Z, void 0), r = t, i = (e) => {
 			e.currentTarget instanceof HTMLInputElement && r("update:modelValue", e.currentTarget.value);
 		};
-		return (t, r) => (y(), c(T(j), {
+		return (t, r) => (y(), c(T(M), {
 			id: T(n)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
@@ -335,7 +344,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), Ae = 100, je = /* @__PURE__ */ m({
+}), je = 100, Me = /* @__PURE__ */ m({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -344,19 +353,19 @@ var V = { class: "fg-card" }, H = {
 	},
 	setup(e) {
 		let t = s(() => {
-			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Ae;
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : je;
 			return {
 				max: t,
 				value: e.value === null || !Number.isFinite(e.value) ? null : Math.min(t, Math.max(0, e.value))
 			};
 		}), n = s(() => t.value.value === null ? 0 : t.value.value / t.value.max * 100);
-		return (r, i) => (y(), c(T(N), {
+		return (r, i) => (y(), c(T(P), {
 			class: "fg-progress",
 			"aria-label": e.label,
 			max: t.value.max,
 			"model-value": t.value.value
 		}, {
-			default: O(() => [p(T(M), {
+			default: A(() => [p(T(N), {
 				class: "fg-progress__indicator",
 				style: v({ transform: `translateX(-${100 - n.value}%)` })
 			}, null, 8, ["style"])]),
@@ -367,7 +376,7 @@ var V = { class: "fg-card" }, H = {
 			"model-value"
 		]));
 	}
-}), Me = { class: "fg-radio-card__content" }, Ne = /* @__PURE__ */ m({
+}), Ne = { class: "fg-radio-card__content" }, Pe = /* @__PURE__ */ m({
 	__name: "UiRadioCard",
 	props: {
 		disabled: {
@@ -377,19 +386,19 @@ var V = { class: "fg-card" }, H = {
 		value: {}
 	},
 	setup(e) {
-		return (t, n) => (y(), c(T(P), {
+		return (t, n) => (y(), c(T(F), {
 			class: "fg-radio-card",
 			disabled: e.disabled,
 			value: e.value
 		}, {
-			default: O(() => [n[0] ||= d("span", {
+			default: A(() => [n[0] ||= d("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
-			}, null, -1), d("span", Me, [S(t.$slots, "default")])]),
+			}, null, -1), d("span", Ne, [S(t.$slots, "default")])]),
 			_: 3
 		}, 8, ["disabled", "value"]));
 	}
-}), Pe = /* @__PURE__ */ m({
+}), Fe = /* @__PURE__ */ m({
 	__name: "UiRadioCardGroup",
 	props: /*@__PURE__*/ g({
 		disabled: {
@@ -407,7 +416,7 @@ var V = { class: "fg-card" }, H = {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = ne(e, "modelValue"), n = (t) => {
+		let t = O(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;
@@ -423,14 +432,14 @@ var V = { class: "fg-card" }, H = {
 			let d = o[u];
 			!d || d === r || (t.preventDefault(), d.focus(), d.click());
 		};
-		return (r, i) => (y(), c(T(F), _({
+		return (r, i) => (y(), c(T(I), _({
 			modelValue: t.value,
 			"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: n }), {
-			default: O(() => [S(r.$slots, "default")]),
+			default: A(() => [S(r.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -438,30 +447,30 @@ var V = { class: "fg-card" }, H = {
 			"loop"
 		]));
 	}
-}), Fe = { class: "fg-score" }, Q = {
+}), Ie = { class: "fg-score" }, Le = {
 	class: "fg-score__pips",
 	"aria-hidden": "true"
-}, Ie = ["data-filled"], Le = { class: "fg-score__value" }, Re = { class: "fg-score__max" }, $ = 3, ze = /* @__PURE__ */ m({
+}, Re = ["data-filled"], ze = { class: "fg-score__value" }, Be = { class: "fg-score__max" }, Q = 3, Ve = /* @__PURE__ */ m({
 	__name: "UiScore",
 	props: {
-		max: { default: () => $ },
+		max: { default: () => Q },
 		score: {}
 	},
 	setup(e) {
 		let t = s(() => {
-			let t = Number.isInteger(e.max) && e.max > 0 ? e.max : $;
+			let t = Number.isInteger(e.max) && e.max > 0 ? e.max : Q;
 			return {
 				max: t,
 				score: Number.isFinite(e.score) ? Math.min(t, Math.max(0, e.score)) : 0
 			};
 		});
-		return (e, n) => (y(), u("span", Fe, [d("span", Q, [(y(!0), u(o, null, x(t.value.max, (e) => (y(), u("span", {
+		return (e, n) => (y(), u("span", Ie, [d("span", Le, [(y(!0), u(o, null, x(t.value.max, (e) => (y(), u("span", {
 			key: e,
 			class: "fg-score__pip",
 			"data-filled": e <= t.value.score ? "true" : void 0
-		}, null, 8, Ie))), 128))]), d("span", Le, [f(w(t.value.score), 1), d("span", Re, "/" + w(t.value.max), 1)])]));
+		}, null, 8, Re))), 128))]), d("span", ze, [f(w(t.value.score), 1), d("span", Be, "/" + w(t.value.max), 1)])]));
 	}
-}), Be = /* @__PURE__ */ m({
+}), $ = /* @__PURE__ */ m({
 	__name: "UiSelect",
 	props: {
 		disabled: {
@@ -481,7 +490,7 @@ var V = { class: "fg-card" }, H = {
 		let n = h(Z, void 0), r = t, i = (e) => {
 			e.currentTarget instanceof HTMLSelectElement && r("update:modelValue", e.currentTarget.value);
 		};
-		return (t, r) => (y(), c(T(j), {
+		return (t, r) => (y(), c(T(M), {
 			id: T(n)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
@@ -493,7 +502,7 @@ var V = { class: "fg-card" }, H = {
 			value: e.modelValue,
 			onChange: i
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: A(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -505,7 +514,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), Ve = /* @__PURE__ */ m({
+}), He = /* @__PURE__ */ m({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -538,7 +547,7 @@ var V = { class: "fg-card" }, H = {
 				e !== void 0 && i("update:modelValue", e);
 			}
 		});
-		return (t, i) => (y(), c(T(L), {
+		return (t, i) => (y(), c(T(R), {
 			modelValue: a.value,
 			"onUpdate:modelValue": i[0] ||= (e) => a.value = e,
 			class: "fg-slider",
@@ -548,10 +557,10 @@ var V = { class: "fg-card" }, H = {
 			min: r.value.min,
 			step: r.value.step
 		}, {
-			default: O(() => [p(T(z), { class: "fg-slider__track" }, {
-				default: O(() => [p(T(I), { class: "fg-slider__range" })]),
+			default: A(() => [p(T(B), { class: "fg-slider__track" }, {
+				default: A(() => [p(T(L), { class: "fg-slider__range" })]),
 				_: 1
-			}), p(T(R), {
+			}), p(T(z), {
 				id: T(n)?.controlId.value ?? e.id,
 				class: "fg-slider__thumb",
 				"aria-describedby": T(n)?.descriptionId.value,
@@ -575,10 +584,73 @@ var V = { class: "fg-card" }, H = {
 			"step"
 		]));
 	}
-}), He = { class: "fg-toggle-button__text" }, Ue = { class: "fg-toggle-button__label" }, We = {
+}), Ue = ["data-size", "data-disabled"], We = [
+	"id",
+	"aria-checked",
+	"aria-describedby",
+	"aria-errormessage",
+	"aria-invalid",
+	"disabled"
+], Ge = {
+	key: 0,
+	class: "fg-switch__text"
+}, Ke = ["for"], qe = ["id"], Je = /* @__PURE__ */ m({
+	inheritAttrs: !1,
+	__name: "UiSwitch",
+	props: {
+		description: { default: () => void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		id: { default: () => void 0 },
+		label: { default: () => void 0 },
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, r = k(), i = E(), a = h(Z, void 0), o = D(), c = s(() => a?.controlId.value ?? e.id ?? o), p = s(() => `${c.value}-switch-description`), m = () => [
+			i["aria-describedby"],
+			a?.descriptionId.value,
+			e.description ? p.value : void 0
+		].filter(Boolean).join(" ") || void 0, g = () => {
+			e.disabled || n("update:modelValue", !e.modelValue);
+		};
+		return (t, n) => (y(), u("div", {
+			class: "fg-switch",
+			"data-size": e.size,
+			"data-disabled": e.disabled ? "true" : void 0
+		}, [d("button", _(T(i), {
+			id: c.value,
+			class: "fg-switch__control",
+			type: "button",
+			role: "switch",
+			"aria-checked": e.modelValue,
+			"aria-describedby": m(),
+			"aria-errormessage": T(a)?.errorId.value,
+			"aria-invalid": T(a)?.invalid.value ? "true" : void 0,
+			disabled: e.disabled,
+			onClick: g
+		}), [...n[0] ||= [d("span", {
+			class: "fg-switch__track",
+			"aria-hidden": "true"
+		}, null, -1)]], 16, We), r.default || e.label || e.description ? (y(), u("span", Ge, [r.default || e.label ? (y(), u("label", {
+			key: 0,
+			for: c.value
+		}, [S(t.$slots, "default", {}, () => [f(w(e.label), 1)])], 8, Ke)) : l("", !0), e.description ? (y(), u("span", {
+			key: 1,
+			id: p.value,
+			class: "fg-switch__description"
+		}, w(e.description), 9, qe)) : l("", !0)])) : l("", !0)], 8, Ue));
+	}
+}), Ye = { class: "fg-toggle-button__text" }, Xe = { class: "fg-toggle-button__label" }, Ze = {
 	key: 0,
 	class: "fg-toggle-button__description"
-}, Ge = /* @__PURE__ */ m({
+}, Qe = /* @__PURE__ */ m({
 	__name: "UiToggleButton",
 	props: {
 		disabled: {
@@ -593,20 +665,20 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:pressed"],
 	setup(e, { emit: t }) {
-		let n = t, r = D(), i = (e) => {
+		let n = t, r = k(), i = (e) => {
 			n("update:pressed", e);
 		};
-		return (t, n) => (y(), c(T(B), {
+		return (t, n) => (y(), c(T(V), {
 			class: "fg-toggle-button",
 			"data-size": e.size,
 			disabled: e.disabled,
 			"model-value": e.pressed,
 			"onUpdate:modelValue": i
 		}, {
-			default: O(() => [n[0] ||= d("span", {
+			default: A(() => [n[0] ||= d("span", {
 				class: "fg-toggle-button__switch",
 				"aria-hidden": "true"
-			}, null, -1), d("span", He, [d("span", Ue, [S(t.$slots, "default")]), r.description ? (y(), u("span", We, [S(t.$slots, "description")])) : l("", !0)])]),
+			}, null, -1), d("span", Ye, [d("span", Xe, [S(t.$slots, "default")]), r.description ? (y(), u("span", Ze, [S(t.$slots, "description")])) : l("", !0)])]),
 			_: 3
 		}, 8, [
 			"data-size",
@@ -614,22 +686,22 @@ var V = { class: "fg-card" }, H = {
 			"model-value"
 		]));
 	}
-}), Ke = /* @__PURE__ */ m({
+}), $e = /* @__PURE__ */ m({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (t, n) => (y(), c(T(j), {
+		return (t, n) => (y(), c(T(M), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: A(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
 });
 //#endregion
-export { me as UiAlert, he as UiBadge, r as UiButton, K as UiCard, ve as UiCheckbox, pe as UiCodeBlock, t as UiDialog, i as UiDrawer, Ce as UiField, Oe as UiFigure, ke as UiInput, je as UiProgress, Ne as UiRadioCard, Pe as UiRadioCardGroup, ze as UiScore, Be as UiSelect, Ve as UiSlider, Ke as UiSurface, n as UiTabs, Ge as UiToggleButton, a as useActiveSection };
+export { he as UiAlert, ge as UiBadge, r as UiButton, q as UiCard, ye as UiCheckbox, me as UiCodeBlock, t as UiDialog, i as UiDrawer, we as UiField, ke as UiFigure, Ae as UiInput, Me as UiProgress, Pe as UiRadioCard, Fe as UiRadioCardGroup, Ve as UiScore, $ as UiSelect, He as UiSlider, $e as UiSurface, Je as UiSwitch, n as UiTabs, Qe as UiToggleButton, a as useActiveSection };