@filipgutica/ui 1.11.2 → 1.12.0

package/README.md

@@ -32,8 +32,16 @@ Import the styles from your application stylesheet:
 @import "@filipgutica/ui/components.css";
 ```
 
-The third import adds Graphite Indigo, the palette of the project sites. Leave
-it out to keep the base theme from `theme.css`, with blue actions.
+The third import adds Graphite Indigo's site typography and layout roles. Both
+the base theme and Graphite Indigo use neutral surfaces, ink primary buttons,
+and the ui project hue for checked and selected states.
+
+`theme.css` loads the package's own IBM Plex Sans and IBM Plex Mono latin woff2
+files (400, 500, 600), with `font-display: swap` and system fallbacks. It makes
+no remote font requests. The files come from Fontsource 5.3.0 and ship under
+their included [Sans OFL](src/fonts/OFL-IBM-Plex-Sans.txt) and
+[Mono OFL](src/fonts/OFL-IBM-Plex-Mono.txt) licences. `fonts.css` and `fonts/*`
+are also exported for applications that import assets separately.
 
 ## Use
 
@@ -176,15 +184,44 @@ import read from './captures/read.html?raw'
 
 `UiSiteNav` renders a labelled list of route rows in optional `groups`. Links to
 `#id` sections track the reader's position with `useActiveSection` and get
-`aria-current="location"`, a text-only marker. An item with `current: true` gets
+`aria-current="location"`, an accent bar without a fill. 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 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
+title all show `label`. When an item has `current: true`, the phone control
+also shows that page's name. Otherwise it shows the current section's name.
+The control's accessible name is its visible text, so it changes with the
+current page or section. The drawer closes on
+navigation and focuses the destination section, and focus follows the visible control across the
 breakpoint.
 
+Project sites set `--color-project` on `:root` and `:root.dark` for their hue.
+Set `--color-project-dark` to the dark variant in both appearances, so prompts
+and capture tab underlines stay readable on terminal plates. The default hue
+belongs to ui. Primary buttons stay ink on paper in both appearances.
+
+Compact shell or plain-text `UiCodeBlock` rows and untitled shell blocks are
+terminal commands. Their CSS prompt stays out of copied and accessible text.
+Typed source samples, including compact samples, use theme-matched syntax wells.
+Default blocks with a title are source samples, including shell scripts.
+
+Use `.fg-site-hero` on a tool-home intro section. Its direct `h1` uses the
+56px display size (34px on phones). Wrap the lede paragraphs in
+`.fg-site-hero__lede`. Wrap the install block, metadata, and facts in
+`.fg-site-hero__aside`; use `.fg-site-meta` for the install label above the code.
+
+At 1024px and above, the hero uses `minmax(0, 1.1fr) minmax(0, 1fr)` columns,
+`var(--space-8)` between columns, and top alignment. The `h1` spans both columns
+in row 1. The lede and aside occupy columns 1 and 2 in row 2. All other children,
+including captures and legends, span both columns afterward in source order.
+Below 1024px all children stack in source order. Explicit grid lines and
+`grid-auto-columns: minmax(0, 1fr)` preserve the split if an unlayered site rule
+overrides the column template. Remove that override to retain the 1.1:1 ratio.
+This is the wide exception to the phone/tablet breakpoints; the separate
+design-language update records it in `DESIGN.md`.
+
 `UiCapture` shows one panel: tabs in the header, the capture scaled to the panel
 width, and the `command` and `caption` slot below. `html` is trusted, checked-in
 terminal markup with a single root element. The Full size button at the end of
@@ -208,7 +245,8 @@ the clipboard is unavailable. At 640px and below each command stacks above its
 description and wraps.
 
 `site.css` also includes page helpers: `.fg-site-steps` for an ordered list with
-numbered circles, `.fg-site-facts` for an inline `dl` of short label and value
+numbered markers (each `li` holds an `h3` title and short paragraphs; mark the last
+step's outcome with `.fg-site-steps__result`), `.fg-site-facts` for an inline `dl` of short label and value
 pairs whose links get a `--control-lg` hit area at 640px and below,
 `.fg-site-definitions` for a two-column `dl` of `dt` and `dd` that stacks on
 phones and keeps `code` such as `--all` on one line, `.fg-site-sr-only` for

package/dist/index.js

@@ -1,6 +1,6 @@
 import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-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, 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";
+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 D, useSlots as O, watch as ne, withCtx as k } from "vue";
+import { CheckboxIndicator as re, CheckboxRoot as A, Primitive as j, ProgressIndicator as M, ProgressRoot as N, RadioGroupItem as P, RadioGroupRoot as F, SliderRange as I, SliderRoot as L, SliderThumb as R, SliderTrack as z, Toggle as B } from "reka-ui";
 //#region src/components/UiCard.vue?vue&type=script&setup=true&lang.ts
 var V = { class: "fg-card" }, H = {
 	key: 0,
@@ -21,13 +21,13 @@ var V = { class: "fg-card" }, H = {
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = D();
+		let t = O();
 		return (n, r) => (y(), u("div", V, [
 			e.title || t.title || t.actions ? (y(), u("header", H, [e.title || t.title ? (y(), c(C(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: O(() => [S(n.$slots, "title", {}, () => [f(w(e.title), 1)])]),
+				default: k(() => [S(n.$slots, "title", {}, () => [f(w(e.title), 1)])]),
 				_: 3
 			})) : l("", !0), t.actions ? (y(), u("div", U, [S(n.$slots, "actions")])) : l("", !0)])) : l("", !0),
 			t.default ? (y(), u("div", W, [S(n.$slots, "default")])) : l("", !0),
@@ -35,6 +35,7 @@ var V = { class: "fg-card" }, H = {
 		]));
 	}
 }), q = [
+	"data-command",
 	"data-wrap",
 	"data-line-numbers",
 	"data-variant"
@@ -81,7 +82,14 @@ var V = { class: "fg-card" }, H = {
 		variant: { default: "default" }
 	},
 	setup(t) {
-		let n = te(), r = ee(""), i = s(() => n.value ?? t.code.split("\n").map((e) => [{ content: e }])), a = {
+		let n = s(() => {
+			let e = t.language.trim().toLowerCase(), n = [
+				"bash",
+				"sh",
+				"shell"
+			].includes(e);
+			return t.variant === "compact" ? n || e === "text" : n && !t.title;
+		}), r = te(), i = ee(""), a = s(() => r.value ?? t.code.split("\n").map((e) => [{ content: e }])), c = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -94,35 +102,36 @@ var V = { class: "fg-card" }, H = {
 			sh: "bash",
 			shell: "bash"
 		};
-		re(() => [t.code, t.language], async ([e, t], i, o) => {
-			let s = !1;
-			o(() => {
-				s = !0;
-			}), n.value = void 0, r.value = "";
-			let c = t.trim().toLowerCase(), l = Object.hasOwn(a, c) ? a[c] : void 0;
+		ne(() => [t.code, t.language], async ([e, t], n, a) => {
+			let o = !1;
+			a(() => {
+				o = !0;
+			}), r.value = void 0, i.value = "";
+			let s = t.trim().toLowerCase(), l = Object.hasOwn(c, s) ? c[s] : void 0;
 			if (l) try {
 				let { highlightCode: t } = await import("./code-highlight-BuTmXL3w.js");
-				if (s) return;
-				let r = await t({
+				if (o) return;
+				let n = await t({
 					code: e,
 					language: l
 				});
-				if (s) return;
+				if (o) return;
 				let i = e.split("\n");
-				n.value = i.map((e, t) => {
-					let n = r[t] ?? [];
-					return e.endsWith("\r") ? [...n, { content: "\r" }] : n;
+				r.value = i.map((e, t) => {
+					let r = n[t] ?? [];
+					return e.endsWith("\r") ? [...r, { content: "\r" }] : r;
 				});
 			} catch {
-				s || (r.value = "Syntax highlighting unavailable. Showing plain text.");
+				o || (i.value = "Syntax highlighting unavailable. Showing plain text.");
 			}
 		}, { immediate: !0 });
-		let { copied: c, pending: p, error: m, copy: h } = e({
+		let { copied: p, pending: m, error: h, copy: g } = e({
 			unavailableMessage: "Clipboard unavailable. Select the code to copy it.",
 			failureMessage: "Could not copy. Select the code to copy it."
-		}), g = s(() => c.value && !m.value), _ = s(() => t.variant === "compact" && g.value && !r.value), b = s(() => m.value ? m.value : t.variant === "compact" && r.value ? c.value ? `Code copied to clipboard. ${r.value}` : r.value : c.value ? "Code copied to clipboard." : r.value), C = () => h(t.code);
-		return (e, n) => (y(), u("div", {
+		}), _ = s(() => p.value && !h.value), b = s(() => t.variant === "compact" && _.value && !i.value), C = s(() => h.value ? h.value : t.variant === "compact" && i.value ? p.value ? `Code copied to clipboard. ${i.value}` : i.value : p.value ? "Code copied to clipboard." : i.value), E = () => g(t.code);
+		return (e, r) => (y(), u("div", {
 			class: "fg-code-block",
+			"data-command": n.value || void 0,
 			"data-wrap": t.wrap,
 			"data-line-numbers": t.lineNumbers,
 			"data-variant": t.variant
@@ -134,34 +143,34 @@ var V = { class: "fg-card" }, H = {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
-					disabled: T(p),
+					disabled: T(m),
 					"aria-label": "Copy code",
-					title: t.variant === "compact" ? g.value ? "Copied" : "Copy code" : void 0,
-					onClick: C
-				}, [(y(), u("svg", oe, [t.variant === "compact" && g.value ? (y(), u("path", se)) : (y(), u(o, { key: 1 }, [n[0] ||= d("rect", {
+					title: t.variant === "compact" ? _.value ? "Copied" : "Copy code" : void 0,
+					onClick: E
+				}, [(y(), u("svg", oe, [t.variant === "compact" && _.value ? (y(), u("path", se)) : (y(), u(o, { key: 1 }, [r[0] ||= d("rect", {
 					x: "8",
 					y: "8",
 					width: "12",
 					height: "13",
 					rx: "2"
-				}, null, -1), n[1] ||= d("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))])), t.variant === "default" ? (y(), u("span", ce, w(g.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, ae)) : l("", !0)])
+				}, null, -1), r[1] ||= d("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))])), t.variant === "default" ? (y(), u("span", ce, w(_.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, ae)) : l("", !0)])
 			])) : l("", !0),
 			d("pre", {
 				class: "fg-code-block__pre",
 				tabindex: "0",
 				"aria-label": t.title || `${t.language} code`
-			}, [d("code", null, [(y(!0), u(o, null, x(i.value, (e, n) => (y(), u("span", {
+			}, [d("code", null, [(y(!0), u(o, null, x(a.value, (e, n) => (y(), u("span", {
 				key: n,
 				class: "fg-code-block__line"
 			}, [t.lineNumbers ? (y(), u("span", ue, w(n + 1), 1)) : l("", !0), d("span", de, [(y(!0), u(o, null, x(e, (e, t) => (y(), u("span", {
 				key: t,
 				style: v({ color: e.color })
-			}, w(e.content), 5))), 128)), f(w(n < i.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, le),
+			}, w(e.content), 5))), 128)), f(w(n < a.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, le),
 			d("span", {
 				class: "fg-code-block__status",
 				role: "status",
-				"data-state": _.value ? "success" : void 0
-			}, w(b.value), 9, fe)
+				"data-state": b.value ? "success" : void 0
+			}, w(C.value), 9, fe)
 		], 8, q));
 	}
 }), me = /* @__PURE__ */ m({
@@ -174,7 +183,7 @@ var V = { class: "fg-card" }, H = {
 			"data-tone": e.tone,
 			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: k(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
@@ -187,7 +196,7 @@ var V = { class: "fg-card" }, H = {
 			class: "fg-badge",
 			"data-tone": e.tone
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: k(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone"]));
 	}
@@ -219,8 +228,8 @@ var V = { class: "fg-card" }, H = {
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: O(() => [p(T(k), { class: "fg-checkbox__indicator" }, {
-				default: O(() => [...n[0] ||= [f("✓", -1)]]),
+			default: k(() => [p(T(re), { class: "fg-checkbox__indicator" }, {
+				default: k(() => [...n[0] ||= [f("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
@@ -274,7 +283,7 @@ var V = { class: "fg-card" }, H = {
 	__name: "UiFigure",
 	props: { number: { default: () => void 0 } },
 	setup(e) {
-		let t = D(), n = E(), r = () => e.number !== void 0 || !!t.caption;
+		let t = O(), n = E(), r = () => e.number !== void 0 || !!t.caption;
 		return (t, i) => (y(), u("figure", we, [d("div", {
 			class: "fg-figure__plate",
 			role: "region",
@@ -356,7 +365,7 @@ var V = { class: "fg-card" }, H = {
 			max: t.value.max,
 			"model-value": t.value.value
 		}, {
-			default: O(() => [p(T(M), {
+			default: k(() => [p(T(M), {
 				class: "fg-progress__indicator",
 				style: v({ transform: `translateX(-${100 - n.value}%)` })
 			}, null, 8, ["style"])]),
@@ -382,7 +391,7 @@ var V = { class: "fg-card" }, H = {
 			disabled: e.disabled,
 			value: e.value
 		}, {
-			default: O(() => [n[0] ||= d("span", {
+			default: k(() => [n[0] ||= d("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
 			}, null, -1), d("span", Me, [S(t.$slots, "default")])]),
@@ -407,7 +416,7 @@ var V = { class: "fg-card" }, H = {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = ne(e, "modelValue"), n = (t) => {
+		let t = D(e, "modelValue"), n = (t) => {
 			if (t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
 			let n = t.currentTarget, r = t.target;
 			if (!(n instanceof HTMLElement) || !(r instanceof HTMLElement)) return;
@@ -430,7 +439,7 @@ var V = { class: "fg-card" }, H = {
 			disabled: e.disabled,
 			loop: e.loop
 		}, e.orientation === void 0 ? {} : { orientation: e.orientation }, { onKeydown: n }), {
-			default: O(() => [S(r.$slots, "default")]),
+			default: k(() => [S(r.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -493,7 +502,7 @@ var V = { class: "fg-card" }, H = {
 			value: e.modelValue,
 			onChange: i
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: k(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -548,8 +557,8 @@ var V = { class: "fg-card" }, H = {
 			min: r.value.min,
 			step: r.value.step
 		}, {
-			default: O(() => [p(T(z), { class: "fg-slider__track" }, {
-				default: O(() => [p(T(I), { class: "fg-slider__range" })]),
+			default: k(() => [p(T(z), { class: "fg-slider__track" }, {
+				default: k(() => [p(T(I), { class: "fg-slider__range" })]),
 				_: 1
 			}), p(T(R), {
 				id: T(n)?.controlId.value ?? e.id,
@@ -593,7 +602,7 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:pressed"],
 	setup(e, { emit: t }) {
-		let n = t, r = D(), i = (e) => {
+		let n = t, r = O(), i = (e) => {
 			n("update:pressed", e);
 		};
 		return (t, n) => (y(), c(T(B), {
@@ -603,7 +612,7 @@ var V = { class: "fg-card" }, H = {
 			"model-value": e.pressed,
 			"onUpdate:modelValue": i
 		}, {
-			default: O(() => [n[0] ||= d("span", {
+			default: k(() => [n[0] ||= d("span", {
 				class: "fg-toggle-button__switch",
 				"aria-hidden": "true"
 			}, null, -1), d("span", He, [d("span", Ue, [S(t.$slots, "default")]), r.description ? (y(), u("span", We, [S(t.$slots, "description")])) : l("", !0)])]),
@@ -626,7 +635,7 @@ var V = { class: "fg-card" }, H = {
 			class: "fg-surface",
 			"data-padding": e.padding
 		}, {
-			default: O(() => [S(t.$slots, "default")]),
+			default: k(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}

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