@filipgutica/ui 1.8.0 → 1.9.0

package/README.md

@@ -18,6 +18,7 @@ Import the styles from your application stylesheet:
 ```css
 @import "tailwindcss";
 @import "@filipgutica/ui/theme.css";
+@import "@filipgutica/ui/themes/graphite-indigo.css";
 @import "@filipgutica/ui/components.css";
 ```
 
@@ -93,13 +94,10 @@ The gallery's search-and-install dialog is docs-only, not an exported component.
 Applications can build their own picker with the exported components and theme
 helpers. `UiSiteHeader` includes the built-in System, Light, and Dark control.
 
-The default theme is unchanged. To opt in to Graphite Indigo, import it after
-`theme.css`:
-
-```css
-@import "@filipgutica/ui/theme.css";
-@import "@filipgutica/ui/themes/graphite-indigo.css";
-```
+The install steps above import Graphite Indigo, the palette of the project
+sites, after `theme.css`. To keep the base theme instead, with blue actions and
+warm greys, leave out the `themes/graphite-indigo.css` import. Graphite Indigo
+stays opt-in: `theme.css` alone still gives the base theme.
 
 ## Project sites
 
@@ -124,8 +122,9 @@ import { UiSiteHeader } from '@filipgutica/ui/site'
 
 `project` is `wtree`, `annoterm`, `devps`, `workbench`, `filip-stack`, or `ui`. The project
 menu is a native disclosure that works without JavaScript; Escape closes it and
-returns focus to its button. Without a default slot the header renders a
-System, Light, and Dark picker. A page with its own appearance control passes it
+returns focus to its button. Inside `.fg-site-docs`, at 640px and below, the
+header hides `links` so it fits one row, so repeat those destinations in the footer. Without a
+default slot the header renders a System, Light, and Dark picker. A page with its own appearance control passes it
 in the default slot and uses `useSiteAppearance({ applyToRoot: false })` when it
 owns the root element.
 
@@ -169,8 +168,9 @@ import read from './captures/read.html?raw'
 `aria-current="location"`, a text-only marker. An item with `current: true` gets
 `aria-current="page"`, the selected fill and accent bar; `code: true` shows the
 label in the monospace font. The page grid places the rail, which stays in view
-on desktop. At 800px and below it is a native Menu disclosure until the page is
-interactive, then a drawer. The drawer closes on navigation and focuses the
+on desktop. At 800px and below it is a native disclosure until the page is
+interactive, then a drawer. The disclosure, the drawer button, and the drawer
+title all show `label`. The drawer closes on navigation and focuses the
 destination section, and focus follows the visible control across the
 breakpoint.
 
@@ -182,9 +182,11 @@ focus returns to the button on close. Phones show the button as an icon. `v-mode
 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
-listed under its own heading and scrolls at full size. The site owns terminal
-colors: set `--site-capture-bg` on `:root`, because the dialog renders outside
-the panel.
+listed under its own heading and scrolls at full size. Captures use a dark
+terminal palette for the `.term` root and the converter's ANSI classes (`.tf0`
+to `.tf15`, `.tb0` to `.tb15`, `.tf-dim`, `.tbold`, and the others). To change
+it, set `--site-capture-bg`, `--t-bg`, `--t-fg`, `--t-dim`, or `--t0` to `--t15`
+on `:root`, because the dialog renders outside the panel.
 
 `UiCommandList` renders a table of monospace commands and descriptions. Use the
 `command` slot to show a key as `<kbd>`, the `description` slot for `<kbd>` or
@@ -200,6 +202,53 @@ pairs, `.fg-site-definitions` for a two-column `dl` of `dt` and `dd` that stacks
 on phones, `.fg-site-sr-only` for visually hidden text, and `.fg-site-skip` for
 a skip link that appears on focus.
 
+### Docs shell
+
+Add `fg-site-docs` to the element that wraps a project page's header, rail,
+main content, and footer. The shell then supplies:
+
+- the frame: the header across the top, the `--sidebar` rail beside `main`, and
+  the footer on the frame edges. At 800px and below the rail stacks above `main`.
+- element defaults inside the shell, plus the page background and font on
+  `body`: box sizing, heading sizes and margins, paragraph measure, links,
+  `kbd`, and a 2px focus outline.
+- `.fg-site-footer` for the footer and `.fg-site-legend` for a `dl` that explains
+  what a capture shows.
+
+```vue
+<template>
+  <div class="fg-site-docs">
+    <UiSiteHeader project="devps" />
+    <UiSiteNav label="On this page" :groups="navigation" />
+    <main id="main">
+      <section aria-labelledby="title">…</section>
+      <dl class="fg-site-legend">
+        <div><dt>PORTS</dt><dd>The ports the server listens on.</dd></div>
+      </dl>
+    </main>
+    <footer class="fg-site-footer">
+      <a href="https://github.com/filipgutica">Built by Filip Gutica</a>
+      <nav aria-label="Project links">
+        <a href="https://github.com/filipgutica/devps/releases">Releases</a>
+      </nav>
+    </footer>
+  </div>
+</template>
+```
+
+The header, rail, `main`, and footer must be direct children of the shell. The
+element defaults sit in the `base` cascade layer, so library components and the
+site's own rules win. That holds only when the site declares the layer order
+before importing `site.css`: `@import "tailwindcss"` does this, or start the
+stylesheet with `@layer base, components, utilities;`. To adopt the shell, delete
+the site's own frame, element base, `kbd`, footer, legend, and ANSI palette
+rules. Without `fg-site-docs`, the frame, element defaults, and phone header
+rules do not apply. These apply on every page: the `fg-site-footer` and
+`fg-site-legend` classes wherever a page uses them; the capture terminal palette
+for every `UiCapture`, in the `components` layer, so a site's own unlayered
+`.term` and ANSI rules and its `--t*` values still win; and `UiSiteNav`, whose
+phone toggle and drawer title now show its `label`.
+
 ## Development
 
 ```sh

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-qEJQS1S9.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, inject as h, mergeModels as g, mergeProps as _, normalizeStyle as v, openBlock as y, provide as b, ref as ee, renderList as x, renderSlot as S, resolveDynamicComponent as C, shallowRef as te, toDisplayString as w, unref as T, useId as E, useModel as 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

