@filipgutica/ui 1.11.2 → 1.13.0

package/dist/site.js

@@ -1,30 +1,30 @@
 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, 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";
+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 A, useSlots as j, useTemplateRef as M, watch as N, withCtx as P } from "vue";
+import { tryOnMounted as F, usePreferredDark as I, useStorage as L } from "@vueuse/core";
 //#region src/site/appearance.ts
-var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "dark", ne = `(function () {
+var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "dark", ee = `(function () {
   var root = document.documentElement, choice;
-  try { choice = localStorage.getItem('${I}'); } catch (error) {}
+  try { choice = localStorage.getItem('${R}'); } catch (error) {}
   var dark = choice === 'dark';
   if (choice !== 'light' && choice !== 'dark') {
     try { dark = matchMedia('(prefers-color-scheme: dark)').matches; } catch (error) {}
   }
   root.classList.toggle('dark', dark);
   if (choice === 'light' || choice === 'dark') root.dataset.theme = choice;
-})();`, R = ({ root: e, choice: t, appearance: n }) => {
+})();`, B = ({ root: e, choice: t, appearance: n }) => {
 	e.classList.toggle("dark", n === "dark"), t === "system" ? delete e.dataset.theme : e.dataset.theme = t;
-}, z = ({ applyToRoot: e = !0 } = {}) => {
-	let t = F(I, "system", void 0, {
+}, V = ({ applyToRoot: e = !0 } = {}) => {
+	let t = L(R, "system", void 0, {
 		initOnMounted: !0,
 		writeDefaults: !1,
 		onError: () => {},
 		serializer: {
-			read: (e) => L(e) ? e : "system",
+			read: (e) => z(e) ? e : "system",
 			write: (e) => e
 		}
-	}), n = P(), r = s(() => t.value), i = s(() => t.value === "system" ? n.value ? "dark" : "light" : t.value);
-	return e && N(() => {
-		j([r, i], () => R({
+	}), n = I(), r = s(() => t.value), i = s(() => t.value === "system" ? n.value ? "dark" : "light" : t.value);
+	return e && F(() => {
+		N([r, i], () => B({
 			root: document.documentElement,
 			choice: r.value,
 			appearance: i.value
@@ -33,10 +33,10 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		choice: r,
 		appearance: i,
 		chooseAppearance: (e) => {
-			L(e) && (t.value = e);
+			z(e) && (t.value = e);
 		}
 	};
-}, B = [
+}, H = [
 	{
 		id: "annoterm",
 		label: "annoterm",
@@ -73,7 +73,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		href: "https://filipgutica.github.io/ui/",
 		repository: "https://github.com/filipgutica/ui"
 	}
-], re = { class: "fg-site-header" }, ie = { class: "fg-site-header__inner" }, V = ["aria-label"], H = {
+], te = { class: "fg-site-header" }, ne = { class: "fg-site-header__inner" }, re = ["aria-label"], ie = {
 	class: "fg-site-projects__menu fg-site-nav",
 	"aria-label": "Projects"
 }, U = ["href", "aria-current"], W = { class: "fg-site-header__end" }, G = {
@@ -121,7 +121,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				value: "dark",
 				label: "Dark"
 			}
-		], n = s(() => B.find(({ id: t }) => t === e.project)?.label ?? e.project), r = A().default ? void 0 : z(), i = C(!1), a = C(), c = C(), f = () => {
+		], n = s(() => H.find(({ id: t }) => t === e.project)?.label ?? e.project), r = j().default ? void 0 : V(), i = C(!1), a = C(), c = C(), f = () => {
 			a.value && (a.value.open = !1);
 		}, p = (e) => {
 			e.key !== "Escape" || !a.value?.open || (f(), c.value?.focus());
@@ -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", re, [d("div", ie, [d("details", {
+		}), y(() => document.removeEventListener("pointerdown", h)), (s, f) => (S(), u("header", te, [d("div", ne, [d("details", {
 			ref_key: "menu",
 			ref: a,
 			class: "fg-site-projects",
@@ -152,7 +152,7 @@ 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, re), d("nav", ie, [(S(!0), u(o, null, w(O(H), (t) => (S(), u("a", {
 			key: t.id,
 			href: t.href,
 			"aria-current": t.id === e.project ? "page" : void 0
@@ -226,35 +226,38 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		groups: {}
 	},
 	setup(e) {
-		let t = k(), n = C(), o = C(!1), s = C(!1), l = C(!1), m = a({ targetIds: e.groups.flatMap((e) => e.items).flatMap(({ href: e }) => e.startsWith("#") && e.length > 1 ? [e.slice(1)] : []) }), h, _ = null, v = () => n.value?.querySelector("button.fg-site-rail__toggle"), y = () => {
+		let t = k(), n = C(), o = C(!1), l = C(!1), m = C(!1), h = a({ targetIds: e.groups.flatMap((e) => e.items).flatMap(({ href: e }) => e.startsWith("#") && e.length > 1 ? [e.slice(1)] : []) }), _ = s(() => e.groups.flatMap((e) => e.items).find((e) => e.current)?.label), v = s(() => e.groups.flatMap((e) => e.items).find((e) => e.href === `#${h.value}`)?.label), y = s(() => {
+			let t = _.value ?? v.value;
+			return t ? `${e.label}: ${t}` : e.label;
+		}), w, T = null, E = () => n.value?.querySelector("button.fg-site-rail__toggle"), A = () => {
 			g(() => n.value?.querySelector(".fg-site-nav a")?.focus({ preventScroll: !0 }));
-		}, w = () => {
-			let e = h?.matches && !s.value && n.value?.contains(document.activeElement), t = h?.matches === !1 && s.value && !l.value && v() === document.activeElement;
-			s.value = h?.matches === !0, s.value || (l.value = !1), e ? g(() => v()?.focus({ preventScroll: !0 })) : t && y();
-		}, T = (e, t) => {
-			!l.value || t.button !== 0 || t.metaKey || t.ctrlKey || t.altKey || t.shiftKey || (_ = e.startsWith("#") ? document.getElementById(e.slice(1)) : null, l.value = !1);
-		}, E = (e) => {
-			_ ? (e.preventDefault(), _.tabIndex = -1, _.focus({ preventScroll: !0 }), _ = null) : s.value || (e.preventDefault(), y());
+		}, j = () => {
+			let e = w?.matches && !l.value && n.value?.contains(document.activeElement), t = w?.matches === !1 && l.value && !m.value && E() === document.activeElement;
+			l.value = w?.matches === !0, l.value || (m.value = !1), e ? g(() => E()?.focus({ preventScroll: !0 })) : t && A();
+		}, M = (e, t) => {
+			!m.value || t.button !== 0 || t.metaKey || t.ctrlKey || t.altKey || t.shiftKey || (T = e.startsWith("#") ? document.getElementById(e.slice(1)) : null, m.value = !1);
+		}, N = (e) => {
+			T ? (e.preventDefault(), T.tabIndex = -1, T.focus({ preventScroll: !0 }), T = null) : l.value || (e.preventDefault(), A());
 		};
 		return b(() => {
-			h = matchMedia(he), w(), o.value = !0, h.addEventListener("change", w);
-		}), x(() => h?.removeEventListener("change", w)), (a, h) => (S(), u("div", {
+			w = matchMedia(he), j(), o.value = !0, w.addEventListener("change", j);
+		}), x(() => w?.removeEventListener("change", j)), (a, s) => (S(), u("div", {
 			ref_key: "root",
 			ref: n,
 			class: "fg-site-rail",
 			"data-enhanced": o.value
-		}, [!o.value || !s.value ? (S(), u("details", {
+		}, [!o.value || !l.value ? (S(), u("details", {
 			key: 0,
 			class: "fg-site-rail__menu",
-			open: o.value && !s.value
+			open: o.value && !l.value
 		}, [d("summary", {
 			class: "fg-site-rail__summary",
 			"aria-controls": O(t)
-		}, D(e.label), 9, me), p(X, {
+		}, D(y.value), 9, me), p(X, {
 			"content-id": O(t),
 			label: e.label,
 			groups: e.groups,
-			"active-id": O(m)
+			"active-id": O(h)
 		}, null, 8, [
 			"content-id",
 			"label",
@@ -262,25 +265,25 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			"active-id"
 		])], 8, pe)) : (S(), c(i, {
 			key: 1,
-			open: l.value,
-			"onUpdate:open": h[0] ||= (e) => l.value = e,
+			open: m.value,
+			"onUpdate:open": s[0] ||= (e) => m.value = e,
 			title: e.label,
-			onCloseAutoFocus: E
+			onCloseAutoFocus: N
 		}, {
-			trigger: M(() => [p(r, {
+			trigger: P(() => [p(r, {
 				variant: "ghost",
 				size: "lg",
 				class: "fg-site-rail__toggle"
 			}, {
-				default: M(() => [f(D(e.label), 1)]),
+				default: P(() => [f(D(y.value), 1)]),
 				_: 1
 			})]),
-			default: M(() => [p(X, {
+			default: P(() => [p(X, {
 				"content-id": O(t),
 				label: e.label,
 				groups: e.groups,
-				"active-id": O(m),
-				onNavigate: T
+				"active-id": O(h),
+				onNavigate: M
 			}, null, 8, [
 				"content-id",
 				"label",
@@ -313,7 +316,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			let o = Math.min(1, i.clientWidth / a.offsetWidth);
 			o >= Z && (i.scrollLeft = 0), n.value = o >= Z ? o : 1, r.value = o >= Z ? Math.ceil(a.offsetHeight * n.value) + i.offsetHeight - i.clientHeight : void 0;
 		};
-		return j(() => [e.fit, e.html], o, { flush: "post" }), b(() => {
+		return N(() => [e.fit, e.html], o, { flush: "post" }), b(() => {
 			typeof ResizeObserver < "u" && (a = new ResizeObserver(o), t.value && a.observe(t.value)), o();
 		}), x(() => a?.disconnect()), (a, o) => (S(), u("div", {
 			ref_key: "container",
@@ -345,38 +348,38 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let i = ee(e, "modelValue"), a = C(!1), m = s(() => e.items.map(({ id: e, label: t }) => ({
+		let i = A(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 ?? ""), _ = s(() => e.items.find(({ id: e }) => e === h.value)), v = C(!1), y = E(), O = 0, k = 0, A = te("fullSizeButton"), j = (e) => {
+		}))), 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, j = M("fullSizeButton"), N = (e) => {
 			y.value = e, v.value = !0;
-		}, N = (e) => {
-			A.value?.isConnected && (e.preventDefault(), A.value.focus({ preventScroll: !0 }));
-		}, P = () => {
+		}, F = (e) => {
+			j.value?.isConnected && (e.preventDefault(), j.value.focus({ preventScroll: !0 }));
+		}, I = () => {
 			try {
 				return document.getElementById(decodeURIComponent(location.hash.slice(1)));
 			} catch {
 				return null;
 			}
-		}, F = async () => {
+		}, L = async () => {
 			await g(), cancelAnimationFrame(O), cancelAnimationFrame(k), O = requestAnimationFrame(() => {
-				k = requestAnimationFrame(() => P()?.scrollIntoView({
+				k = requestAnimationFrame(() => I()?.scrollIntoView({
 					behavior: "instant",
 					block: "start"
 				}));
 			});
-		}, I = () => {
-			let t = P();
+		}, R = () => {
+			let t = I();
 			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);
-		}, L = () => {
-			I() && F();
+		}, z = () => {
+			R() && L();
 		};
 		return b(() => {
-			a.value = !0, I(), location.hash && F(), window.addEventListener("hashchange", L), window.addEventListener("popstate", L);
+			a.value = !0, R(), location.hash && L(), window.addEventListener("hashchange", z), window.addEventListener("popstate", z);
 		}), x(() => {
-			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", L), window.removeEventListener("popstate", L);
+			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", z), window.removeEventListener("popstate", z);
 		}), (s, g) => (S(), u("div", {
 			class: "fg-capture",
 			"data-enhanced": a.value
@@ -384,12 +387,12 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			a.value && _.value ? (S(), u("button", {
 				key: 0,
 				ref_key: "fullSizeButton",
-				ref: A,
+				ref: j,
 				type: "button",
 				class: "fg-capture__full",
 				"aria-label": `Expand ${_.value.label} capture at full size`,
 				"aria-haspopup": "dialog",
-				onClick: g[0] ||= (e) => j(_.value)
+				onClick: g[0] ||= (e) => N(_.value)
 			}, [...g[4] ||= [d("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
@@ -403,7 +406,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				label: e.label,
 				"onUpdate:modelValue": g[1] ||= (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", {
+				panel: P(({ 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"
@@ -422,7 +425,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 					tabindex: "-1",
 					"aria-hidden": "true",
 					title: `Open ${n.label} capture at full size`,
-					onClick: (e) => j(n)
+					onClick: (e) => N(n)
 				}, null, 8, Se)) : l("", !0)]), n.command || s.$slots.caption ? (S(), u("figcaption", Ce, [n.command ? (S(), u("code", we, D(n.command), 1)) : l("", !0), T(s.$slots, "caption", { item: n })])) : l("", !0)], 8, be)) : l("", !0)], 64))), 128))]),
 				_: 3
 			}, 8, [
@@ -436,17 +439,17 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				title: `${y.value?.label ?? ""} capture`,
 				description: "Scroll to read the full capture.",
 				class: "fg-capture-viewer",
-				onCloseAutoFocus: N
+				onCloseAutoFocus: F
 			}, {
-				footer: M(() => [p(r, {
+				footer: P(() => [p(r, {
 					variant: "secondary",
 					size: "lg",
 					onClick: g[2] ||= (e) => v.value = !1
 				}, {
-					default: M(() => [...g[5] ||= [f(" Close capture ", -1)]]),
+					default: P(() => [...g[5] ||= [f(" Close capture ", -1)]]),
 					_: 1
 				})]),
-				default: M(() => [y.value ? (S(), c(Q, {
+				default: P(() => [y.value ? (S(), c(Q, {
 					key: 0,
 					html: y.value.html,
 					label: `${y.value.label} capture at full size`,
@@ -522,4 +525,4 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 	}
 });
 //#endregion
-export { I as SITE_APPEARANCE_KEY, B as SITE_PROJECTS, Te as UiCapture, Ie as UiCommandList, oe as UiSiteHeader, ge as UiSiteNav, R as applySiteAppearance, ne as siteThemeBootScript, z as useSiteAppearance };
+export { R as SITE_APPEARANCE_KEY, H as SITE_PROJECTS, Te as UiCapture, Ie as UiCommandList, oe as UiSiteHeader, ge as UiSiteNav, B as applySiteAppearance, ee as siteThemeBootScript, V as useSiteAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.11.2",
+  "version": "1.13.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [
@@ -14,7 +14,9 @@
     "src/site.css",
     "src/themes/*.css",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "src/fonts.css",
+    "src/fonts/*"
   ],
   "exports": {
     ".": {
@@ -36,7 +38,9 @@
     "./theme.css": "./src/theme.css",
     "./components.css": "./src/components.css",
     "./site.css": "./src/site.css",
-    "./themes/graphite-indigo.css": "./src/themes/graphite-indigo.css"
+    "./themes/graphite-indigo.css": "./src/themes/graphite-indigo.css",
+    "./fonts.css": "./src/fonts.css",
+    "./fonts/*": "./src/fonts/*"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",

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);
@@ -16,23 +16,50 @@
     min-width: 0;
     max-width: 100%;
     overflow: hidden;
-    border: 1px solid color-mix(in srgb, var(--color-code-text) 22%, var(--color-code));
-    border-radius: var(--radius-control);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-panel);
     background: var(--color-code);
     color: var(--color-code-text);
   }
+  /* Terminal commands always use the dark palette, independent of the page theme. */
+  .fg-code-block[data-command="true"] {
+    --color-code-text: var(--color-terminal-text);
+    --color-muted: var(--color-terminal-caption-text);
+    --color-focus: var(--color-project-dark);
+    --color-syntax-comment: var(--color-terminal-caption-text);
+    --color-syntax-keyword: var(--color-terminal-text);
+    --color-syntax-string: var(--color-terminal-text);
+    --color-syntax-number: var(--color-terminal-text);
+    --color-syntax-function: var(--color-terminal-text);
+    --color-syntax-type: var(--color-terminal-text);
+    --color-syntax-variable: var(--color-terminal-text);
+    --color-syntax-operator: var(--color-terminal-text);
+    --color-syntax-punctuation: var(--color-terminal-text);
+    --color-syntax-tag: var(--color-terminal-text);
+    --color-syntax-attribute: var(--color-terminal-text);
+    border-color: var(--color-terminal-border);
+    background: var(--color-terminal);
+  }
+  .fg-code-block[data-command="true"] .fg-code-block__header { background: transparent; border-color: var(--color-terminal-border); }
+  .fg-code-block[data-command="true"] .fg-code-block__line::before {
+    content: '$ ' / '';
+    flex: none;
+    white-space: pre;
+    color: var(--color-project-dark);
+    user-select: none;
+  }
   .fg-code-block__header {
     display: flex;
     align-items: center;
     gap: var(--space-3);
     min-height: 2.5rem;
     padding: 0.35rem var(--space-3);
-    border-bottom: 1px solid color-mix(in srgb, var(--color-code-text) 16%, transparent);
-    background: color-mix(in srgb, var(--color-code-text) 5%, var(--color-code));
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: var(--color-surface-raised);
     font-size: var(--text-xs);
   }
   .fg-code-block__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
-  .fg-code-block__language { opacity: 0.7; }
+  .fg-code-block__language { color: var(--color-muted); }
   .fg-code-block__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }
   .fg-code-block__copy {
     display: inline-flex;
@@ -55,11 +82,11 @@
   .fg-code-block__copy:focus-visible, .fg-code-block__pre:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   .fg-figure__plate:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
   .fg-code-block__pre { margin: 0; padding: var(--space-4); overflow: auto; max-height: 32rem; tab-size: 2; }
-  .fg-code-block__pre, .fg-code-block__pre code { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.65; }
+  .fg-code-block__pre, .fg-code-block__pre code { font-family: var(--font-mono); font-size: var(--text-code); line-height: 1.65; }
   .fg-code-block__pre code { display: block; color: inherit; }
   .fg-code-block__line { display: flex; min-height: 1.65em; }
   .fg-code-block__text { white-space: pre; }
-  .fg-code-block__number { min-width: 2.5em; padding-right: 1em; flex-shrink: 0; text-align: right; opacity: 0.5; user-select: none; }
+  .fg-code-block__number { min-width: 2.5em; padding-right: 1em; flex-shrink: 0; text-align: right; color: var(--color-muted); user-select: none; }
   .fg-code-block[data-wrap="true"] .fg-code-block__text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
   .fg-code-block__status:empty { display: none; }
   .fg-code-block__status:not(:empty) { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
@@ -144,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;
@@ -390,15 +418,16 @@
     margin-top: 0.1rem;
     place-items: center;
     border: 1px solid var(--color-input-border);
-    border-radius: 0.3rem;
+    border-radius: var(--radius-control);
     color: var(--color-button-text);
     background: var(--color-input-bg);
     box-shadow: var(--shadow-control);
   }
 
   .fg-checkbox__control[data-state="checked"] {
-    border-color: var(--color-button-bg);
-    background: var(--color-button-bg);
+    border-color: var(--color-accent);
+    color: var(--color-accent-text);
+    background: var(--color-accent);
   }
 
   .fg-checkbox__indicator {
@@ -519,7 +548,7 @@
     align-items: center;
     width: fit-content;
     border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-inline);
     padding: 0.18rem 0.48rem;
     color: var(--color-muted);
     background: var(--color-surface-muted);
@@ -528,11 +557,11 @@
     line-height: 1.25;
   }
 
-  .fg-badge[data-tone="info"] { color: var(--color-status-text, var(--color-info)); background: var(--color-info-surface); }
-  .fg-badge[data-tone="success"] { color: var(--color-status-text, var(--color-success)); background: var(--color-success-surface); }
-  .fg-badge[data-tone="warning"] { color: var(--color-status-text, var(--color-warning)); background: var(--color-warning-surface); }
+  .fg-badge[data-tone="info"] { border-color: var(--color-info); color: var(--color-status-text, var(--color-info)); background: var(--color-info-surface); }
+  .fg-badge[data-tone="success"] { border-color: var(--color-success); color: var(--color-status-text, var(--color-success)); background: var(--color-success-surface); }
+  .fg-badge[data-tone="warning"] { border-color: var(--color-warning); color: var(--color-status-text, var(--color-warning)); background: var(--color-warning-surface); }
   .fg-badge[data-tone="danger"],
-  .fg-badge[data-tone="error"] { color: var(--color-status-text, var(--color-error)); background: var(--color-error-surface); }
+  .fg-badge[data-tone="error"] { border-color: var(--color-error); color: var(--color-status-text, var(--color-error)); background: var(--color-error-surface); }
 
   .fg-alert {
     display: flex;
@@ -545,9 +574,9 @@
     background: var(--color-surface);
   }
 
-  .fg-alert[data-tone="info"] { border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-border-subtle)); background: var(--color-info-surface); }
-  .fg-alert[data-tone="success"] { border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border-subtle)); background: var(--color-success-surface); }
-  .fg-alert[data-tone="warning"] { border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border-subtle)); background: var(--color-warning-surface); }
+  .fg-alert[data-tone="info"] { border-color: var(--color-info); background: var(--color-info-surface); }
+  .fg-alert[data-tone="success"] { border-color: var(--color-success); background: var(--color-success-surface); }
+  .fg-alert[data-tone="warning"] { border-color: var(--color-warning); background: var(--color-warning-surface); }
   .fg-alert[data-tone="danger"],
   .fg-alert[data-tone="error"] {
     border-color: var(--color-error);
@@ -629,7 +658,7 @@
   .fg-figure__caption {
     max-width: var(--measure);
     color: var(--color-muted);
-    font-family: var(--font-ui);
+    font-family: var(--font-mono);
     font-size: var(--text-sm);
     line-height: var(--leading);
   }
@@ -657,7 +686,7 @@
     width: 0.5rem;
     height: 0.5rem;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-inline);
   }
 
   .fg-score__pip[data-filled="true"] {
@@ -689,40 +718,76 @@
   .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;
     height: 1rem;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-inline);
     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 {
+  .fg-toggle-button__switch::after,
+  .fg-switch__track::after {
     position: absolute;
     top: 0.125rem;
     left: 0.125rem;
     width: 0.625rem;
     height: 0.625rem;
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-inline);
     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 {
+  .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 {
-    background: var(--color-button-text);
+  .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 {
@@ -735,7 +800,7 @@
     height: 0.55rem;
     overflow: hidden;
     border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-inline);
     background: var(--color-surface-muted);
   }
 
@@ -765,7 +830,7 @@
     height: 0.375rem;
     flex: 1;
     overflow: hidden;
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-inline);
     background: var(--color-surface-muted);
   }
 
@@ -796,7 +861,7 @@
     inset: 0;
     z-index: 50;
     background: var(--color-overlay);
-    backdrop-filter: blur(2px);
+
   }
 
   .fg-dialog__content {
@@ -874,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,
@@ -906,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,
@@ -915,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; }
   }