@filipgutica/ui 1.15.0 → 1.16.1

package/dist/components/UiSegmentedControl.vue.d.ts

@@ -8,7 +8,8 @@ export interface UiSegmentedControlProps<T extends string = string> {
     /** Names the group for assistive technology. */
     label: string;
     items: readonly UiSegmentedItem<T>[];
-    modelValue?: T;
+    /** The pressed option. Undefined leaves every option unpressed. */
+    modelValue?: T | undefined;
     /** Shows only the icon slot; each label becomes the button's accessible name and tooltip. */
     iconOnly?: boolean;
     disabled?: boolean;

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

@@ -0,0 +1,12 @@
+import type { SiteAppearanceChoice } from './appearance.js';
+export interface UiSiteAppearancePickerProps {
+    /** The pressed choice. Leave it undefined when another theme is active, so no option is pressed. */
+    modelValue?: SiteAppearanceChoice | undefined;
+}
+declare const __VLS_export: import("vue").DefineComponent<UiSiteAppearancePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: SiteAppearanceChoice) => any;
+}, string, import("vue").PublicProps, Readonly<UiSiteAppearancePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: SiteAppearanceChoice) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/site/index.d.ts

@@ -1,5 +1,7 @@
 export { default as UiSiteHeader } from './UiSiteHeader.vue';
 export type { UiSiteHeaderProps, UiSiteLink } from './UiSiteHeader.vue';
+export { default as UiSiteAppearancePicker } from './UiSiteAppearancePicker.vue';
+export type { UiSiteAppearancePickerProps } from './UiSiteAppearancePicker.vue';
 export { default as UiSiteNav } from './UiSiteNav.vue';
 export type { UiSiteNavGroup, UiSiteNavItem, UiSiteNavProps } from './UiSiteNav.vue';
 export { default as UiCapture } from './UiCapture.vue';

package/dist/site.js

@@ -73,14 +73,7 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 		href: "https://filipgutica.github.io/ui/",
 		repository: "https://github.com/filipgutica/ui"
 	}
