@filipgutica/ui 1.7.0 → 1.8.0

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

@@ -0,0 +1,16 @@
+export interface UiFigureProps {
+    number?: number;
+}
+type __VLS_Slots = {
+    caption?(): unknown;
+    default?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiFigureProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiFigureProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,7 @@
+export interface UiScoreProps {
+    max?: number;
+    score: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<UiScoreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiScoreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+import type { UiControlSize } from '../control.js';
+export interface UiToggleButtonProps {
+    disabled?: boolean;
+    pressed?: boolean;
+    size?: UiControlSize;
+}
+type __VLS_Slots = {
+    default?(): unknown;
+    description?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiToggleButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:pressed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<UiToggleButtonProps> & Readonly<{
+    "onUpdate:pressed"?: (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

@@ -16,6 +16,8 @@ export { default as UiDrawer } from './components/UiDrawer.vue';
 export type { UiDrawerProps } from './components/UiDrawer.vue';
 export { default as UiField } from './components/UiField.vue';
 export type { UiFieldProps } from './components/UiField.vue';
+export { default as UiFigure } from './components/UiFigure.vue';
+export type { UiFigureProps } from './components/UiFigure.vue';
 export { default as UiInput } from './components/UiInput.vue';
 export type { UiInputProps } from './components/UiInput.vue';
 export { default as UiProgress } from './components/UiProgress.vue';
@@ -24,12 +26,16 @@ export { default as UiRadioCard } from './components/UiRadioCard.vue';
 export type { UiRadioCardProps } from './components/UiRadioCard.vue';
 export { default as UiRadioCardGroup } from './components/UiRadioCardGroup.vue';
 export type { UiRadioCardGroupProps } from './components/UiRadioCardGroup.vue';
+export { default as UiScore } from './components/UiScore.vue';
+export type { UiScoreProps } from './components/UiScore.vue';
 export { default as UiSelect } from './components/UiSelect.vue';
 export type { UiSelectProps } from './components/UiSelect.vue';
 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 UiToggleButton } from './components/UiToggleButton.vue';
+export type { UiToggleButtonProps } from './components/UiToggleButton.vue';
 /** @deprecated Use UiCard for structured content. */
 export { default as UiSurface } from './components/UiSurface.vue';
 export type { UiSurfaceProps } from './components/UiSurface.vue';

package/dist/index.js

@@ -1,6 +1,6 @@
 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";
+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";
 //#region src/components/UiCard.vue?vue&type=script&setup=true&lang.ts
 var V = { class: "fg-card" }, H = {
 	key: 0,
@@ -21,17 +21,17 @@ var V = { class: "fg-card" }, H = {
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = te();
+		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(w(e.titleTag), {
+			e.title || t.title || t.actions ? (y(), u("header", H, [e.title || t.title ? (y(), c(C(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: k(() => [C(n.$slots, "title", {}, () => [f(E(e.title), 1)])]),
+				default: O(() => [S(n.$slots, "title", {}, () => [f(w(e.title), 1)])]),
 				_: 3
-			})) : 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)
+			})) : 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)
 		]));
 	}
 }), q = [
@@ -47,20 +47,20 @@ var V = { class: "fg-card" }, H = {
 }, X = {
 	key: 1,
 	class: "fg-code-block__language"
-}, Z = { class: "fg-code-block__actions" }, ne = ["disabled", "title"], re = {
+}, ie = { class: "fg-code-block__actions" }, ae = ["disabled", "title"], oe = {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, ie = {
+}, se = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, ae = { key: 0 }, oe = ["aria-label"], se = {
+}, ce = { key: 0 }, le = ["aria-label"], ue = {
 	key: 0,
 	class: "fg-code-block__number",
 	"aria-hidden": "true"
-}, ce = { class: "fg-code-block__text" }, le = ["data-state"], ue = /* @__PURE__ */ m({
+}, de = { class: "fg-code-block__text" }, fe = ["data-state"], pe = /* @__PURE__ */ m({
 	__name: "UiCodeBlock",
 	props: {
 		code: {},
@@ -81,7 +81,7 @@ var V = { class: "fg-card" }, H = {
 		variant: { default: "default" }
 	},
 	setup(t) {
-		let n = T(), r = x(""), i = s(() => n.value ?? t.code.split("\n").map((e) => [{ content: e }])), a = {
+		let n = te(), r = ee(""), i = s(() => n.value ?? t.code.split("\n").map((e) => [{ content: e }])), a = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -94,7 +94,7 @@ var V = { class: "fg-card" }, H = {
 			sh: "bash",
 			shell: "bash"
 		};
-		O(() => [t.code, t.language], async ([e, t], i, o) => {
+		re(() => [t.code, t.language], async ([e, t], i, o) => {
 			let s = !1;
 			o(() => {
 				s = !0;
@@ -120,7 +120,7 @@ var V = { class: "fg-card" }, H = {
 		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);
+		}), 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", {
 			class: "fg-code-block",
 			"data-wrap": t.wrap,
@@ -128,70 +128,70 @@ var V = { class: "fg-card" }, H = {
 			"data-variant": t.variant
 		}, [
 			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", {
+				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", {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
-					disabled: D(p),
+					disabled: T(p),
 					"aria-label": "Copy code",
 					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", {
+					onClick: C
+				}, [(y(), u("svg", oe, [t.variant === "compact" && g.value ? (y(), u("path", se)) : (y(), u(o, { key: 1 }, [n[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", ae, E(g.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, ne)) : l("", !0)])
+				}, 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)])
 			])) : 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, S(i.value, (e, n) => (y(), u("span", {
+			}, [d("code", null, [(y(!0), u(o, null, x(i.value, (e, n) => (y(), u("span", {
 				key: n,
 				class: "fg-code-block__line"
-			}, [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", {
+			}, [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", {
 				key: t,
 				style: v({ color: e.color })
-			}, E(e.content), 5))), 128)), f(E(n < i.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, oe),
+			}, w(e.content), 5))), 128)), f(w(n < i.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, le),
 			d("span", {
 				class: "fg-code-block__status",
 				role: "status",
 				"data-state": _.value ? "success" : void 0
-			}, E(b.value), 9, le)
+			}, w(b.value), 9, fe)
 		], 8, q));
 	}
-}), de = /* @__PURE__ */ m({
+}), me = /* @__PURE__ */ m({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, n) => (y(), c(D(M), {
+		return (t, n) => (y(), c(T(j), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
 			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), fe = /* @__PURE__ */ m({
+}), he = /* @__PURE__ */ m({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, n) => (y(), c(D(M), {
+		return (t, n) => (y(), c(T(j), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), pe = ["data-size", "data-disabled"], me = { class: "fg-checkbox__label" }, he = /* @__PURE__ */ m({
+}), ge = ["data-size", "data-disabled"], _e = { class: "fg-checkbox__label" }, ve = /* @__PURE__ */ m({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -213,20 +213,20 @@ var V = { class: "fg-card" }, H = {
 			class: "fg-checkbox",
 			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [p(D(j), {
+		}, [p(T(A), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: k(() => [p(D(A), { class: "fg-checkbox__indicator" }, {
-				default: k(() => [...n[0] ||= [f("✓", -1)]]),
+			default: O(() => [p(T(k), { class: "fg-checkbox__indicator" }, {
+				default: O(() => [...n[0] ||= [f("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), d("span", me, [C(t.$slots, "default")])], 8, pe));
+		}, 8, ["disabled", "model-value"]), d("span", _e, [S(t.$slots, "default")])], 8, ge));
 	}
-}), Q = Symbol("UiFieldContext"), ge = ["data-invalid"], _e = ["for"], ve = ["id"], ye = ["id"], be = /* @__PURE__ */ m({
+}), Z = Symbol("UiFieldContext"), ye = ["data-invalid"], be = ["for"], xe = ["id"], Se = ["id"], Ce = /* @__PURE__ */ m({
 	__name: "UiField",
 	props: {
 		controlId: {},
@@ -236,7 +236,7 @@ var V = { class: "fg-card" }, H = {
 	},
 	setup(e) {
 		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, {
+		return b(Z, {
 			controlId: s(() => e.controlId),
 			descriptionId: t,
 			errorId: n,
@@ -248,8 +248,8 @@ var V = { class: "fg-card" }, H = {
 			d("label", {
 				class: "fg-field__label",
 				for: e.controlId
-			}, E(e.label), 9, _e),
-			C(r.$slots, "default", {
+			}, w(e.label), 9, be),
+			S(r.$slots, "default", {
 				descriptionId: t.value,
 				errorId: n.value
 			}),
@@ -258,16 +258,40 @@ var V = { class: "fg-card" }, H = {
 				id: t.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, E(e.description), 9, ve)) : l("", !0),
+			}, w(e.description), 9, xe)) : l("", !0),
 			e.error ? (y(), u("p", {
 				key: 1,
 				id: n.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, E(e.error), 9, ye)) : l("", !0)
-		], 8, ge));
+			}, w(e.error), 9, Se)) : l("", !0)
+		], 8, ye));
 	}
-}), $ = /* @__PURE__ */ m({
+}), we = { class: "fg-figure" }, Te = ["aria-labelledby", "aria-label"], Ee = ["id"], De = {
+	key: 0,
+	class: "fg-figure__number"
+}, Oe = /* @__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", {
+			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", {
+			key: 0,
+			id: T(n),
+			class: "fg-figure__caption"
+		}, [
+			e.number === void 0 ? l("", !0) : (y(), u("span", De, "Figure " + w(e.number) + ".", 1)),
+			i[0] ||= f(),
+			S(t.$slots, "caption")
+		], 8, Ee)) : l("", !0)]));
+	}
+}), ke = /* @__PURE__ */ m({
 	__name: "UiInput",
 	props: {
 		disabled: {
@@ -285,16 +309,16 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = h(Q, void 0), r = t, i = (e) => {
+		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(D(M), {
-			id: D(n)?.controlId.value ?? e.id,
+		return (t, r) => (y(), c(T(j), {
+			id: T(n)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
-			"aria-describedby": D(n)?.descriptionId.value,
-			"aria-errormessage": D(n)?.errorId.value,
-			"aria-invalid": e.invalid || D(n)?.invalid.value ? "true" : void 0,
+			"aria-describedby": T(n)?.descriptionId.value,
+			"aria-errormessage": T(n)?.errorId.value,
+			"aria-invalid": e.invalid || T(n)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			type: e.type,
@@ -311,7 +335,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), xe = 100, Se = /* @__PURE__ */ m({
+}), Ae = 100, je = /* @__PURE__ */ m({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -320,19 +344,19 @@ var V = { class: "fg-card" }, H = {
 	},
 	setup(e) {
 		let t = s(() => {
-			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : xe;
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Ae;
 			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(D(P), {
+		return (r, i) => (y(), c(T(N), {
 			class: "fg-progress",
 			"aria-label": e.label,
 			max: t.value.max,
 			"model-value": t.value.value
 		}, {
-			default: k(() => [p(D(N), {
+			default: O(() => [p(T(M), {
 				class: "fg-progress__indicator",
 				style: v({ transform: `translateX(-${100 - n.value}%)` })
 			}, null, 8, ["style"])]),
@@ -343,7 +367,7 @@ var V = { class: "fg-card" }, H = {
 			"model-value"
 		]));
 	}
-}), Ce = { class: "fg-radio-card__content" }, we = /* @__PURE__ */ m({
+}), Me = { class: "fg-radio-card__content" }, Ne = /* @__PURE__ */ m({
 	__name: "UiRadioCard",
 	props: {
 		disabled: {
@@ -353,19 +377,19 @@ var V = { class: "fg-card" }, H = {
 		value: {}
 	},
 	setup(e) {
-		return (t, n) => (y(), c(D(F), {
+		return (t, n) => (y(), c(T(P), {
 			class: "fg-radio-card",
 			disabled: e.disabled,
 			value: e.value
 		}, {
-			default: k(() => [n[0] ||= d("span", {
+			default: O(() => [n[0] ||= d("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
-			}, null, -1), d("span", Ce, [C(t.$slots, "default")])]),
+			}, null, -1), d("span", Me, [S(t.$slots, "default")])]),
 			_: 3
 		}, 8, ["disabled", "value"]));
 	}
-}), Te = /* @__PURE__ */ m({
+}), Pe = /* @__PURE__ */ m({
 	__name: "UiRadioCardGroup",
 	props: /*@__PURE__*/ g({
 		disabled: {
@@ -383,7 +407,7 @@ var V = { class: "fg-card" }, H = {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = ee(e, "modelValue"), n = (t) => {
+		let t = ne(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;
@@ -399,14 +423,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(D(I), _({
+		return (r, i) => (y(), c(T(F), _({
 			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(() => [C(r.$slots, "default")]),
+			default: O(() => [S(r.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -414,7 +438,30 @@ var V = { class: "fg-card" }, H = {
 			"loop"
 		]));
 	}
-}), Ee = /* @__PURE__ */ m({
+}), Fe = { class: "fg-score" }, Q = {
+	class: "fg-score__pips",
+	"aria-hidden": "true"
+}, Ie = ["data-filled"], Le = { class: "fg-score__value" }, Re = { class: "fg-score__max" }, $ = 3, ze = /* @__PURE__ */ m({
+	__name: "UiScore",
+	props: {
+		max: { default: () => $ },
+		score: {}
+	},
+	setup(e) {
+		let t = s(() => {
+			let t = Number.isInteger(e.max) && e.max > 0 ? e.max : $;
+			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", {
+			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)])]));
+	}
+}), Be = /* @__PURE__ */ m({
 	__name: "UiSelect",
 	props: {
 		disabled: {
@@ -431,22 +478,22 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = h(Q, void 0), r = t, i = (e) => {
+		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(D(M), {
-			id: D(n)?.controlId.value ?? e.id,
+		return (t, r) => (y(), c(T(j), {
+			id: T(n)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
-			"aria-describedby": D(n)?.descriptionId.value,
-			"aria-errormessage": D(n)?.errorId.value,
-			"aria-invalid": e.invalid || D(n)?.invalid.value ? "true" : void 0,
+			"aria-describedby": T(n)?.descriptionId.value,
+			"aria-errormessage": T(n)?.errorId.value,
+			"aria-invalid": e.invalid || T(n)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			value: e.modelValue,
 			onChange: i
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -458,7 +505,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), De = /* @__PURE__ */ m({
+}), Ve = /* @__PURE__ */ m({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -475,7 +522,7 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = h(Q, void 0), r = s(() => {
+		let n = h(Z, 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,
@@ -491,7 +538,7 @@ var V = { class: "fg-card" }, H = {
 				e !== void 0 && i("update:modelValue", e);
 			}
 		});
-		return (t, i) => (y(), c(D(R), {
+		return (t, i) => (y(), c(T(L), {
 			modelValue: a.value,
 			"onUpdate:modelValue": i[0] ||= (e) => a.value = e,
 			class: "fg-slider",
@@ -501,15 +548,15 @@ var V = { class: "fg-card" }, H = {
 			min: r.value.min,
 			step: r.value.step
 		}, {
-			default: k(() => [p(D(B), { class: "fg-slider__track" }, {
-				default: k(() => [p(D(L), { class: "fg-slider__range" })]),
+			default: O(() => [p(T(z), { class: "fg-slider__track" }, {
+				default: O(() => [p(T(I), { class: "fg-slider__range" })]),
 				_: 1
-			}), p(D(z), {
-				id: D(n)?.controlId.value ?? e.id,
+			}), p(T(R), {
+				id: T(n)?.controlId.value ?? e.id,
 				class: "fg-slider__thumb",
-				"aria-describedby": D(n)?.descriptionId.value,
-				"aria-errormessage": D(n)?.errorId.value,
-				"aria-invalid": D(n)?.invalid.value ? "true" : void 0,
+				"aria-describedby": T(n)?.descriptionId.value,
+				"aria-errormessage": T(n)?.errorId.value,
+				"aria-invalid": T(n)?.invalid.value ? "true" : void 0,
 				"aria-label": e.label
 			}, null, 8, [
 				"id",
@@ -528,22 +575,61 @@ var V = { class: "fg-card" }, H = {
 			"step"
 		]));
 	}
-}), Oe = /* @__PURE__ */ m({
+}), He = { class: "fg-toggle-button__text" }, Ue = { class: "fg-toggle-button__label" }, We = {
+	key: 0,
+	class: "fg-toggle-button__description"
+}, Ge = /* @__PURE__ */ m({
+	__name: "UiToggleButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		pressed: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" }
+	},
+	emits: ["update:pressed"],
+	setup(e, { emit: t }) {
+		let n = t, r = D(), i = (e) => {
+			n("update:pressed", e);
+		};
+		return (t, n) => (y(), c(T(B), {
+			class: "fg-toggle-button",
+			"data-size": e.size,
+			disabled: e.disabled,
+			"model-value": e.pressed,
+			"onUpdate:modelValue": i
+		}, {
+			default: O(() => [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)])]),
+			_: 3
+		}, 8, [
+			"data-size",
+			"disabled",
+			"model-value"
+		]));
+	}
+}), Ke = /* @__PURE__ */ m({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (t, n) => (y(), c(D(M), {
+		return (t, n) => (y(), c(T(j), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
 });
 //#endregion
-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 };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "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-dialog__content, .fg-code-block, .fg-toggle-button {
     font-family: var(--font-ui);
     font-size: var(--text-md);
     font-weight: var(--weight-regular);
@@ -51,7 +51,7 @@
   }
   .fg-code-block__copy:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
   .fg-code-block__copy svg { width: 1rem; height: 1rem; }
-  .fg-code-block__copy:focus-visible, .fg-code-block__pre:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+  .fg-code-block__copy:focus-visible, .fg-code-block__pre:focus-visible, .fg-figure__plate:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   .fg-code-block__pre { margin: 0; padding: 1rem; overflow: auto; max-height: 32rem; tab-size: 2; }
   .fg-code-block__pre, .fg-code-block__pre code { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.65; }
   .fg-code-block__pre code { display: block; color: inherit; }
@@ -141,7 +141,8 @@
   .fg-button:disabled,
   .fg-input:disabled,
   .fg-select:disabled,
-  .fg-checkbox[data-disabled="true"] {
+  .fg-checkbox[data-disabled="true"],
+  .fg-toggle-button:disabled {
     cursor: not-allowed;
     opacity: 0.58;
   }
@@ -602,6 +603,128 @@
     font-size: var(--text-sm);
   }
 
+  .fg-figure {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-3);
+    min-width: 0;
+    margin: 0;
+  }
+
+  /* Wide content scrolls inside the plate so the page never overflows. */
+  .fg-figure__plate {
+    min-width: 0;
+    overflow-x: auto;
+    padding: var(--space-5);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-panel);
+    background: var(--color-surface);
+  }
+
+  .fg-figure__caption {
+    max-width: var(--measure);
+    color: var(--color-muted);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    line-height: var(--leading);
+  }
+
+  .fg-figure__number {
+    color: var(--color-text);
+    font-weight: var(--weight-medium);
+  }
+
+  @media (max-width: 680px) {
+    .fg-figure__plate { padding: var(--space-4); }
+  }
+
+  .fg-score {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .fg-score__pips { display: inline-flex; gap: 0.1875rem; }
+
+  .fg-score__pip {
+    width: 0.5rem;
+    height: 0.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-pill);
+  }
+
+  .fg-score__pip[data-filled="true"] {
+    border-color: var(--color-accent);
+    background: var(--color-accent);
+  }
+
+  .fg-score__value { font-weight: var(--weight-medium); }
+  .fg-score__max { color: var(--color-muted); font-weight: var(--weight-regular); }
+
+  .fg-toggle-button {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-control);
+    color: var(--color-text);
+    background: var(--color-surface-raised);
+    line-height: var(--leading-tight);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .fg-toggle-button[data-size="sm"] { min-height: var(--control-sm); font-size: var(--text-sm); }
+  .fg-toggle-button[data-size="md"] { min-height: var(--control-md); font-size: var(--text-md); }
+  .fg-toggle-button[data-size="lg"] { min-height: var(--control-lg); font-size: var(--text-lg); }
+
+  .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 {
+    position: relative;
+    flex: none;
+    width: 1.75rem;
+    height: 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface-muted);
+    transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
+  }
+
+  .fg-toggle-button__switch::after {
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-border);
+    content: "";
+    transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
+  }
+
+  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch {
+    border-color: var(--color-accent);
+    background: var(--color-accent);
+  }
+
+  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch::after {
+    background: var(--color-button-text);
+    transform: translateX(0.75rem);
+  }
+
+  .fg-toggle-button__text { display: grid; min-width: 0; }
+
+  .fg-toggle-button__description {
+    color: var(--color-muted);
+    font-size: var(--text-xs);
+  }
+
   .fg-progress {
     position: relative;
     height: 0.55rem;
@@ -745,7 +868,8 @@
   .fg-radio-card:focus-visible,
   .fg-slider__thumb:focus-visible,
   .fg-dialog__close:focus-visible,
-  .fg-dialog__content:focus-visible {
+  .fg-dialog__content:focus-visible,
+  .fg-toggle-button:focus-visible {
     outline: 2px solid var(--color-focus);
     outline-offset: 2px;
   }
@@ -759,7 +883,8 @@
   :root.high-contrast .fg-surface,
   :root.high-contrast .fg-card,
   :root.high-contrast .fg-code-block,
-  :root.high-contrast .fg-dialog__content {
+  :root.high-contrast .fg-dialog__content,
+  :root.high-contrast .fg-toggle-button {
     border-width: 2px;
     border-color: var(--color-border);
   }
@@ -783,7 +908,9 @@
     .fg-radio-card,
     .fg-slider__range,
     .fg-dialog__close,
-    .fg-progress__indicator { transition: none; }
+    .fg-progress__indicator,
+    .fg-toggle-button__switch,
+    .fg-toggle-button__switch::after { transition: none; }
 
     .fg-button[aria-busy="true"]::before { animation-duration: 1.4s; }
   }