@filipgutica/ui 1.6.0 → 1.8.0

package/README.md

@@ -176,8 +176,9 @@ breakpoint.
 
 `UiCapture` shows one panel: tabs in the header, the capture scaled to the panel
 width, and the `command` and `caption` slot below. `html` is trusted, checked-in
-terminal markup with a single root element. The expand button opens the capture
-at full size in a dialog and returns focus to the button on close. `v-model`
+terminal markup with a single root element. The Full size button at the end of
+the tab row, or a click on the capture, opens it at full size in a dialog, and
+focus returns to the button on close. Phones show the button as an icon. `v-model`
 holds the active ID and defaults to the first item. Each capture has the ID
 `idPrefix` + `id` (`frame-` by default), so a deep link such as `#frame-read`
 selects its tab on load and on hash change. Without JavaScript every capture is
@@ -186,8 +187,8 @@ colors: set `--site-capture-bg` on `:root`, because the dialog renders outside
 the panel.
 
 `UiCommandList` renders a table of monospace commands and descriptions. Use the
-`description` slot for `<kbd>` or `<code>`, and `commandHeader` and
-`descriptionHeader` to rename the columns. Each row gets a copy button named
+`command` slot to show a key as `<kbd>`, the `description` slot for `<kbd>` or
+`<code>`, and `commandHeader` and `descriptionHeader` to rename the columns. Each row gets a copy button named
 "Copy <command>" once the page is interactive; set `copyable` to `false` to
 remove them. A status message announces each copy and shows a fallback when
 the clipboard is unavailable. At 640px and below each command stacks above its

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 };