@filipgutica/ui 1.6.0 → 1.8.0

package/dist/site/UiCommandList.vue.d.ts

@@ -10,6 +10,10 @@ export interface UiCommandListProps {
     descriptionHeader?: string;
 }
 type __VLS_Slots = {
+    /** Replaces the code-styled command, for a key shown as `<kbd>`. Copying still uses `item.command`. */
+    command?(props: {
+        item: UiCommandItem;
+    }): unknown;
     /** Replaces the plain description, for text with `<kbd>` or `<code>`. */
     description?(props: {
         item: UiCommandItem;

package/dist/site.js

@@ -1,8 +1,8 @@
 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, mergeModels as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, shallowRef as E, toDisplayString as D, unref as O, useId as k, useModel as ee, useSlots as A, watch as j, withCtx as M } from "vue";
+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, mergeModels as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, shallowRef as E, toDisplayString as D, unref as O, useId as k, useModel as ee, useSlots as A, useTemplateRef as te, watch as j, withCtx as M } from "vue";
 import { tryOnMounted as N, usePreferredDark as P, useStorage as F } from "@vueuse/core";
 //#region src/site/appearance.ts
-var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "dark", te = `(function () {
+var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "dark", ne = `(function () {
   var root = document.documentElement, choice;
   try { choice = localStorage.getItem('${I}'); } catch (error) {}
   var dark = choice === 'dark';
@@ -73,24 +73,24 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		href: "https://filipgutica.github.io/ui/",
 		repository: "https://github.com/filipgutica/ui"
 	}
-], ne = { class: "fg-site-header" }, re = { class: "fg-site-header__inner" }, V = ["aria-label"], H = {
+], re = { class: "fg-site-header" }, V = { class: "fg-site-header__inner" }, H = ["aria-label"], U = {
 	class: "fg-site-projects__menu fg-site-nav",
 	"aria-label": "Projects"
-}, U = ["href", "aria-current"], W = { class: "fg-site-header__end" }, G = {
+}, W = ["href", "aria-current"], G = { class: "fg-site-header__end" }, K = {
 	key: 0,
 	class: "fg-site-header__links",
 	"aria-label": "Site links"
-}, K = ["href"], q = {
+}, q = ["href"], J = {
 	key: 0,
 	class: "fg-site-appearance",
 	role: "group",
 	"aria-label": "Color theme"
-}, J = [
+}, Y = [
 	"aria-label",
 	"title",
 	"aria-pressed",
 	"onClick"
-], Y = {
+], X = {
 	viewBox: "0 0 24 24",
 	width: "18",
 	height: "18",
@@ -98,10 +98,10 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, X = {
+}, ie = {
 	key: 2,
 	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
-}, ie = /* @__PURE__ */ m({
+}, ae = /* @__PURE__ */ m({
 	__name: "UiSiteHeader",
 	props: {
 		project: {},
@@ -132,7 +132,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		};
 		return b(() => {
 			i.value = !0, document.addEventListener("pointerdown", h);
-		}), y(() => document.removeEventListener("pointerdown", h)), (s, f) => (S(), u("header", ne, [d("div", re, [d("details", {
+		}), y(() => document.removeEventListener("pointerdown", h)), (s, f) => (S(), u("header", re, [d("div", V, [d("details", {
 			ref_key: "menu",
 			ref: a,
 			class: "fg-site-projects",
@@ -152,14 +152,14 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			stroke: "currentColor",
 			"stroke-width": "1.5",
 			"aria-hidden": "true"
-		}, [d("path", { d: "m4 6 4 4 4-4" })], -1)], 8, V), d("nav", H, [(S(!0), u(o, null, w(O(B), (t) => (S(), u("a", {
+		}, [d("path", { d: "m4 6 4 4 4-4" })], -1)], 8, H), d("nav", U, [(S(!0), u(o, null, w(O(B), (t) => (S(), u("a", {
 			key: t.id,
 			href: t.href,
 			"aria-current": t.id === e.project ? "page" : void 0
-		}, D(t.label), 9, U))), 128))])], 544), d("div", W, [e.links.length > 0 ? (S(), u("nav", G, [(S(!0), u(o, null, w(e.links, (e) => (S(), u("a", {
+		}, D(t.label), 9, W))), 128))])], 544), d("div", G, [e.links.length > 0 ? (S(), u("nav", K, [(S(!0), u(o, null, w(e.links, (e) => (S(), u("a", {
 			key: e.href,
 			href: e.href
-		}, D(e.label), 9, K))), 128))])) : l("", !0), T(s.$slots, "default", {}, () => [i.value && O(r) ? (S(), u("div", q, [(S(), u(o, null, w(t, (e) => d("button", {
+		}, D(e.label), 9, q))), 128))])) : l("", !0), T(s.$slots, "default", {}, () => [i.value && O(r) ? (S(), u("div", J, [(S(), u(o, null, w(t, (e) => d("button", {
 			key: e.value,
 			type: "button",
 			class: "fg-site-appearance__choice",
@@ -167,7 +167,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			title: `${e.label} theme`,
 			"aria-pressed": O(r).choice.value === e.value,
 			onClick: (t) => O(r).chooseAppearance(e.value)
-		}, [(S(), u("svg", Y, [e.value === "system" ? (S(), u(o, { key: 0 }, [f[1] ||= d("rect", {
+		}, [(S(), u("svg", X, [e.value === "system" ? (S(), u(o, { key: 0 }, [f[1] ||= d("rect", {
 			x: "3",
 			y: "4",
 			width: "18",
@@ -177,13 +177,13 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			cx: "12",
 			cy: "12",
 			r: "4"
-		}, null, -1), f[4] ||= d("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (S(), u("path", X))]))], 8, J)), 64))])) : l("", !0)])])])]));
+		}, null, -1), f[4] ||= d("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (S(), u("path", ie))]))], 8, Y)), 64))])) : l("", !0)])])])]));
 	}
-}), ae = ["id"], oe = ["role", "aria-labelledby"], se = ["id"], ce = [
+}), oe = ["id"], se = ["role", "aria-labelledby"], ce = ["id"], le = [
 	"href",
 	"aria-current",
 	"onClick"
-], le = { key: 0 }, Z = /* @__PURE__ */ m({
+], ue = { key: 0 }, Z = /* @__PURE__ */ m({
 	__name: "SiteNavLinks",
 	props: {
 		contentId: {},
@@ -212,14 +212,14 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			key: 0,
 			id: i(t),
 			class: "fg-site-rail__group-label"
-		}, D(e.label), 9, se)) : l("", !0), (S(!0), u(o, null, w(e.items, (e) => (S(), u("a", {
+		}, D(e.label), 9, ce)) : l("", !0), (S(!0), u(o, null, w(e.items, (e) => (S(), u("a", {
 			key: e.href,
 			href: e.href,
 			"aria-current": a(e),
 			onClick: (t) => n("navigate", e.href, t)
-		}, [e.code ? (S(), u("code", le, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(e.label), 1)], 64))], 8, ce))), 128))], 8, oe))), 128))])], 8, ae));
+		}, [e.code ? (S(), u("code", ue, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(e.label), 1)], 64))], 8, le))), 128))], 8, se))), 128))])], 8, oe));
 	}
-}), ue = ["data-enhanced"], de = ["open"], fe = ["aria-controls"], pe = "(max-width: 800px)", me = /* @__PURE__ */ m({
+}), de = ["data-enhanced"], fe = ["open"], pe = ["aria-controls"], me = "(max-width: 800px)", he = /* @__PURE__ */ m({
 	__name: "UiSiteNav",
 	props: {
 		label: {},
@@ -237,7 +237,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			_ ? (e.preventDefault(), _.tabIndex = -1, _.focus({ preventScroll: !0 }), _ = null) : s.value || (e.preventDefault(), y());
 		};
 		return b(() => {
-			h = matchMedia(pe), w(), o.value = !0, h.addEventListener("change", w);
+			h = matchMedia(me), w(), o.value = !0, h.addEventListener("change", w);
 		}), x(() => h?.removeEventListener("change", w)), (a, h) => (S(), u("div", {
 			ref_key: "root",
 			ref: n,
@@ -250,7 +250,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		}, [d("summary", {
 			class: "fg-site-rail__summary",
 			"aria-controls": O(t)
-		}, " Menu ", 8, fe), p(Z, {
+		}, " Menu ", 8, pe), p(Z, {
 			"content-id": O(t),
 			label: e.label,
 			groups: e.groups,
@@ -260,7 +260,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			"label",
 			"groups",
 			"active-id"
-		])], 8, de)) : (S(), c(i, {
+		])], 8, fe)) : (S(), c(i, {
 			key: 1,
 			open: l.value,
 			"onUpdate:open": h[0] ||= (e) => l.value = e,
@@ -288,9 +288,9 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				"active-id"
 			])]),
 			_: 1
-		}, 8, ["open"]))], 8, ue));
+		}, 8, ["open"]))], 8, de));
 	}
