@filipgutica/ui 1.12.0 → 1.13.1

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

@@ -0,0 +1,25 @@
+import type { UiControlSize } from '../control.js';
+export interface UiSwitchProps {
+    description?: string;
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+    modelValue?: boolean;
+    size?: UiControlSize;
+}
+type __VLS_Slots = {
+    default?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<UiSwitchProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as UiSlider } from './components/UiSlider.vue';
 export type { UiSliderProps } from './components/UiSlider.vue';
 export { default as UiTabs } from './components/UiTabs.vue';
 export type { UiTabItem, UiTabsProps } from './components/UiTabs.vue';
+export { default as UiSwitch } from './components/UiSwitch.vue';
+export type { UiSwitchProps } from './components/UiSwitch.vue';
 export { default as UiToggleButton } from './components/UiToggleButton.vue';
 export type { UiToggleButtonProps } from './components/UiToggleButton.vue';
 /** @deprecated Use UiCard for structured content. */

package/dist/index.js

@@ -1,67 +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 D, useSlots as O, watch as ne, withCtx as k } from "vue";
-import { CheckboxIndicator as re, 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 = O();
-		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: k(() => [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: {},
@@ -136,10 +136,10 @@ var V = { class: "fg-card" }, H = {
 			"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",
@@ -147,13 +147,13 @@ var V = { class: "fg-card" }, H = {
 					"aria-label": "Copy code",
 					title: t.variant === "compact" ? _.value ? "Copied" : "Copy code" : void 0,
 					onClick: E
-				}, [(y(), u("svg", oe, [t.variant === "compact" && _.value ? (y(), u("path", se)) : (y(), u(o, { key: 1 }, [r[0] ||= d("rect", {
+				}, [(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), 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", ce, w(_.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",
@@ -162,45 +162,45 @@ var V = { class: "fg-card" }, H = {
 			}, [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 < a.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": b.value ? "success" : void 0
-			}, w(C.value), 9, fe)
-		], 8, q));
+			}, 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: k(() => [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: k(() => [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: {
@@ -222,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: k(() => [p(T(re), { class: "fg-checkbox__indicator" }, {
-				default: k(() => [...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: {},
@@ -257,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
@@ -267,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 = O(), 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: {
@@ -321,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",
@@ -344,7 +344,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), Ae = 100, je = /* @__PURE__ */ m({
+}), je = 100, Me = /* @__PURE__ */ m({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -353,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: k(() => [p(T(M), {
+			default: A(() => [p(T(N), {
 				class: "fg-progress__indicator",
 				style: v({ transform: `translateX(-${100 - n.value}%)` })
 			}, null, 8, ["style"])]),
@@ -376,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: {
@@ -386,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: k(() => [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: {
@@ -416,7 +416,7 @@ var V = { class: "fg-card" }, H = {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = D(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;
@@ -432,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: k(() => [S(r.$slots, "default")]),
+			default: A(() => [S(r.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -447,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: {
@@ -490,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",
@@ -502,7 +502,7 @@ var V = { class: "fg-card" }, H = {
 			value: e.modelValue,
 			onChange: i
 		}, {
-			default: k(() => [S(t.$slots, "default")]),
+			default: A(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -514,7 +514,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), Ve = /* @__PURE__ */ m({
+}), He = /* @__PURE__ */ m({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -547,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",
@@ -557,10 +557,10 @@ var V = { class: "fg-card" }, H = {
 			min: r.value.min,
 			step: r.value.step
 		}, {
-			default: k(() => [p(T(z), { class: "fg-slider__track" }, {
-				default: k(() => [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,
@@ -584,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: {
@@ -602,20 +665,20 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:pressed"],
 	setup(e, { emit: t }) {
-		let n = t, r = O(), 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: k(() => [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",
@@ -623,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: k(() => [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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [

package/src/components.css

@@ -5,7 +5,7 @@
   /* Package-owned typography keeps controls consistent across consuming apps. */
   .fg-button, .fg-input, .fg-select, .fg-checkbox, .fg-field,
   .fg-radio-card, .fg-badge, .fg-alert, .fg-surface, .fg-card,
-  .fg-dialog__content, .fg-code-block, .fg-toggle-button {
+  .fg-dialog__content, .fg-code-block, .fg-toggle-button, .fg-switch {
     font-family: var(--font-ui);
     font-size: var(--text-md);
     font-weight: var(--weight-regular);
@@ -171,6 +171,7 @@
   .fg-input:disabled,
   .fg-select:disabled,
   .fg-checkbox[data-disabled="true"],
+  .fg-switch[data-disabled="true"],
   .fg-toggle-button:disabled {
     cursor: not-allowed;
     opacity: 0.58;
@@ -717,8 +718,35 @@
   .fg-toggle-button:hover:not(:disabled, [aria-pressed="true"]) { border-color: var(--color-border); }
   .fg-toggle-button[aria-pressed="true"] { border-color: var(--color-accent); }
 
-  /* The thumb's position, not only its color, shows the state. */
-  .fg-toggle-button__switch {
+  .fg-switch { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
+  .fg-switch__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    min-width: var(--control-sm);
+    min-height: var(--control-md);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+  .fg-switch[data-size="sm"] { font-size: var(--text-sm); }
+  .fg-switch[data-size="sm"] .fg-switch__control { min-height: var(--control-sm); }
+  .fg-switch[data-size="lg"] { font-size: var(--text-lg); }
+  .fg-switch[data-size="lg"] .fg-switch__control { min-height: var(--control-lg); }
+  /* The visible track scales with size; the thumb travels the track width minus its height. */
+  .fg-switch { --fg-switch-width: 2.25rem; --fg-switch-height: 1.25rem; }
+  .fg-switch[data-size="sm"] { --fg-switch-width: 1.75rem; --fg-switch-height: 1rem; }
+  .fg-switch[data-size="lg"] { --fg-switch-width: 2.75rem; --fg-switch-height: 1.5rem; }
+  .fg-switch__text { display: grid; min-width: 0; overflow-wrap: anywhere; }
+  .fg-switch__text label { cursor: pointer; }
+  .fg-switch[data-disabled="true"] :is(button, label) { cursor: not-allowed; }
+  .fg-switch__description { color: var(--color-muted); font-size: var(--text-sm); }
+
+  /* Both toggle controls share the track; thumb position also shows the state. */
+  .fg-toggle-button__switch,
+  .fg-switch__track {
     position: relative;
     flex: none;
     width: 1.75rem;
@@ -729,7 +757,8 @@
     transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
   }
 
-  .fg-toggle-button__switch::after {
+  .fg-toggle-button__switch::after,
+  .fg-switch__track::after {
     position: absolute;
     top: 0.125rem;
     left: 0.125rem;
@@ -741,16 +770,24 @@
     transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
   }
 
-  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch {
+  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch,
+  .fg-switch__control[aria-checked="true"] .fg-switch__track {
     border-color: var(--color-accent);
     background: var(--color-accent);
   }
 
-  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch::after {
+  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch::after,
+  .fg-switch__control[aria-checked="true"] .fg-switch__track::after {
     background: var(--color-accent-text);
     transform: translateX(0.75rem);
   }
 
+  .fg-switch__track { box-sizing: border-box; width: var(--fg-switch-width); height: var(--fg-switch-height); }
+  .fg-switch__track::after { width: calc(var(--fg-switch-height) - 0.375rem); height: calc(var(--fg-switch-height) - 0.375rem); }
+  .fg-switch__control[aria-checked="true"] .fg-switch__track::after {
+    transform: translateX(calc(var(--fg-switch-width) - var(--fg-switch-height)));
+  }
+
   .fg-toggle-button__text { display: grid; min-width: 0; }
 
   .fg-toggle-button__description {
@@ -902,11 +939,15 @@
   .fg-slider__thumb:focus-visible,
   .fg-dialog__close:focus-visible,
   .fg-dialog__content:focus-visible,
-  .fg-toggle-button:focus-visible {
+  .fg-toggle-button:focus-visible,
+  .fg-switch__control:focus-visible .fg-switch__track {
     outline: 2px solid var(--color-focus);
     outline-offset: 2px;
   }
 
+  /* The control is a larger transparent hit area, so the ring follows the visible track instead. */
+  .fg-switch__control:focus-visible { outline: none; }
+
   :root.high-contrast .fg-button,
   :root.high-contrast .fg-input,
   :root.high-contrast .fg-select,
@@ -934,6 +975,13 @@
     }
   }
 
+  @media (forced-colors: active) {
+    .fg-switch__track { border-color: ButtonText; background: Canvas; }
+    .fg-switch__track::after { background: ButtonText; }
+    .fg-switch__control[aria-checked="true"] .fg-switch__track { border-color: Highlight; background: Highlight; forced-color-adjust: none; }
+    .fg-switch__control[aria-checked="true"] .fg-switch__track::after { background: HighlightText; }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .fg-button,
     .fg-input,
@@ -943,7 +991,9 @@
     .fg-dialog__close,
     .fg-progress__indicator,
     .fg-toggle-button__switch,
-    .fg-toggle-button__switch::after { transition: none; }
+    .fg-toggle-button__switch::after,
+    .fg-switch__track,
+    .fg-switch__track::after { transition: none; }
 
     .fg-button[aria-busy="true"]::before { animation-duration: 1.4s; }
   }

package/src/site.css

@@ -554,8 +554,10 @@
     font-size: var(--text-sm);
   }
   .fg-site-facts { font-family: var(--font-mono); }
-  .fg-site-facts > div { display: flex; gap: var(--space-2); }
-  .fg-site-facts dd { margin: 0; color: var(--color-text); }
+  /* A label and a long value, such as a repository path, wrap at large text sizes instead of
+   * widening the page. */
+  .fg-site-facts > div { display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
+  .fg-site-facts dd { min-width: 0; margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
   .fg-site-definitions {
     display: grid;
     grid-template-columns: 9rem minmax(0, 1fr);
@@ -718,7 +720,7 @@
      * moves a full target below the one before it, so their targets never overlap. */
     .fg-site-facts { row-gap: var(--space-2); }
     .fg-site-facts > div:has(a) ~ div:has(a) { margin-top: calc(var(--control-lg) - 1lh - var(--space-2)); }
-    .fg-site-facts a { position: relative; display: inline-block; }
+    .fg-site-facts a { position: relative; display: inline-block; max-width: 100%; }
     .fg-site-facts a::after {
       content: '';
       position: absolute;