-], 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"
-}, W = ["href", "aria-current"], G = { class: "fg-site-header__end" }, K = {
-	key: 0,
-	class: "fg-site-header__links",
-	"aria-label": "Site links"
-}, q = ["href"], J = {
+], te = {
 	viewBox: "0 0 24 24",
 	width: "18",
 	height: "18",
@@ -88,17 +81,15 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, Y = {
+}, ne = {
 	key: 2,
 	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
-}, ae = /* @__PURE__ */ h({
-	__name: "UiSiteHeader",
-	props: {
-		project: {},
-		links: { default: () => [] }
-	},
-	setup(e) {
-		let t = [
+}, W = /* @__PURE__ */ h({
+	__name: "UiSiteAppearancePicker",
+	props: { modelValue: { default: () => void 0 } },
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, r = [
 			{
 				value: "system",
 				label: "System theme"
@@ -111,29 +102,67 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 				value: "dark",
 				label: "Dark theme"
 			}
-		], n = c(() => U.find(({ id: t }) => t === e.project)?.label ?? e.project), r = M().default ? void 0 : H(), a = w(!1), o = w(), p = w(), m = () => {
-			o.value && (o.value.open = !1);
+		];
+		return (t, a) => (C(), l(i, {
+			class: "fg-site-appearance",
+			label: "Color theme",
+			size: "lg",
+			"icon-only": "",
+			items: r,
+			"model-value": e.modelValue,
+			"onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
+		}, {
+			icon: F(({ item: e }) => [(C(), d("svg", te, [e.value === "system" ? (C(), d(s, { key: 0 }, [a[1] ||= f("rect", {
+				x: "3",
+				y: "4",
+				width: "18",
+				height: "13",
+				rx: "2"
+			}, null, -1), a[2] ||= f("path", { d: "M8 21h8m-4-4v4" }, null, -1)], 64)) : e.value === "light" ? (C(), d(s, { key: 1 }, [a[3] ||= f("circle", {
+				cx: "12",
+				cy: "12",
+				r: "4"
+			}, null, -1), a[4] ||= f("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (C(), d("path", ne))]))]),
+			_: 1
+		}, 8, ["model-value"]));
+	}
+}), re = { class: "fg-site-header" }, ie = { class: "fg-site-header__inner" }, G = ["aria-label"], K = {
+	class: "fg-site-projects__menu fg-site-nav",
+	"aria-label": "Projects"
+}, q = ["href", "aria-current"], J = { class: "fg-site-header__end" }, Y = {
+	key: 0,
+	class: "fg-site-header__links",
+	"aria-label": "Site links"
+}, ae = ["href"], oe = /* @__PURE__ */ h({
+	__name: "UiSiteHeader",
+	props: {
+		project: {},
+		links: { default: () => [] }
+	},
+	setup(e) {
+		let t = c(() => U.find(({ id: t }) => t === e.project)?.label ?? e.project), n = M().default ? void 0 : H(), r = w(!1), i = w(), a = w(), o = () => {
+			i.value && (i.value.open = !1);
+		}, p = (e) => {
+			e.key !== "Escape" || !i.value?.open || (o(), a.value?.focus());
+		}, m = (e) => {
+			e.relatedTarget instanceof Node && !i.value?.contains(e.relatedTarget) && o();
 		}, h = (e) => {
-			e.key !== "Escape" || !o.value?.open || (m(), p.value?.focus());
-		}, g = (e) => {
-			e.relatedTarget instanceof Node && !o.value?.contains(e.relatedTarget) && m();
-		}, _ = (e) => {
-			e.target instanceof Node && !o.value?.contains(e.target) && m();
+			e.target instanceof Node && !i.value?.contains(e.target) && o();
 		};
 		return x(() => {
-			a.value = !0, document.addEventListener("pointerdown", _);
-		}), b(() => document.removeEventListener("pointerdown", _)), (c, m) => (C(), d("header", te, [f("div", ne, [f("details", {
+			r.value = !0, document.addEventListener("pointerdown", h);
+		}), b(() => document.removeEventListener("pointerdown", h)), (o, c) => (C(), d("header", re, [f("div", ie, [f("details", {
 			ref_key: "menu",
-			ref: o,
+			ref: i,
 			class: "fg-site-projects",
-			onKeydown: h,
-			onFocusout: g
+			onKeydown: p,
+			onFocusout: m
 		}, [f("summary", {
 			ref_key: "trigger",
-			ref: p,
+			ref: a,
 			class: "fg-site-projects__trigger",
-			"aria-label": `Project: ${n.value}`
-		}, [f("span", null, O(n.value), 1), m[0] ||= f("svg", {
+			"aria-label": `Project: ${t.value}`
+		}, [f("span", null, O(t.value), 1), c[0] ||= f("svg", {
 			class: "fg-site-projects__chevron",
 			viewBox: "0 0 16 16",
 			width: "16",
@@ -142,42 +171,24 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 			stroke: "currentColor",
 			"stroke-width": "1.5",
 			"aria-hidden": "true"
-		}, [f("path", { d: "m4 6 4 4 4-4" })], -1)], 8, re), f("nav", ie, [(C(!0), d(s, null, T(k(U), (t) => (C(), d("a", {
+		}, [f("path", { d: "m4 6 4 4 4-4" })], -1)], 8, G), f("nav", K, [(C(!0), d(s, null, T(k(U), (t) => (C(), d("a", {
 			key: t.id,
 			href: t.href,
 			"aria-current": t.id === e.project ? "page" : void 0
-		}, O(t.label), 9, W))), 128))])], 544), f("div", G, [e.links.length > 0 ? (C(), d("nav", K, [(C(!0), d(s, null, T(e.links, (e) => (C(), d("a", {
+		}, O(t.label), 9, q))), 128))])], 544), f("div", J, [e.links.length > 0 ? (C(), d("nav", Y, [(C(!0), d(s, null, T(e.links, (e) => (C(), d("a", {
 			key: e.href,
 			href: e.href
-		}, O(e.label), 9, q))), 128))])) : u("", !0), E(c.$slots, "default", {}, () => [a.value && k(r) ? (C(), l(i, {
+		}, O(e.label), 9, ae))), 128))])) : u("", !0), E(o.$slots, "default", {}, () => [r.value && k(n) ? (C(), l(W, {
 			key: 0,
-			class: "fg-site-appearance",
-			label: "Color theme",
-			size: "lg",
-			"icon-only": "",
-			items: t,
-			"model-value": k(r).choice.value,
-			"onUpdate:modelValue": k(r).chooseAppearance
-		}, {
-			icon: F(({ item: e }) => [(C(), d("svg", J, [e.value === "system" ? (C(), d(s, { key: 0 }, [m[1] ||= f("rect", {
-				x: "3",
-				y: "4",
-				width: "18",
-				height: "13",
-				rx: "2"
-			}, null, -1), m[2] ||= f("path", { d: "M8 21h8m-4-4v4" }, null, -1)], 64)) : e.value === "light" ? (C(), d(s, { key: 1 }, [m[3] ||= f("circle", {
-				cx: "12",
-				cy: "12",
-				r: "4"
-			}, null, -1), m[4] ||= f("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (C(), d("path", Y))]))]),
-			_: 1
-		}, 8, ["model-value", "onUpdate:modelValue"])) : u("", !0)])])])]));
+			"model-value": k(n).choice.value,
+			"onUpdate:modelValue": k(n).chooseAppearance
+		}, null, 8, ["model-value", "onUpdate:modelValue"])) : u("", !0)])])])]));
 	}
-}), oe = ["id"], se = ["role", "aria-labelledby"], ce = ["id"], le = [
+}), se = ["id"], ce = ["role", "aria-labelledby"], le = ["id"], ue = [
 	"href",
 	"aria-current",
 	"onClick"
-], ue = { key: 0 }, X = /* @__PURE__ */ h({
+], de = { key: 0 }, X = /* @__PURE__ */ h({
 	__name: "SiteNavLinks",
 	props: {
 		contentId: {},
@@ -206,14 +217,14 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 			key: 0,
 			id: i(t),
 			class: "fg-site-rail__group-label"
-		}, O(e.label), 9, ce)) : u("", !0), (C(!0), d(s, null, T(e.items, (e) => (C(), d("a", {
+		}, O(e.label), 9, le)) : u("", !0), (C(!0), d(s, null, T(e.items, (e) => (C(), d("a", {
 			key: e.href,
 			href: e.href,
 			"aria-current": a(e),
 			onClick: (t) => n("navigate", e.href, t)
-		}, [e.code ? (C(), d("code", ue, O(e.label), 1)) : (C(), d(s, { key: 1 }, [p(O(e.label), 1)], 64))], 8, le))), 128))], 8, se))), 128))])], 8, oe));
+		}, [e.code ? (C(), d("code", de, O(e.label), 1)) : (C(), d(s, { key: 1 }, [p(O(e.label), 1)], 64))], 8, ue))), 128))], 8, ce))), 128))])], 8, se));
 	}