package/dist/site.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-qEJQS1S9.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";
 //#region src/site/appearance.ts
@@ -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, pe), p(Z, {
+		}, D(e.label), 9, pe), p(Z, {
 			"content-id": O(t),
 			label: e.label,
 			groups: e.groups,
@@ -264,7 +264,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			key: 1,
 			open: l.value,
 			"onUpdate:open": h[0] ||= (e) => l.value = e,
-			title: "Navigation",
+			title: e.label,
 			onCloseAutoFocus: E
 		}, {
 			trigger: M(() => [p(r, {
@@ -272,7 +272,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				size: "lg",
 				class: "fg-site-rail__toggle"
 			}, {
-				default: M(() => [...h[1] ||= [f(" Menu ", -1)]]),
+				default: M(() => [f(D(e.label), 1)]),
 				_: 1
 			})]),
 			default: M(() => [p(Z, {
@@ -288,7 +288,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				"active-id"
 			])]),
 			_: 1
-		}, 8, ["open"]))], 8, de));
+		}, 8, ["open", "title"]))], 8, de));
 	}
 }), ge = [
 	"aria-label",

package/dist/{use-active-section-CiflgGBI.js → use-active-section-qEJQS1S9.js}

@@ -1,9 +1,9 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, onMounted as u, onUnmounted as d, openBlock as f, readonly as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, withCtx as b } from "vue";
-import { DialogClose as x, DialogContent as S, DialogDescription as C, DialogOverlay as w, DialogPortal as T, DialogRoot as E, DialogTitle as D, DialogTrigger as O, Primitive as k } from "reka-ui";
-import { useTimeoutFn as A } from "@vueuse/core";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, onMounted as u, onUnmounted as d, openBlock as f, readonly as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useTemplateRef as b, watch as x, withCtx as S } from "vue";
+import { DialogClose as C, DialogContent as w, DialogDescription as T, DialogOverlay as E, DialogPortal as D, DialogRoot as O, DialogTitle as k, DialogTrigger as A, Primitive as j } from "reka-ui";
+import { useTimeoutFn as M } from "@vueuse/core";
 //#endregion
 //#region src/components/UiButton.vue