-}), he = [
+}), ge = [
 	"aria-label",
 	"tabindex",
 	"data-fit",
@@ -326,16 +326,12 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				"--capture-scale": n.value
 			}),
 			innerHTML: e.html
-		}, null, 12, he));
+		}, null, 12, ge));
 	}
-}), ge = ["data-enhanced"], _e = ["id"], ve = { class: "fg-capture__preview" }, ye = [
-	"aria-label",
-	"title",
-	"onClick"
-], be = {
+}), _e = ["data-enhanced"], ve = ["aria-label"], ye = ["id"], be = { class: "fg-capture__preview" }, xe = ["title", "onClick"], Se = {
 	key: 0,
 	class: "fg-capture__caption"
-}, xe = { key: 0 }, Se = /* @__PURE__ */ m({
+}, Ce = { key: 0 }, we = /* @__PURE__ */ m({
 	__name: "UiCapture",
 	props: /*@__PURE__*/ h({
 		items: {},
@@ -350,113 +346,132 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		let i = ee(e, "modelValue"), a = C(!1), m = s(() => e.items.map(({ id: e, label: t }) => ({
 			value: e,
 			label: t
-		}))), h = s(() => i.value ?? e.items[0]?.id ?? ""), _ = C(!1), v = E(), y, O = 0, k = 0, A = (e, t) => {
-			t.currentTarget instanceof HTMLElement && (y = t.currentTarget), v.value = e, _.value = !0;
-		}, j = (e) => {
-			y?.isConnected && (e.preventDefault(), y.focus({ preventScroll: !0 }));
-		}, N = () => {
+		}))), h = s(() => i.value ?? e.items[0]?.id ?? ""), _ = s(() => e.items.find(({ id: e }) => e === h.value)), v = C(!1), y = E(), O = 0, k = 0, A = te("fullSizeButton"), j = (e) => {
+			y.value = e, v.value = !0;
+		}, N = (e) => {
+			A.value?.isConnected && (e.preventDefault(), A.value.focus({ preventScroll: !0 }));
+		}, P = () => {
 			try {
 				return document.getElementById(decodeURIComponent(location.hash.slice(1)));
 			} catch {
 				return null;
 			}
-		}, P = async () => {
+		}, F = async () => {
 			await g(), cancelAnimationFrame(O), cancelAnimationFrame(k), O = requestAnimationFrame(() => {
-				k = requestAnimationFrame(() => N()?.scrollIntoView({
+				k = requestAnimationFrame(() => P()?.scrollIntoView({
 					behavior: "instant",
 					block: "start"
 				}));
 			});
-		}, F = () => {
-			let t = N();
+		}, I = () => {
+			let t = P();
 			if (!t) return !1;
 			let n = e.items.find(({ id: n }) => document.getElementById(`${e.idPrefix}${n}`)?.contains(t));
 			return !n || h.value === n.id ? !1 : (i.value = n.id, !0);
-		}, I = () => {
-			F() && P();
+		}, L = () => {
+			I() && F();
 		};
 		return b(() => {
-			a.value = !0, F(), location.hash && P(), window.addEventListener("hashchange", I), window.addEventListener("popstate", I);
+			a.value = !0, I(), location.hash && F(), window.addEventListener("hashchange", L), window.addEventListener("popstate", L);
 		}), x(() => {
-			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", I), window.removeEventListener("popstate", I);
+			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", L), window.removeEventListener("popstate", L);
 		}), (s, g) => (S(), u("div", {
 			class: "fg-capture",
 			"data-enhanced": a.value
-		}, [p(n, {
-			"model-value": h.value,
-			items: m.value,
-			label: e.label,
-			"onUpdate:modelValue": g[0] ||= (e) => i.value = e
-		}, {
-			panel: M(({ value: t }) => [(S(!0), u(o, null, w(e.items, (n) => (S(), u(o, { key: n.id }, [n.id === t ? (S(), u("figure", {
-				key: 0,
-				id: `${e.idPrefix}${n.id}`,
-				class: "fg-capture__figure"
-			}, [d("div", ve, [p(Q, {
-				html: n.html,
-				label: `Terminal capture: ${n.label}`,
-				fit: a.value
-			}, null, 8, [
-				"html",
-				"label",
-				"fit"
-			]), a.value ? (S(), u("button", {
+		}, [
+			a.value && _.value ? (S(), u("button", {
 				key: 0,
+				ref_key: "fullSizeButton",
+				ref: A,
 				type: "button",
-				class: "fg-capture__expand",
-				"aria-label": `Expand ${n.label} capture`,
+				class: "fg-capture__full",
+				"aria-label": `Expand ${_.value.label} capture at full size`,
 				"aria-haspopup": "dialog",
-				title: `Open ${n.label} capture at full size`,
-				onClick: (e) => A(n, e)
-			}, null, 8, ye)) : l("", !0)]), n.command || s.$slots.caption ? (S(), u("figcaption", be, [n.command ? (S(), u("code", xe, D(n.command), 1)) : l("", !0), T(s.$slots, "caption", { item: n })])) : l("", !0)], 8, _e)) : l("", !0)], 64))), 128))]),
-			_: 3
-		}, 8, [
-			"model-value",
-			"items",
-			"label"
-		]), p(t, {
-			open: _.value,
-			"onUpdate:open": g[2] ||= (e) => _.value = e,
-			title: `${v.value?.label ?? ""} capture`,
-			description: "Scroll to read the full capture.",
-			class: "fg-capture-viewer",
-			onCloseAutoFocus: j
-		}, {
-			footer: M(() => [p(r, {
-				variant: "secondary",
-				size: "lg",
-				onClick: g[1] ||= (e) => _.value = !1
+				onClick: g[0] ||= (e) => j(_.value)
+			}, [...g[4] ||= [d("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.5",
+				"aria-hidden": "true"
+			}, [d("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), d("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ve)) : l("", !0),
+			p(n, {
+				"model-value": h.value,
+				items: m.value,
+				label: e.label,
+				"onUpdate:modelValue": g[1] ||= (e) => i.value = e
 			}, {
-				default: M(() => [...g[3] ||= [f(" Close capture ", -1)]]),
+				panel: M(({ value: t }) => [(S(!0), u(o, null, w(e.items, (n) => (S(), u(o, { key: n.id }, [n.id === t ? (S(), u("figure", {
+					key: 0,
+					id: `${e.idPrefix}${n.id}`,
+					class: "fg-capture__figure"
+				}, [d("div", be, [p(Q, {
+					html: n.html,
+					label: `Terminal capture: ${n.label}`,
+					fit: a.value
+				}, null, 8, [
+					"html",
+					"label",
+					"fit"
+				]), a.value ? (S(), u("button", {
+					key: 0,
+					type: "button",
+					class: "fg-capture__expand",
+					tabindex: "-1",
+					"aria-hidden": "true",
+					title: `Open ${n.label} capture at full size`,
+					onClick: (e) => j(n)
+				}, null, 8, xe)) : l("", !0)]), n.command || s.$slots.caption ? (S(), u("figcaption", Se, [n.command ? (S(), u("code", Ce, D(n.command), 1)) : l("", !0), T(s.$slots, "caption", { item: n })])) : l("", !0)], 8, ye)) : l("", !0)], 64))), 128))]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"items",
+				"label"
+			]),
+			p(t, {
+				open: v.value,
+				"onUpdate:open": g[3] ||= (e) => v.value = e,
+				title: `${y.value?.label ?? ""} capture`,
+				description: "Scroll to read the full capture.",
+				class: "fg-capture-viewer",
+				onCloseAutoFocus: N
+			}, {
+				footer: M(() => [p(r, {
+					variant: "secondary",
+					size: "lg",
+					onClick: g[2] ||= (e) => v.value = !1
+				}, {
+					default: M(() => [...g[5] ||= [f(" Close capture ", -1)]]),
+					_: 1
+				})]),
+				default: M(() => [y.value ? (S(), c(Q, {
+					key: 0,
+					html: y.value.html,
+					label: `${y.value.label} capture at full size`,
+					fit: !1
+				}, null, 8, ["html", "label"])) : l("", !0)]),
 				_: 1
-			})]),
-			default: M(() => [v.value ? (S(), c(Q, {
-				key: 0,
-				html: v.value.html,
-				label: `${v.value.label} capture at full size`,
-				fit: !1
-			}, null, 8, ["html", "label"])) : l("", !0)]),
-			_: 1
-		}, 8, ["open", "title"])], 8, ge));
+			}, 8, ["open", "title"])
+		], 8, _e));
 	}
-}), Ce = { class: "fg-command-list" }, we = { class: "fg-command-list__table" }, Te = { scope: "col" }, Ee = { scope: "col" }, De = { key: 0 }, $ = { class: "fg-command-list__command" }, Oe = { class: "fg-command-list__description" }, ke = {
+}), Te = { class: "fg-command-list" }, Ee = { class: "fg-command-list__table" }, De = { scope: "col" }, $ = { scope: "col" }, Oe = { key: 0 }, ke = { class: "fg-command-list__command" }, Ae = { class: "fg-command-list__description" }, je = {
 	key: 0,
 	class: "fg-command-list__action"
-}, Ae = [
+}, Me = [
 	"disabled",
 	"aria-label",
 	"title",
 	"onClick"
-], je = {
+], Ne = {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, Me = {
+}, Pe = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, Ne = /* @__PURE__ */ m({
+}, Fe = /* @__PURE__ */ m({
 	__name: "UiCommandList",
 	props: {
 		items: {},
@@ -476,14 +491,14 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			unavailableMessage: "Clipboard unavailable. Select the command to copy it.",
 			failureMessage: "Could not copy. Select the command to copy it."
 		}), p = C(""), m = s(() => a.value || (r.value ? `${p.value} copied to clipboard.` : "")), h = (e) => (p.value = e, c(e));
-		return (e, s) => (S(), u("div", Ce, [d("table", we, [d("thead", null, [d("tr", null, [
-			d("th", Te, D(t.commandHeader), 1),
-			d("th", Ee, D(t.descriptionHeader), 1),
-			t.copyable ? (S(), u("td", De)) : l("", !0)
+		return (e, s) => (S(), u("div", Te, [d("table", Ee, [d("thead", null, [d("tr", null, [
+			d("th", De, D(t.commandHeader), 1),
+			d("th", $, D(t.descriptionHeader), 1),
+			t.copyable ? (S(), u("td", Oe)) : l("", !0)
 		])]), d("tbody", null, [(S(!0), u(o, null, w(t.items, (c) => (S(), u("tr", { key: c.command }, [
-			d("td", $, [d("code", null, D(c.command), 1)]),
-			d("td", Oe, [T(e.$slots, "description", { item: c }, () => [f(D(c.description), 1)])]),
-			t.copyable ? (S(), u("td", ke, [n.value ? (S(), u("button", {
+			d("td", ke, [T(e.$slots, "command", { item: c }, () => [d("code", null, D(c.command), 1)])]),
+			d("td", Ae, [T(e.$slots, "description", { item: c }, () => [f(D(c.description), 1)])]),
+			t.copyable ? (S(), u("td", je, [n.value ? (S(), u("button", {
 				key: 0,
 				type: "button",
 				class: "fg-command-list__copy",
@@ -491,13 +506,13 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				"aria-label": `Copy ${c.command}`,
 				title: `Copy ${c.command}`,
 				onClick: (e) => h(c.command)
-			}, [(S(), u("svg", je, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Me)) : (S(), u(o, { key: 1 }, [s[0] ||= d("rect", {
+			}, [(S(), u("svg", Ne, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Pe)) : (S(), u(o, { key: 1 }, [s[0] ||= d("rect", {
 				x: "8",
 				y: "8",
 				width: "12",
 				height: "13",
 				rx: "2"
-			}, null, -1), s[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))]))], 8, Ae)) : l("", !0)])) : l("", !0)
+			}, null, -1), s[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))]))], 8, Me)) : l("", !0)])) : l("", !0)
 		]))), 128))])]), d("span", {
 			class: _(["fg-command-list__status", { "fg-site-sr-only": !O(a) }]),
 			role: "status"
@@ -505,4 +520,4 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 	}
 });
 //#endregion
-export { I as SITE_APPEARANCE_KEY, B as SITE_PROJECTS, Se as UiCapture, Ne as UiCommandList, ie as UiSiteHeader, me as UiSiteNav, R as applySiteAppearance, te as siteThemeBootScript, z as useSiteAppearance };
+export { I as SITE_APPEARANCE_KEY, B as SITE_PROJECTS, we as UiCapture, Fe as UiCommandList, ae as UiSiteHeader, he as UiSiteNav, R as applySiteAppearance, ne as siteThemeBootScript, z as useSiteAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.6.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; }
   }