-}), de = ["data-enhanced"], fe = ["open"], pe = ["aria-controls"], me = "(max-width: 800px)", he = /* @__PURE__ */ h({
+}), fe = ["data-enhanced"], pe = ["open"], me = ["aria-controls"], he = "(max-width: 800px)", ge = /* @__PURE__ */ h({
 	__name: "UiSiteNav",
 	props: {
 		label: {},
@@ -234,7 +245,7 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 			T ? (e.preventDefault(), T.tabIndex = -1, T.focus({ preventScroll: !0 }), T = null) : s.value || (e.preventDefault(), D());
 		};
 		return x(() => {
-			b = matchMedia(me), j(), i.value = !0, b.addEventListener("change", j);
+			b = matchMedia(he), j(), i.value = !0, b.addEventListener("change", j);
 		}), S(() => b?.removeEventListener("change", j)), (o, c) => (C(), d("div", {
 			ref_key: "root",
 			ref: r,
@@ -247,7 +258,7 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 		}, [f("summary", {
 			class: "fg-site-rail__summary",
 			"aria-controls": k(n)
-		}, O(y.value), 9, pe), m(X, {
+		}, O(y.value), 9, me), m(X, {
 			"content-id": k(n),
 			label: e.label,
 			groups: e.groups,
@@ -257,7 +268,7 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 			"label",
 			"groups",
 			"active-id"
-		])], 8, fe)) : (C(), l(t, {
+		])], 8, pe)) : (C(), l(t, {
 			key: 1,
 			open: u.value,
 			"onUpdate:open": c[0] ||= (e) => u.value = e,
@@ -285,9 +296,9 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 				"active-id"
 			])]),
 			_: 1
-		}, 8, ["open", "title"]))], 8, de));
+		}, 8, ["open", "title"]))], 8, fe));
 	}
-}), ge = [
+}), _e = [
 	"aria-label",
 	"tabindex",
 	"data-fit",
@@ -325,12 +336,12 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 				"--capture-scale": n.value
 			}),
 			innerHTML: e.html
-		}, null, 12, ge));
+		}, null, 12, _e));
 	}