-var j = /* @__PURE__ */ c({
+var N = /* @__PURE__ */ c({
 	__name: "UiButton",
 	props: {
 		disabled: {
@@ -19,7 +19,7 @@ var j = /* @__PURE__ */ c({
 		variant: { default: "primary" }
 	},
 	setup(e) {
-		return (t, r) => (f(), n(v(k), {
+		return (t, r) => (f(), n(v(j), {
 			as: "button",
 			class: "fg-button",
 			"data-size": e.size,
@@ -28,7 +28,7 @@ var j = /* @__PURE__ */ c({
 			disabled: e.disabled || e.loading,
 			type: e.type
 		}, {
-			default: b(() => [g(t.$slots, "default")]),
+			default: S(() => [g(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"data-size",
@@ -38,8 +38,8 @@ var j = /* @__PURE__ */ c({
 			"type"
 		]));
 	}
-}), M = ({ unavailableMessage: e, failureMessage: t }) => {
-	let n = m(!1), r = m(!1), i = m(""), { start: a } = A(() => {
+}), P = ({ unavailableMessage: e, failureMessage: t }) => {
+	let n = m(!1), r = m(!1), i = m(""), { start: a } = M(() => {
 		n.value = !1;
 	}, 1500, { immediate: !1 });
 	return {
@@ -61,10 +61,10 @@ var j = /* @__PURE__ */ c({
 			}
 		}
 	};
-}, N = { class: "fg-dialog__header" }, P = { class: "fg-dialog__body" }, F = {
+}, F = { class: "fg-dialog__header" }, I = { class: "fg-dialog__body" }, L = {
 	key: 0,
 	class: "fg-dialog__footer"
-}, I = /* @__PURE__ */ c({
+}, R = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDialog",
 	props: {
@@ -75,34 +75,34 @@ var j = /* @__PURE__ */ c({
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
 		let c = t;
-		return (t, u) => (f(), n(v(E), {
+		return (t, u) => (f(), n(v(O), {
 			open: e.open,
 			"onUpdate:open": u[0] ||= (e) => c("update:open", e)
 		}, {
-			default: b(() => [s(v(T), null, {
-				default: b(() => [s(v(w), { class: "fg-dialog__overlay" }), s(v(S), l({
+			default: S(() => [s(v(D), null, {
+				default: S(() => [s(v(E), { class: "fg-dialog__overlay" }), s(v(w), l({
 					class: "fg-dialog__content",
 					"aria-modal": "true"
 				}, t.$attrs), {
-					default: b(() => [
-						a("div", N, [a("div", null, [s(v(D), { class: "fg-dialog__title" }, {
-							default: b(() => [o(_(e.title), 1)]),
+					default: S(() => [
+						a("div", F, [a("div", null, [s(v(k), { class: "fg-dialog__title" }, {
+							default: S(() => [o(_(e.title), 1)]),
 							_: 1
-						}), e.description ? (f(), n(v(C), {
+						}), e.description ? (f(), n(v(T), {
 							key: 0,
 							class: "fg-dialog__description"
 						}, {
-							default: b(() => [o(_(e.description), 1)]),
+							default: S(() => [o(_(e.description), 1)]),
 							_: 1
-						})) : r("", !0)]), s(v(x), {
+						})) : r("", !0)]), s(v(C), {
 							class: "fg-dialog__close",
 							"aria-label": "Close dialog"
 						}, {
-							default: b(() => [...u[1] ||= [o(" × ", -1)]]),
+							default: S(() => [...u[1] ||= [o(" × ", -1)]]),
 							_: 1
 						})]),
-						a("div", P, [g(t.$slots, "default")]),
-						t.$slots.footer ? (f(), i("div", F, [g(t.$slots, "footer")])) : r("", !0)
+						a("div", I, [g(t.$slots, "default")]),
+						t.$slots.footer ? (f(), i("div", L, [g(t.$slots, "footer")])) : r("", !0)
 					]),
 					_: 3
 				}, 16)]),
@@ -111,7 +111,7 @@ var j = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), L = { class: "fg-drawer__header" }, R = { class: "fg-drawer__body" }, z = /* @__PURE__ */ c({
+}), z = { class: "fg-drawer__header" }, B = { class: "fg-drawer__body" }, V = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDrawer",
 	props: {
@@ -121,32 +121,32 @@ var j = /* @__PURE__ */ c({
 	emits: ["update:open", "closeAutoFocus"],
 	setup(e, { emit: t }) {
 		let i = t;
-		return (t, c) => (f(), n(v(E), {
+		return (t, c) => (f(), n(v(O), {
 			open: e.open,
 			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
 		}, {
-			default: b(() => [t.$slots.trigger ? (f(), n(v(O), {
+			default: S(() => [t.$slots.trigger ? (f(), n(v(A), {
 				key: 0,
 				"as-child": ""
 			}, {
-				default: b(() => [g(t.$slots, "trigger")]),
+				default: S(() => [g(t.$slots, "trigger")]),
 				_: 3
-			})) : r("", !0), s(v(T), null, {
-				default: b(() => [s(v(w), { class: "fg-drawer__overlay" }), s(v(S), l({
+			})) : r("", !0), s(v(D), null, {
+				default: S(() => [s(v(E), { class: "fg-drawer__overlay" }), s(v(w), l({
 					class: "fg-drawer__content",
 					"aria-modal": "true",
 					"aria-describedby": void 0
 				}, t.$attrs, { onCloseAutoFocus: c[0] ||= (e) => i("closeAutoFocus", e) }), {
-					default: b(() => [a("div", L, [s(v(D), { class: "fg-drawer__title" }, {
-						default: b(() => [o(_(e.title), 1)]),
+					default: S(() => [a("div", z, [s(v(k), { class: "fg-drawer__title" }, {
+						default: S(() => [o(_(e.title), 1)]),
 						_: 1
-					}), s(v(x), {
+					}), s(v(C), {
 						class: "fg-drawer__close",
 						"aria-label": "Close drawer"
 					}, {
-						default: b(() => [...c[2] ||= [o(" × ", -1)]]),
+						default: S(() => [...c[2] ||= [o(" × ", -1)]]),
 						_: 1
-					})]), a("div", R, [g(t.$slots, "default")])]),
+					})]), a("div", B, [g(t.$slots, "default")])]),
 					_: 3
 				}, 16)]),
 				_: 3
@@ -154,20 +154,20 @@ var j = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), B = { class: "fg-tabs" }, V = ["aria-label"], H = [
+}), H = { class: "fg-tabs" }, U = ["aria-label"], W = [
 	"id",
 	"aria-controls",
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], U = [
+], G = [
 	"id",
 	"role",
 	"aria-labelledby",
 	"hidden",
 	"tabindex"
-], W = ["id", "hidden"], G = /* @__PURE__ */ c({
+], K = ["id", "hidden"], q = /* @__PURE__ */ c({
 	__name: "UiTabs",
 	props: {
 		items: {},
@@ -176,13 +176,20 @@ var j = /* @__PURE__ */ c({
 	},
 	emits: ["update:modelValue"],
 	setup(n, { emit: o }) {
-		let s = o, c = y(), l = m(!1), d = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), p = (e) => `${c}-tab-${encodeURIComponent(e)}`, v = (e) => `${c}-panel-${encodeURIComponent(e)}`, b = (e) => `${c}-heading-${encodeURIComponent(e)}`;
+		let s = o, c = y(), l = m(!1), d = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), p = (e) => `${c}-tab-${encodeURIComponent(e)}`, v = (e) => `${c}-panel-${encodeURIComponent(e)}`, S = (e) => `${c}-heading-${encodeURIComponent(e)}`;
 		u(() => {
 			l.value = !0;
 		});
-		let x = (e) => {
+		let C = b("list");
+		x([l, d], () => {
+			let e = C.value, t = e?.querySelector("[aria-selected=\"true\"]");
+			if (!e || !t) return;
+			let n = e.getBoundingClientRect(), { left: r, right: i } = t.getBoundingClientRect();
+			r < n.left ? e.scrollLeft -= n.left - r : i > n.right && (e.scrollLeft += i - n.right);
+		}, { flush: "post" });
+		let w = (e) => {
 			e !== d.value && s("update:modelValue", e);
-		}, S = (e) => {
+		}, T = (e) => {
 			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
 				"ArrowLeft",
 				"ArrowRight",
@@ -194,14 +201,19 @@ var j = /* @__PURE__ */ c({
 			let r = [...t.querySelectorAll("[role=\"tab\"]")], i = r.indexOf(n);
 			if (i < 0 || r.length === 0) return;
 			let a = getComputedStyle(t).direction === "rtl", o = e.key === (a ? "ArrowRight" : "ArrowLeft"), s = r[e.key === "Home" ? 0 : e.key === "End" ? r.length - 1 : (i + (o ? -1 : 1) + r.length) % r.length];
-			s && (e.preventDefault(), s.focus());
+			s && (e.preventDefault(), s.focus(), s.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			}));
 		};
-		return (t, o) => (f(), i("div", B, [l.value ? (f(), i("div", {
+		return (t, o) => (f(), i("div", H, [l.value ? (f(), i("div", {
 			key: 0,
+			ref_key: "list",
+			ref: C,
 			class: "fg-tabs__list",
 			role: "tablist",
 			"aria-label": n.label,
-			onKeydown: S
+			onKeydown: T
 		}, [(f(!0), i(e, null, h(n.items, (e) => (f(), i("button", {
 			id: p(e.value),
 			key: e.value,
@@ -211,23 +223,23 @@ var j = /* @__PURE__ */ c({
 			"aria-controls": v(e.value),
 			"aria-selected": e.value === d.value,
 			tabindex: e.value === d.value ? 0 : -1,
-			onClick: (t) => x(e.value),
-			onFocus: (t) => x(e.value)
-		}, _(e.label), 41, H))), 128))], 40, V)) : r("", !0), (f(!0), i(e, null, h(n.items, (e) => (f(), i("section", {
+			onClick: (t) => w(e.value),
+			onFocus: (t) => w(e.value)
+		}, _(e.label), 41, W))), 128))], 40, U)) : r("", !0), (f(!0), i(e, null, h(n.items, (e) => (f(), i("section", {
 			id: v(e.value),
 			key: e.value,
 			class: "fg-tabs__panel",
 			role: l.value ? "tabpanel" : void 0,
-			"aria-labelledby": l.value ? p(e.value) : b(e.value),
+			"aria-labelledby": l.value ? p(e.value) : S(e.value),
 			hidden: l.value && e.value !== d.value,
 			tabindex: l.value ? 0 : void 0
 		}, [a("h3", {
-			id: b(e.value),
+			id: S(e.value),
 			class: "fg-tabs__heading",
 			hidden: l.value
-		}, _(e.label), 9, W), g(t.$slots, "panel", { value: e.value })], 8, U))), 128))]));
+		}, _(e.label), 9, K), g(t.$slots, "panel", { value: e.value })], 8, G))), 128))]));
 	}
-}), K = ({ targetIds: e }) => {
+}), J = ({ targetIds: e }) => {
 	let t = m(e[0]), n, r, i;
 	return u(() => {
 		let a = e.flatMap((e) => {
@@ -252,4 +264,4 @@ var j = /* @__PURE__ */ c({
 	}), p(t);
 };
 //#endregion
-export { M as a, I as i, G as n, j as o, z as r, K as t };
+export { P as a, R as i, q as n, N as o, V as r, J as t };

package/package.json

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

package/src/components/tabs.css

@@ -32,7 +32,7 @@
 
   .fg-tabs__tab:hover { color: var(--color-text); }
   .fg-tabs__tab[aria-selected="true"] {
-    border-bottom-color: var(--color-link);
+    border-bottom-color: var(--color-accent);
     color: var(--color-text);
   }
 
@@ -44,10 +44,15 @@
     font-weight: var(--weight-medium);
   }
 
-  .fg-tabs__tab:focus-visible, .fg-tabs__panel:focus-visible {
+  /* Inset: the tab list scrolls sideways, which would clip an outer ring. */
+  .fg-tabs__tab:focus-visible {
     outline: 2px solid var(--color-focus);
     outline-offset: -2px;
   }
+  .fg-tabs__panel:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+  }
 
   @media (max-width: 640px) {
     .fg-tabs__tab { min-height: var(--control-lg); }

package/src/components.css

@@ -24,16 +24,16 @@
   .fg-code-block__header {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: var(--space-3);
     min-height: 2.5rem;
-    padding: 0.35rem 0.75rem;
+    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));
-    font-size: 0.75rem;
+    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__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; }
+  .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;
     align-items: center;
@@ -41,9 +41,9 @@
     gap: 0.4rem;
     min-width: var(--control-lg);
     min-height: var(--control-lg);
-    padding: 0.25rem 0.4rem;
+    padding: var(--space-1) 0.4rem;
     border: 0;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-inline);
     background: transparent;
     color: inherit;
     font: inherit;
@@ -51,16 +51,18 @@
   }
   .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, .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; }
+  /* Inset: the code block clips its content. */
+  .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 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[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: 0.5rem 0.75rem; font-size: 0.75rem; }
+  .fg-code-block__status:not(:empty) { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
   .fg-code-block[data-variant="compact"] {
     position: relative;
     display: grid;
@@ -120,7 +122,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
     color: var(--color-button-text);
     background: var(--color-button-bg);
     box-shadow: none;
@@ -165,19 +167,19 @@
   .fg-button[data-size="sm"],
   .fg-input[data-size="sm"],
   .fg-select[data-size="sm"] {
-    font-size: 0.8125rem;
+    font-size: var(--text-sm);
   }
 
   .fg-button[data-size="md"],
   .fg-input[data-size="md"],
   .fg-select[data-size="md"] {
-    font-size: 0.875rem;
+    font-size: var(--text-md);
   }
 
   .fg-button[data-size="lg"],
   .fg-input[data-size="lg"],
   .fg-select[data-size="lg"] {
-    font-size: 1rem;
+    font-size: var(--text-lg);
   }
 
   .fg-button[data-size="sm"] { min-height: var(--control-sm); }
@@ -191,20 +193,20 @@
   .fg-select[data-size="lg"] { height: var(--control-lg); }
 
   .fg-button[data-size="sm"] { padding: 0 0.6rem; }
-  .fg-button[data-size="md"] { padding: 0 0.75rem; }
-  .fg-button[data-size="lg"] { padding: 0 1rem; }
+  .fg-button[data-size="md"] { padding: 0 var(--space-3); }
+  .fg-button[data-size="lg"] { padding: 0 var(--space-4); }
 
   /* Deprecated UiButton aliases retained for existing consumers. */
   .fg-button[data-size="compact"] {
     min-height: var(--control-md);
     padding: 0 0.7rem;
-    font-size: 0.8125rem;
+    font-size: var(--text-sm);
   }
 
   .fg-button[data-size="default"] {
     min-height: var(--control-lg);
-    padding: 0 1rem;
-    font-size: 1rem;
+    padding: 0 var(--space-4);
+    font-size: var(--text-lg);
   }
 
   .fg-button[data-variant="secondary"] {
@@ -241,7 +243,7 @@
   .fg-button[data-variant="text"] {
     height: auto;
     min-height: auto;
-    padding: 0.25rem;
+    padding: var(--space-1);
     color: var(--color-link);
     background: transparent;
     text-decoration: underline;
@@ -323,9 +325,11 @@
       cursor: pointer;
     }
     .fg-select:not([multiple]):not([size]) option:checked { color: var(--color-row-selected-text); background: var(--color-row-selected); }
-    .fg-select:not([multiple]):not([size]) option:hover:not(:disabled), .fg-select:not([multiple]):not([size]) option:focus-visible { background: var(--color-row-hover); outline: 2px solid var(--color-focus); outline-offset: -2px; }
+    /* Pointer hover only fills the row; the focus ring marks the keyboard position. Inset: the picker scrolls. */
+    .fg-select:not([multiple]):not([size]) option:hover:not(:disabled) { background: var(--color-row-hover); }
+    .fg-select:not([multiple]):not([size]) option:focus-visible { background: var(--color-row-hover); outline: 2px solid var(--color-focus); outline-offset: -2px; }
     .fg-select:not([multiple]):not([size]) option:disabled { color: var(--color-muted); opacity: 0.58; cursor: not-allowed; }
-    .fg-select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--color-link); }
+    .fg-select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--color-accent); }
     @media (pointer: coarse) {
       .fg-select:not([multiple]):not([size]) option { min-height: var(--control-lg); }
     }
@@ -335,7 +339,7 @@
   .fg-input[data-size="md"] { padding: 0 0.65rem; }
   .fg-input[data-size="lg"] { padding: 0 0.7rem; }
 
-  .fg-select[data-size="sm"] { padding: 0 1.6rem 0 0.5rem; }
+  .fg-select[data-size="sm"] { padding: 0 1.6rem 0 var(--space-2); }
   .fg-select[data-size="md"] { padding: 0 1.7rem 0 0.6rem; }
   .fg-select[data-size="lg"] { padding: 0 1.8rem 0 0.7rem; }
 
@@ -357,14 +361,14 @@
 
   .fg-field__label {
     color: var(--color-text);
-    font-size: 0.8125rem;
+    font-size: var(--text-sm);
     font-weight: 600;
   }
 
   .fg-field__description,
   .fg-field__error {
     margin: 0;
-    font-size: 0.8125rem;
+    font-size: var(--text-sm);
   }
 
   .fg-field__description { color: var(--color-muted); }
@@ -409,21 +413,21 @@
     min-height: var(--control-sm);
     align-items: center;
     gap: 0.45rem;
-    font-size: 0.8125rem;
+    font-size: var(--text-sm);
   }
 
   .fg-checkbox[data-size="md"] {
     min-height: var(--control-md);
     align-items: center;
     gap: 0.55rem;
-    font-size: 0.875rem;
+    font-size: var(--text-md);
   }
 
   .fg-checkbox[data-size="lg"] {
     min-height: var(--control-lg);
     align-items: center;
     gap: 0.65rem;
-    font-size: 1rem;
+    font-size: var(--text-lg);
   }
 
   .fg-checkbox[data-size] .fg-checkbox__control { margin-top: 0; }
@@ -431,7 +435,7 @@
   .fg-checkbox[data-size="sm"] .fg-checkbox__control {
     width: 1rem;
     height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-inline);
   }
 
   .fg-checkbox[data-size="md"] .fg-checkbox__control {
@@ -451,14 +455,14 @@
   .fg-radio-card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    gap: 0.75rem;
+    gap: var(--space-3);
   }
 
   .fg-radio-card {
     position: relative;
     display: block;
     min-width: 0;
-    padding: 0.75rem;
+    padding: var(--space-3);
     overflow: hidden;
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-panel);
@@ -474,9 +478,10 @@
     border-color: var(--color-border);
   }
 
+  /* Checked choices use the accent, as the checkbox does; blue stays for links and focus. */
   .fg-radio-card[data-state="checked"] {
-    border-color: var(--color-link);
-    outline: 1px solid var(--color-link);
+    border-color: var(--color-accent);
+    outline: 1px solid var(--color-accent);
     outline-offset: -2px;
   }
 
@@ -488,15 +493,15 @@
   .fg-radio-card__content {
     display: grid;
     min-width: 0;
-    gap: 0.25rem;
+    gap: var(--space-1);
     padding-right: 1.75rem;
   }
 
   .fg-radio-card__indicator {
     position: absolute;
     z-index: 1;
-    top: 0.75rem;
-    right: 0.75rem;
+    top: var(--space-3);
+    right: var(--space-3);
     display: block;
     width: 1rem;
     height: 1rem;
@@ -506,7 +511,7 @@
   }
 
   .fg-radio-card[data-state="checked"] .fg-radio-card__indicator {
-    border: 0.3rem solid var(--color-link);
+    border: 0.3rem solid var(--color-accent);
   }
 
   .fg-badge {
@@ -518,7 +523,7 @@
     padding: 0.18rem 0.48rem;
     color: var(--color-muted);
     background: var(--color-surface-muted);
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     font-weight: 500;
     line-height: 1.25;
   }
@@ -532,8 +537,8 @@
   .fg-alert {
     display: flex;
     align-items: flex-start;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-control);
     color: var(--color-text);
@@ -557,8 +562,8 @@
     box-shadow: none;
   }
 
-  .fg-surface[data-padding="compact"] { padding: 0.75rem; }
-  .fg-surface[data-padding="default"] { padding: 1rem; }
+  .fg-surface[data-padding="compact"] { padding: var(--space-3); }
+  .fg-surface[data-padding="default"] { padding: var(--space-4); }
 
   .fg-card {
     min-width: 0;
@@ -800,8 +805,8 @@
     top: 50%;
     left: 50%;
     display: grid;
-    width: min(32rem, calc(100vw - 2rem));
-    max-height: min(42rem, calc(100vh - 2rem));
+    width: min(32rem, calc(100vw - var(--space-8)));
+    max-height: min(42rem, calc(100vh - var(--space-8)));
     overflow: hidden;
     transform: translate(-50%, -50%);
     border: 1px solid var(--color-border-subtle);
@@ -816,8 +821,8 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem;
+    gap: var(--space-4);
+    padding: var(--space-4);
   }
 
   .fg-dialog__header { border-bottom: 1px solid var(--color-border-subtle); }
@@ -831,21 +836,21 @@
   }
 
   .fg-dialog__description {
-    margin: 0.25rem 0 0;
+    margin: var(--space-1) 0 0;
     color: var(--color-muted);
-    font-size: 0.875rem;
+    font-size: var(--text-md);
   }
 
   .fg-dialog__body {
     min-height: 0;
     overflow: auto;
-    padding: 1rem;
+    padding: var(--space-4);
   }
 
   .fg-dialog__close {
     display: inline-grid;
     flex: none;
-    width: 2.75rem;
+    width: var(--control-lg);
     min-height: var(--control-lg);
     padding: 0;
     place-items: center;
@@ -895,7 +900,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      max-height: calc(100vh - 1rem);
+      max-height: calc(100vh - var(--space-4));
       transform: none;
       border-radius: var(--radius-panel) var(--radius-panel) 0 0;
     }

package/src/site.css

@@ -1,7 +1,113 @@
 /* Shared chrome and page helpers for the project sites. Use with
  * @filipgutica/ui/themes/graphite-indigo.css, which supplies the type, space, and
  * page-measure roles this file reads. Nothing here targets site-specific markup. */
+/* Element defaults for a docs page inside .fg-site-docs. They sit in the base layer, so
+ * library components and the site's own rules win, as long as the site declares the layer
+ * order first (Tailwind's import does, or write @layer base, components, utilities;).
+ * Pages without .fg-site-docs get none of them. */
+@layer base {
+  html:has(.fg-site-docs) { scroll-padding-top: var(--space-6); }
+  body:has(.fg-site-docs) {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-text);
+    font: var(--text-md) / var(--leading) var(--font-ui);
+    -webkit-font-smoothing: antialiased;
+  }
+  .fg-site-docs,
+  .fg-site-docs *,
+  .fg-site-docs *::before,
+  .fg-site-docs *::after { box-sizing: border-box; }
+  .fg-site-docs :where(h1, h2, h3, p, dl, dd, figure) { margin: 0; }
+  .fg-site-docs :where(h1, h2, h3) {
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+    text-wrap: balance;
+  }
+  .fg-site-docs :where(h1) { max-width: 22ch; font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
+  .fg-site-docs :where(h2) { font-size: var(--text-xl); }
+  .fg-site-docs :where(p) { max-width: var(--measure); }
+  .fg-site-docs :where(code, kbd, pre) { font-family: var(--font-mono); }
+  .fg-site-docs :where(a) { color: var(--color-link); text-underline-offset: 0.18em; }
+  .fg-site-docs :where(kbd) {
+    display: inline-block;
+    padding: 0 var(--space-1);
+    border: 1px solid var(--color-border);
+    border-bottom-width: 2px;
+    border-radius: var(--radius-inline);
+    background: var(--color-surface);
+    font-size: var(--text-xs);
+    white-space: nowrap;
+  }
+  .fg-site-docs :where(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+}
+
 @layer components {
+  /* Docs shell: header across the top, the --sidebar rail beside main, and the footer
+   * on the frame edges. Header, rail, main, and footer are direct children. */
+  .fg-site-docs {
+    display: grid;
+    grid-template-columns: var(--sidebar) minmax(0, 1fr);
+    column-gap: var(--space-8);
+    max-width: calc(var(--page-max) + var(--sidebar) + var(--space-8) + var(--space-12));
+    margin-inline: auto;
+    padding-inline: var(--space-6);
+  }
+  .fg-site-docs > .fg-site-header {
+    --site-frame: 100%;
+    --site-gutter: 0px;
+    grid-column: 1 / -1;
+    min-width: 0;
+  }
+  .fg-site-docs > main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-12);
+    min-width: 0;
+    padding-block: var(--space-8) var(--space-16);
+  }
+  .fg-site-docs > .fg-site-footer { grid-column: 1 / -1; }
+
+  /* Footer: an attribution link at the start, project links in a nav at the end. */
+  .fg-site-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0 var(--space-5);
+    padding-block: var(--space-6) var(--space-8);
+    border-top: 1px solid var(--color-border-subtle);
+    color: var(--color-muted);
+    font-size: var(--text-sm);
+  }
+  .fg-site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
+  .fg-site-footer a {
+    display: inline-flex;
+    min-height: var(--control-lg);
+    align-items: center;
+    color: var(--color-muted);
+    text-decoration: none;
+  }
+  .fg-site-footer a:hover { color: var(--color-text); text-decoration: underline; }
+
+  /* Legend: a dl of what a capture shows, with one div per dt and dd pair. */
+  .fg-site-legend {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--sidebar), 100%), 1fr));
+    gap: 0 var(--space-6);
+    margin: 0;
+    font-size: var(--text-sm);
+  }
+  .fg-site-legend > div {
+    display: grid;
+    align-content: start;
+    gap: var(--space-1);
+    padding-block: var(--space-3);
+    border-top: 1px solid var(--color-border-subtle);
+  }
+  .fg-site-legend dt { font-family: var(--font-mono); font-weight: var(--weight-medium); }
+  .fg-site-legend dd { margin: 0; color: var(--color-muted); }
+
   /* A centered frame. The header uses the same edges as the page below it.
    * Set --site-frame on the header or a frame to change its width. */
   .fg-site-frame,
@@ -129,15 +235,17 @@
   .fg-site-appearance__choice:hover { color: var(--color-text); background: var(--color-row-hover); }
   .fg-site-appearance__choice[aria-pressed="true"] { color: var(--color-text); background: var(--color-row-selected); }
 
+  /* Focus is a 2px outline outside the control, which forced-colors mode keeps. An
+   * inset ring is used only where a scrolling ancestor would clip an outer one. */
   .fg-site-header a:focus-visible,
   .fg-site-projects__trigger:focus-visible,
   .fg-site-appearance__choice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
-  .fg-site-appearance__choice:focus-visible { outline-offset: -2px; }
+  /* Inset: the desktop rail and the phone drawer scroll. */
   .fg-site-nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
 
   /* Section rail (UiSiteNav). The page grid places it; on desktop it stays in view
-   * beside the article. At 800px and below it becomes a Menu disclosure, replaced
-   * by a drawer once the page is interactive. */
+   * beside the article. At 800px and below it becomes a disclosure named by the
+   * label prop, replaced by a drawer once the page is interactive. */
   .fg-site-rail {
     position: sticky;
     top: var(--space-6);
@@ -166,9 +274,9 @@
   .fg-site-rail__group-label { margin-block-end: var(--space-1); }
 
   /* Capture panel (UiCapture): tabs in the header, the capture as the body, and the
-   * command and caption as the footer. The site owns terminal colors and sets the
-   * screen background with --site-capture-bg on :root, which also reaches the
-   * full-size viewer. Nothing clips the panel, so focus rings inside it stay whole. */
+   * command and caption as the footer. The screen uses a dark terminal palette by
+   * default. A site can set --site-capture-bg and --t* values on :root, which also
+   * reach the full-size viewer. Nothing clips the panel, so focus rings inside it stay whole. */
   .fg-capture {
     position: relative;
     min-width: 0;
@@ -178,8 +286,9 @@
   }
   .fg-capture .fg-tabs__list { width: 100%; margin-block-end: 0; padding-inline: var(--space-2); }
   .fg-capture .fg-tabs__tab { min-height: var(--control-lg); }
-  /* The Full size control sits at the end of the tab row; the list reserves its width. */
-  .fg-capture[data-enhanced="true"] .fg-tabs__list { padding-inline-end: calc(var(--space-2) + 6.5rem); }
+  /* The Full size control sits at the end of the tab row. The list's margin, not its
+   * padding, reserves the control's width, so the scroll area and divider end before it. */
+  .fg-capture[data-enhanced="true"] .fg-tabs__list { width: auto; margin-inline-end: calc(var(--space-2) + 6.5rem); }
   .fg-capture__full {
     position: absolute;
     top: 0;
@@ -198,6 +307,7 @@
   }
   .fg-capture__full:hover { color: var(--color-text); }
   .fg-capture__full svg { width: 14px; height: 14px; flex: none; }
+  /* Inset: the capture preview below would cover an outset ring. */
   .fg-capture__full:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   /* Without JavaScript every capture is listed under its own heading. */
   .fg-capture .fg-tabs__heading { margin: 0; padding: var(--space-3) var(--space-4); }
@@ -216,7 +326,59 @@
     overflow-x: auto;
     background: var(--site-capture-bg, var(--color-code));
   }
+  /* Terminal markup gets the dark default; a plain <pre> keeps the code background its text expects. */
+  .fg-capture__screen:has(> .term) { background: var(--site-capture-bg, var(--t-bg, #131316)); }
   .fg-capture__screen > * { width: max-content; margin: 0; }
+  /* Terminal colors for checked-in capture markup: .term and the ANSI classes the capture
+   * converter emits. Each color reads the site's --t* value first, so a site palette on
+   * :root still wins, and these defaults apply only where a site sets none. */
+  .fg-capture__screen .term {
+    padding: var(--space-4);
+    color: var(--t-fg, #e6e6ea);
+    font: var(--weight-regular) var(--text-sm) / 1 var(--font-mono);
+    font-variant-ligatures: none;
+    tab-size: 8;
+  }
+  .fg-capture__screen .term i { display: inline-block; width: 1ch; overflow: visible; font-style: normal; }
+  .fg-capture__screen .tf0 { color: var(--t0, #2b2b31); }
+  .fg-capture__screen .tf1 { color: var(--t1, #f0776c); }
+  .fg-capture__screen .tf2 { color: var(--t2, #4cc38a); }
+  .fg-capture__screen .tf3 { color: var(--t3, #e2a54b); }
+  .fg-capture__screen .tf4 { color: var(--t4, #7d97ff); }
+  .fg-capture__screen .tf5 { color: var(--t5, #c792ea); }
+  .fg-capture__screen .tf6 { color: var(--t6, #5fd3d9); }
+  .fg-capture__screen .tf7 { color: var(--t7, #c8c8d0); }
+  .fg-capture__screen .tf8 { color: var(--t8, #a0a0ab); }
+  .fg-capture__screen .tf9 { color: var(--t9, #ff8f85); }
+  .fg-capture__screen .tf10 { color: var(--t10, #6fd3a0); }
+  .fg-capture__screen .tf11 { color: var(--t11, #e8b56a); }
+  .fg-capture__screen .tf12 { color: var(--t12, #7d97ff); }
+  .fg-capture__screen .tf13 { color: var(--t13, #d9a8f0); }
+  .fg-capture__screen .tf14 { color: var(--t14, #8ee3e8); }
+  .fg-capture__screen .tf15 { color: var(--t15, #ffffff); }
+  .fg-capture__screen .tb0 { background: var(--t0, #2b2b31); }
+  .fg-capture__screen .tb1 { background: var(--t1, #f0776c); }
+  .fg-capture__screen .tb2 { background: var(--t2, #4cc38a); }
+  .fg-capture__screen .tb3 { background: var(--t3, #e2a54b); }
+  .fg-capture__screen .tb4 { background: var(--t4, #7d97ff); }
+  .fg-capture__screen .tb5 { background: var(--t5, #c792ea); }
+  .fg-capture__screen .tb6 { background: var(--t6, #5fd3d9); }
+  .fg-capture__screen .tb7 { background: var(--t7, #c8c8d0); }
+  .fg-capture__screen .tb8 { background: var(--t8, #a0a0ab); }
+  .fg-capture__screen .tb9 { background: var(--t9, #ff8f85); }
+  .fg-capture__screen .tb10 { background: var(--t10, #6fd3a0); }
+  .fg-capture__screen .tb11 { background: var(--t11, #e8b56a); }
+  .fg-capture__screen .tb12 { background: var(--t12, #7d97ff); }
+  .fg-capture__screen .tb13 { background: var(--t13, #d9a8f0); }
+  .fg-capture__screen .tb14 { background: var(--t14, #8ee3e8); }
+  .fg-capture__screen .tb15 { background: var(--t15, #ffffff); }
+  .fg-capture__screen .tf-dim { color: var(--t-dim, #a0a0ab); }
+  .fg-capture__screen .tf-bg { color: var(--t-bg, #131316); }
+  .fg-capture__screen .tb-fg { background: var(--t-fg, #e6e6ea); }
+  .fg-capture__screen .tbold { font-weight: var(--weight-semibold); }
+  .fg-capture__screen .tital { font-style: italic; }
+  .fg-capture__screen .tul { text-decoration: underline; text-underline-offset: 0.18em; }
+
   .fg-capture__screen[data-fit] { overflow: hidden; }
   .fg-capture__screen[data-fit] > * { transform: scale(var(--capture-scale, 1)); transform-origin: top left; }
   .fg-capture__expand {
@@ -240,8 +402,9 @@
     line-height: var(--leading);
   }
   .fg-capture__caption > code { color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
-  .fg-capture__screen:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
-  .fg-capture__expand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
+  /* Inset: the enhanced panel clips its content. */
+  .fg-capture__screen:focus-visible,
+  .fg-capture__expand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   .fg-dialog__content.fg-capture-viewer {
     width: calc(100vw - var(--space-8));
     max-width: var(--page-max);
@@ -299,6 +462,7 @@
   }
   .fg-command-list__copy:hover { color: var(--color-text); background: var(--color-row-hover); }
   .fg-command-list__copy svg { width: 1rem; height: 1rem; }
+  /* Inset: the table scrolls sideways on larger screens. */
   .fg-command-list__copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   .fg-command-list__status:not(:empty) { display: block; padding-top: var(--space-2); font-size: var(--text-sm); }
 
@@ -401,6 +565,8 @@
   }
   /* Keep in sync with MOBILE_QUERY in UiSiteNav.vue. */
   @media (max-width: 800px) {
+    .fg-site-docs { grid-template-columns: minmax(0, 1fr); }
+    .fg-site-docs > main { gap: var(--space-8); padding-top: var(--space-6); }
     .fg-site-rail {
       position: static;
       max-height: none;
@@ -421,16 +587,28 @@
     }
     .fg-site-rail__summary::-webkit-details-marker { display: none; }
     .fg-site-rail__summary:hover { color: var(--color-text); background: var(--color-row-hover); }
-    .fg-site-rail__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+    .fg-site-rail__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
     .fg-site-rail__menu > .fg-site-rail__content { padding-block: var(--space-4); }
     .fg-site-rail__menu .fg-site-rail__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     .fg-site-rail__menu .fg-site-rail__group-label { grid-column: 1 / -1; }
     .fg-site-rail__nav a { min-height: var(--control-lg); }
+    /* The drawer title already shows the label; the heading still names the nav. */
+    .fg-drawer__content .fg-site-rail__label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
   }
   @media (max-width: 640px) {
+    .fg-site-docs { padding-inline: var(--space-4); }
+    /* Docs-shell pages keep one header row on phones and repeat these links in their footer. */
+    .fg-site-docs .fg-site-header__links { display: none; }
     .fg-dialog__content.fg-capture-viewer { width: 100%; max-width: none; }
     /* Phones keep the icon; the accessible name still says Full size. */
-    .fg-capture[data-enhanced="true"] .fg-tabs__list { padding-inline-end: calc(var(--space-2) + var(--control-lg)); }
+    .fg-capture[data-enhanced="true"] .fg-tabs__list { margin-inline-end: calc(var(--space-2) + var(--control-lg)); }
     .fg-capture__full { min-width: var(--control-lg); justify-content: center; }
     .fg-capture__full-label { display: none; }
     .fg-command-list__table,

package/src/theme.css

@@ -75,6 +75,7 @@
   --color-warning-surface: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
   --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
   --color-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
+  --radius-inline: 0.25rem;
   --radius-control: 0.375rem;
   --radius-panel: 0.5rem;
   --radius-pill: 999px;
@@ -147,6 +148,7 @@
   --color-ui-warning: var(--color-warning);
   --color-ui-success: var(--color-success);
   --color-ui-info: var(--color-info);
+  --radius-ui-inline: var(--radius-inline);
   --radius-ui-control: var(--radius-control);
   --radius-ui-panel: var(--radius-panel);
 }

package/src/themes/graphite-indigo.css

@@ -41,7 +41,7 @@
   --color-syntax-attribute: var(--color-syntax-number);
   --color-error: #c7372d;
   --color-warning: #86532e;
-  --color-success: #1f8a5b;
+  --color-success: #157249;
   --color-info: #175cd3;
   --color-progress: var(--color-accent);
   --color-error-surface: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
@@ -64,7 +64,7 @@
 :root.dark {
   color-scheme: dark;
   --color-bg: #151619;
-  --color-surface: #191a1d;
+  --color-surface: #0e0f12;
   --color-surface-raised: #212226;
   --color-surface-muted: #303238;
   --color-text: #f4f5f8;