-}), _e = ["data-enhanced"], ve = ["aria-label"], ye = ["id"], be = { class: "fg-capture__preview" }, xe = ["title", "onClick"], Se = {
+}), ve = ["data-enhanced"], ye = ["aria-label"], be = ["id"], xe = { class: "fg-capture__preview" }, Se = ["title", "onClick"], Ce = {
 	key: 0,
 	class: "fg-capture__caption"
-}, Ce = { key: 0 }, we = /* @__PURE__ */ h({
+}, we = { key: 0 }, Te = /* @__PURE__ */ h({
 	__name: "UiCapture",
 	props: /*@__PURE__*/ g({
 		items: {},
@@ -393,7 +404,7 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 				stroke: "currentColor",
 				"stroke-width": "1.5",
 				"aria-hidden": "true"
-			}, [f("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), f("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ve)) : u("", !0),
+			}, [f("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), f("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ye)) : u("", !0),
 			m(n, {
 				"model-value": h.value,
 				items: o.value,
@@ -404,7 +415,7 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 					key: 0,
 					id: `${t.idPrefix}${n.id}`,
 					class: "fg-capture__figure"
-				}, [f("div", be, [m(Q, {
+				}, [f("div", xe, [m(Q, {
 					html: n.html,
 					label: `Terminal capture: ${n.label}`,
 					fit: i.value
@@ -420,7 +431,7 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 					"aria-hidden": "true",
 					title: `Open ${n.label} capture at full size`,
 					onClick: (e) => M(n)
-				}, null, 8, xe)) : u("", !0)]), n.command || c.$slots.caption ? (C(), d("figcaption", Se, [n.command ? (C(), d("code", Ce, O(n.command), 1)) : u("", !0), E(c.$slots, "caption", { item: n })])) : u("", !0)], 8, ye)) : u("", !0)], 64))), 128))]),
+				}, null, 8, Se)) : u("", !0)]), n.command || c.$slots.caption ? (C(), d("figcaption", Ce, [n.command ? (C(), d("code", we, O(n.command), 1)) : u("", !0), E(c.$slots, "caption", { item: n })])) : u("", !0)], 8, be)) : u("", !0)], 64))), 128))]),
 				_: 3
 			}, 8, [
 				"model-value",
@@ -451,26 +462,26 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 				}, null, 8, ["html", "label"])) : u("", !0)]),
 				_: 1
 			}, 8, ["open", "title"])
-		], 8, _e));
+		], 8, ve));
 	}
-}), Te = { class: "fg-command-list" }, Ee = { class: "fg-command-list__table" }, De = { scope: "col" }, $ = { scope: "col" }, Oe = { key: 0 }, ke = { class: "fg-command-list__command" }, Ae = { class: "fg-command-list__description" }, je = {
+}), Ee = { class: "fg-command-list" }, De = { class: "fg-command-list__table" }, $ = { scope: "col" }, Oe = { scope: "col" }, ke = { key: 0 }, Ae = { class: "fg-command-list__command" }, je = { class: "fg-command-list__description" }, Me = {
 	key: 0,
 	class: "fg-command-list__action"
-}, Me = [
+}, Ne = [
 	"disabled",
 	"aria-label",
 	"title",
 	"onClick"
-], Ne = {
+], Pe = {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, Pe = {
+}, Fe = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, Fe = /* @__PURE__ */ h({
+}, Ie = /* @__PURE__ */ h({
 	__name: "UiCommandList",
 	props: {
 		items: {},
@@ -490,14 +501,14 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 			unavailableMessage: "Clipboard unavailable. Select the command to copy it.",
 			failureMessage: "Could not copy. Select the command to copy it."
 		}), l = w(""), m = c(() => a.value || (n.value ? `${l.value} copied to clipboard.` : "")), h = (e) => (l.value = e, o(e));
-		return (r, o) => (C(), d("div", Te, [f("table", Ee, [f("thead", null, [f("tr", null, [
-			f("th", De, O(e.commandHeader), 1),
-			f("th", $, O(e.descriptionHeader), 1),
-			e.copyable ? (C(), d("td", Oe)) : u("", !0)
+		return (r, o) => (C(), d("div", Ee, [f("table", De, [f("thead", null, [f("tr", null, [
+			f("th", $, O(e.commandHeader), 1),
+			f("th", Oe, O(e.descriptionHeader), 1),
+			e.copyable ? (C(), d("td", ke)) : u("", !0)
 		])]), f("tbody", null, [(C(!0), d(s, null, T(e.items, (c) => (C(), d("tr", { key: c.command }, [
-			f("td", ke, [E(r.$slots, "command", { item: c }, () => [f("code", null, O(c.command), 1)])]),
-			f("td", Ae, [E(r.$slots, "description", { item: c }, () => [p(O(c.description), 1)])]),
-			e.copyable ? (C(), d("td", je, [t.value ? (C(), d("button", {
+			f("td", Ae, [E(r.$slots, "command", { item: c }, () => [f("code", null, O(c.command), 1)])]),
+			f("td", je, [E(r.$slots, "description", { item: c }, () => [p(O(c.description), 1)])]),
+			e.copyable ? (C(), d("td", Me, [t.value ? (C(), d("button", {
 				key: 0,
 				type: "button",
 				class: "fg-command-list__copy",
@@ -505,13 +516,13 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 				"aria-label": `Copy ${c.command}`,
 				title: `Copy ${c.command}`,
 				onClick: (e) => h(c.command)
-			}, [(C(), d("svg", Ne, [k(n) && !k(a) && l.value === c.command ? (C(), d("path", Pe)) : (C(), d(s, { key: 1 }, [o[0] ||= f("rect", {
+			}, [(C(), d("svg", Pe, [k(n) && !k(a) && l.value === c.command ? (C(), d("path", Fe)) : (C(), d(s, { key: 1 }, [o[0] ||= f("rect", {
 				x: "8",
 				y: "8",
 				width: "12",
 				height: "13",
 				rx: "2"
-			}, null, -1), o[1] ||= f("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))]))], 8, Me)) : u("", !0)])) : u("", !0)
+			}, null, -1), o[1] ||= f("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))]))], 8, Ne)) : u("", !0)])) : u("", !0)
 		]))), 128))])]), f("span", {
 			class: v(["fg-command-list__status", { "fg-site-sr-only": !k(a) }]),
 			role: "status"
@@ -519,4 +530,4 @@ var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "
 	}
 });
 //#endregion
-export { z as SITE_APPEARANCE_KEY, U as SITE_PROJECTS, we as UiCapture, Fe as UiCommandList, ae as UiSiteHeader, he as UiSiteNav, V as applySiteAppearance, ee as siteThemeBootScript, H as useSiteAppearance };
+export { z as SITE_APPEARANCE_KEY, U as SITE_PROJECTS, Te as UiCapture, Ie as UiCommandList, W as UiSiteAppearancePicker, oe as UiSiteHeader, ge as UiSiteNav, V as applySiteAppearance, ee as siteThemeBootScript, H as useSiteAppearance };

package/package.json

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

package/src/components.css

@@ -729,7 +729,8 @@
     --fg-segmented-thumb: light-dark(var(--color-row-selected), color-mix(in srgb, var(--color-text) 10%, var(--color-surface-muted)));
     display: inline-flex;
     flex: none;
-    border: 1px solid var(--color-border-subtle);
+    /* The fill alone marks the track. The transparent border keeps its size, and forced colors draw it. */
+    border: 1px solid transparent;
     border-radius: var(--radius-control);
     background: var(--color-surface-muted);
   }

package/src/site.css

@@ -479,23 +479,37 @@
    * rule runs down the leading column to the next step. */
   .fg-site-steps > li {
     position: relative;
-    display: grid;
-    grid-template-columns: var(--space-8) minmax(0, 1fr);
-    row-gap: var(--space-2);
+    display: flow-root;
+    min-width: 0;
+    padding-inline-start: var(--space-8);
     counter-increment: fg-site-step;
   }
-  .fg-site-steps > li > * { grid-column: 2; }
-  .fg-site-steps > li::before {
+  /* Keep text and inline elements in normal flow; only the number occupies the gutter. */
+  .fg-site-steps > li > * + * { margin-block-start: var(--space-2); }
+  .fg-site-steps > li::before,
+  .fg-site-steps > li > h3:first-child::before {
     content: counter(fg-site-step);
-    grid-area: 1 / 1;
-    align-self: baseline;
     color: var(--color-project);
     font-family: var(--font-mono);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     font-variant-numeric: tabular-nums;
+    line-height: var(--leading);
+  }
+  .fg-site-steps > li::before {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+  }
+  /* A titled step keeps the number on the heading's baseline and preserves its line box. */
+  .fg-site-steps > li:has(> h3:first-child)::before { content: none; }
+  .fg-site-steps > li > h3:first-child::before {
+    display: inline-block;
+    width: var(--space-8);
+    margin-inline-start: calc(-1 * var(--space-8));
+    /* A unit line height keeps the number from making a wrapped title's line boxes taller. */
+    line-height: 1;
   }
-  .fg-site-steps > li > :first-child { align-self: baseline; }
   .fg-site-steps > li:not(:last-child)::after {
     content: '';
     position: absolute;