@filipgutica/ui 1.4.1 → 1.6.0

package/dist/use-active-section-CiflgGBI.js

@@ -0,0 +1,255 @@
+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";
+//#endregion
+//#region src/components/UiButton.vue
+var j = /* @__PURE__ */ c({
+	__name: "UiButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		type: { default: "button" },
+		variant: { default: "primary" }
+	},
+	setup(e) {
+		return (t, r) => (f(), n(v(k), {
+			as: "button",
+			class: "fg-button",
+			"data-size": e.size,
+			"data-variant": e.variant,
+			"aria-busy": e.loading ? "true" : void 0,
+			disabled: e.disabled || e.loading,
+			type: e.type
+		}, {
+			default: b(() => [g(t.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"data-size",
+			"data-variant",
+			"aria-busy",
+			"disabled",
+			"type"
+		]));
+	}
+}), M = ({ unavailableMessage: e, failureMessage: t }) => {
+	let n = m(!1), r = m(!1), i = m(""), { start: a } = A(() => {
+		n.value = !1;
+	}, 1500, { immediate: !1 });
+	return {
+		copied: p(n),
+		pending: p(r),
+		error: p(i),
+		copy: async (o) => {
+			if (i.value = "", n.value = !1, typeof navigator > "u" || !navigator.clipboard?.writeText) {
+				i.value = e;
+				return;
+			}
+			r.value = !0;
+			try {
+				await navigator.clipboard.writeText(o), n.value = !0, a();
+			} catch {
+				i.value = t;
+			} finally {
+				r.value = !1;
+			}
+		}
+	};
+}, N = { class: "fg-dialog__header" }, P = { class: "fg-dialog__body" }, F = {
+	key: 0,
+	class: "fg-dialog__footer"
+}, I = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "UiDialog",
+	props: {
+		description: { default: () => void 0 },
+		open: { type: Boolean },
+		title: {}
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let c = t;
+		return (t, u) => (f(), n(v(E), {
+			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({
+					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)]),
+							_: 1
+						}), e.description ? (f(), n(v(C), {
+							key: 0,
+							class: "fg-dialog__description"
+						}, {
+							default: b(() => [o(_(e.description), 1)]),
+							_: 1
+						})) : r("", !0)]), s(v(x), {
+							class: "fg-dialog__close",
+							"aria-label": "Close dialog"
+						}, {
+							default: b(() => [...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)
+					]),
+					_: 3
+				}, 16)]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+}), L = { class: "fg-drawer__header" }, R = { class: "fg-drawer__body" }, z = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "UiDrawer",
+	props: {
+		open: { type: Boolean },
+		title: {}
+	},
+	emits: ["update:open", "closeAutoFocus"],
+	setup(e, { emit: t }) {
+		let i = t;
+		return (t, c) => (f(), n(v(E), {
+			open: e.open,
+			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
+		}, {
+			default: b(() => [t.$slots.trigger ? (f(), n(v(O), {
+				key: 0,
+				"as-child": ""
+			}, {
+				default: b(() => [g(t.$slots, "trigger")]),
+				_: 3
+			})) : r("", !0), s(v(T), null, {
+				default: b(() => [s(v(w), { class: "fg-drawer__overlay" }), s(v(S), 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)]),
+						_: 1
+					}), s(v(x), {
+						class: "fg-drawer__close",
+						"aria-label": "Close drawer"
+					}, {
+						default: b(() => [...c[2] ||= [o(" × ", -1)]]),
+						_: 1
+					})]), a("div", R, [g(t.$slots, "default")])]),
+					_: 3
+				}, 16)]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+}), B = { class: "fg-tabs" }, V = ["aria-label"], H = [
+	"id",
+	"aria-controls",
+	"aria-selected",
+	"tabindex",
+	"onClick",
+	"onFocus"
+], U = [
+	"id",
+	"role",
+	"aria-labelledby",
+	"hidden",
+	"tabindex"
+], W = ["id", "hidden"], G = /* @__PURE__ */ c({
+	__name: "UiTabs",
+	props: {
+		items: {},
+		label: {},
+		modelValue: {}
+	},
+	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)}`;
+		u(() => {
+			l.value = !0;
+		});
+		let x = (e) => {
+			e !== d.value && s("update:modelValue", e);
+		}, S = (e) => {
+			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let t = e.currentTarget, n = e.target;
+			if (!(t instanceof HTMLElement) || !(n instanceof HTMLButtonElement)) return;
+			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());
+		};
+		return (t, o) => (f(), i("div", B, [l.value ? (f(), i("div", {
+			key: 0,
+			class: "fg-tabs__list",
+			role: "tablist",
+			"aria-label": n.label,
+			onKeydown: S
+		}, [(f(!0), i(e, null, h(n.items, (e) => (f(), i("button", {
+			id: p(e.value),
+			key: e.value,
+			type: "button",
+			class: "fg-tabs__tab",
+			role: "tab",
+			"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", {
+			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),
+			hidden: l.value && e.value !== d.value,
+			tabindex: l.value ? 0 : void 0
+		}, [a("h3", {
+			id: b(e.value),
+			class: "fg-tabs__heading",
+			hidden: l.value
+		}, _(e.label), 9, W), g(t.$slots, "panel", { value: e.value })], 8, U))), 128))]));
+	}
+}), K = ({ targetIds: e }) => {
+	let t = m(e[0]), n, r, i;
+	return u(() => {
+		let a = e.flatMap((e) => {
+			let t = document.getElementById(e);
+			return t ? [{
+				id: e,
+				element: t
+			}] : [];
+		}), o = () => {
+			n = void 0;
+			let e = document.documentElement, r = Number.parseFloat(getComputedStyle(e).scrollPaddingTop) || 0, i = a[0]?.id;
+			for (let e of a) e.element.getBoundingClientRect().top <= r + 1 && (i = e.id);
+			window.scrollY > 0 && window.scrollY + window.innerHeight >= e.scrollHeight - 2 && (i = a.at(-1)?.id), t.value = i;
+		}, s = () => {
+			n === void 0 && (n = requestAnimationFrame(o));
+		};
+		window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s), window.addEventListener("pageshow", s), document.body.addEventListener("transitionend", s), typeof ResizeObserver < "u" && (r = new ResizeObserver(s), r.observe(document.body)), i = () => {
+			window.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("pageshow", s), document.body.removeEventListener("transitionend", s);
+		}, o();
+	}), d(() => {
+		i?.(), r?.disconnect(), n !== void 0 && cancelAnimationFrame(n);
+	}), p(t);
+};
+//#endregion
+export { M as a, I as i, G as n, j as o, z as r, K as t };

package/dist/use-clipboard-copy.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+export interface ClipboardCopyOptions {
+    /** Shown when the browser has no clipboard API. */
+    unavailableMessage: string;
+    /** Shown when the browser rejects the write. */
+    failureMessage: string;
+}
+export interface ClipboardCopy {
+    /** True for a short time after a successful copy. */
+    copied: Readonly<Ref<boolean>>;
+    pending: Readonly<Ref<boolean>>;
+    /** The last failure message, cleared when a new copy starts. */
+    error: Readonly<Ref<string>>;
+    copy: (text: string) => Promise<void>;
+}
+/** Copies text to the clipboard and reports the outcome for a live status message. */
+export declare const useClipboardCopy: ({ unavailableMessage, failureMessage }: ClipboardCopyOptions) => ClipboardCopy;

package/package.json

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

package/src/site.css

@@ -81,8 +81,8 @@
   }
 
   /* Route rows. Hover is neutral, and the current page keeps its selected fill on
-   * hover. Only aria-current="page" is styled: an in-page section marker
-   * (aria-current="location") must look different from the current page. */
+   * hover. An in-page section marker (aria-current="location") must look different
+   * from the current page, so it only strengthens the text. */
   .fg-site-nav a {
     display: flex;
     min-height: var(--row);
@@ -101,6 +101,8 @@
     color: var(--color-text);
     font-weight: var(--weight-medium);
   }
+  .fg-site-nav a[aria-current="location"] { color: var(--color-text); font-weight: var(--weight-medium); }
+  .fg-site-nav a code { font-family: var(--font-mono); font-size: var(--text-sm); }
 
   .fg-site-appearance {
     display: inline-flex;
@@ -133,6 +135,224 @@
   .fg-site-appearance__choice:focus-visible { outline-offset: -2px; }
   .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. */
+  .fg-site-rail {
+    position: sticky;
+    top: var(--space-6);
+    align-self: start;
+    min-width: 0;
+    max-height: calc(100svh - var(--space-12));
+    overflow-y: auto;
+    padding-block: var(--space-4);
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--text-md);
+    line-height: var(--leading);
+  }
+  .fg-site-rail__summary { display: none; }
+  .fg-site-rail__nav { display: grid; gap: var(--space-2); }
+  .fg-site-rail__label,
+  .fg-site-rail__group-label {
+    margin: 0;
+    padding-inline: var(--space-3);
+    color: var(--color-muted);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-regular);
+  }
+  .fg-site-rail__group { display: grid; gap: 2px; }
+  .fg-site-rail__group + .fg-site-rail__group { margin-top: var(--space-3); }
+  .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. */
+  .fg-capture {
+    min-width: 0;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-panel);
+    background: var(--color-surface);
+  }
+  .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); }
+  /* Without JavaScript every capture is listed under its own heading. */
+  .fg-capture .fg-tabs__heading { margin: 0; padding: var(--space-3) var(--space-4); }
+  .fg-capture:not([data-enhanced="true"]) .fg-tabs__panel + .fg-tabs__panel { border-top: 1px solid var(--color-border-subtle); }
+  .fg-capture[data-enhanced="true"] .fg-tabs__panel,
+  .fg-capture .fg-tabs__panel:last-child {
+    overflow: clip;
+    border-end-start-radius: calc(var(--radius-panel) - 1px);
+    border-end-end-radius: calc(var(--radius-panel) - 1px);
+  }
+  .fg-capture__figure { display: grid; min-width: 0; margin: 0; }
+  .fg-capture__preview { position: relative; min-width: 0; }
+  .fg-capture__screen {
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    background: var(--site-capture-bg, var(--color-code));
+  }
+  .fg-capture__screen > * { width: max-content; margin: 0; }
+  .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 {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    cursor: zoom-in;
+  }
+  .fg-capture__caption {
+    display: grid;
+    justify-items: start;
+    gap: var(--space-1);
+    padding: var(--space-3) var(--space-4);
+    border-top: 1px solid var(--color-border-subtle);
+    color: var(--color-muted);
+    font-size: var(--text-sm);
+    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; }
+  .fg-dialog__content.fg-capture-viewer {
+    width: calc(100vw - var(--space-8));
+    max-width: var(--page-max);
+    max-height: calc(100dvh - var(--space-8));
+  }
+  .fg-capture-viewer .fg-capture__screen {
+    max-height: calc(100dvh - var(--space-16) * 3);
+    overflow: auto;
+    border-radius: var(--radius-control);
+  }
+
+  /* Command table (UiCommandList). Wide commands scroll inside it on larger
+   * screens; at 640px and below each command stacks above its description. */
+  .fg-command-list {
+    position: relative;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--text-md);
+    line-height: var(--leading);
+  }
+  .fg-command-list__table { width: 100%; border-collapse: collapse; }
+  .fg-command-list th {
+    padding: 0 var(--space-3) var(--space-2) 0;
+    color: var(--color-muted);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    text-align: start;
+  }
+  .fg-command-list td {
+    padding: var(--space-3) var(--space-3) var(--space-3) 0;
+    border-top: 1px solid var(--color-border-subtle);
+    vertical-align: top;
+  }
+  .fg-command-list thead td { padding: 0; border: 0; }
+  .fg-command-list tbody tr:last-child td { border-bottom: 1px solid var(--color-border-subtle); }
+  .fg-command-list__command { width: 1%; white-space: nowrap; }
+  .fg-command-list__command code { font-family: var(--font-mono); font-size: var(--text-sm); }
+  .fg-command-list__description { color: var(--color-muted); }
+  .fg-command-list td.fg-command-list__action { width: 1%; padding: var(--space-1) 0; }
+  .fg-command-list__copy {
+    display: inline-grid;
+    width: var(--control-lg);
+    height: var(--control-lg);
+    padding: 0;
+    place-items: center;
+    border: 0;
+    border-radius: var(--radius-control);
+    color: var(--color-muted);
+    background: transparent;
+    font: inherit;
+    cursor: pointer;
+  }
+  .fg-command-list__copy:hover { color: var(--color-text); background: var(--color-row-hover); }
+  .fg-command-list__copy svg { width: 1rem; height: 1rem; }
+  .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); }
+
+  /* Page helpers. Steps number a real sequence; facts are short label and value
+   * pairs on one line; definitions pair terms with short meanings. Definitions
+   * take dt and dd as direct children. */
+  .fg-site-steps { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: fg-site-step; }
+  .fg-site-steps > li {
+    position: relative;
+    min-width: 0;
+    padding-inline-start: calc(var(--space-6) + var(--space-3));
+    counter-increment: fg-site-step;
+  }
+  .fg-site-steps > li::before {
+    content: counter(fg-site-step);
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    display: grid;
+    width: var(--space-6);
+    height: var(--space-6);
+    place-items: center;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-pill);
+    color: var(--color-muted);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  .fg-site-facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2) var(--space-8);
+    margin: 0;
+    color: var(--color-muted);
+    font-size: var(--text-sm);
+  }
+  .fg-site-facts > div { display: flex; gap: var(--space-2); }
+  .fg-site-facts dd { margin: 0; color: var(--color-text); }
+  .fg-site-definitions {
+    display: grid;
+    grid-template-columns: 9rem minmax(0, 1fr);
+    gap: var(--space-3) var(--space-6);
+    max-width: var(--measure);
+    margin: 0;
+    font-size: var(--text-md);
+    line-height: var(--leading);
+  }
+  .fg-site-definitions dt { font-weight: var(--weight-medium); }
+  .fg-site-definitions dd { margin: 0; color: var(--color-muted); }
+
+  .fg-site-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .fg-site-skip {
+    position: absolute;
+    z-index: 60;
+    top: -100%;
+    left: var(--space-4);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-control);
+    color: var(--color-text);
+    background: var(--color-surface-raised);
+    box-shadow: var(--shadow-dialog);
+  }
+  .fg-site-skip:focus { top: var(--space-4); }
+  .fg-site-skip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+
   /* Type roles for article content. Prose reads at --text-reading. Components set
    * their own size, and controls and dense content such as tables belong at --text-md.
    * Zero-specificity heading selectors keep component and page styles in charge. */
@@ -152,6 +372,66 @@
   .fg-site-prose :where(p a, li a, dd a) { text-decoration: underline; text-underline-offset: 0.18em; }
   .fg-site-meta { color: var(--color-muted); font-size: var(--text-sm); }
 
+  /* No-JavaScript desktop: the rail's disclosure stays expanded. */
+  @media (min-width: 801px) {
+    .fg-site-rail__menu::details-content { content-visibility: visible; }
+    .fg-site-rail__menu:not([open]) > .fg-site-rail__content { display: block; }
+  }
+  /* Keep in sync with MOBILE_QUERY in UiSiteNav.vue. */
+  @media (max-width: 800px) {
+    .fg-site-rail {
+      position: static;
+      max-height: none;
+      overflow: visible;
+      padding-block: var(--space-2);
+    }
+    .fg-site-rail__summary {
+      display: flex;
+      width: max-content;
+      min-height: var(--control-lg);
+      align-items: center;
+      padding-inline: var(--space-3);
+      border-radius: var(--radius-control);
+      color: var(--color-muted);
+      font-weight: var(--weight-medium);
+      list-style: none;
+      cursor: pointer;
+    }
+    .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__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); }
+  }
+  @media (max-width: 640px) {
+    .fg-dialog__content.fg-capture-viewer { width: 100%; max-width: none; }
+    .fg-command-list__table,
+    .fg-command-list tbody { display: block; }
+    .fg-command-list thead {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .fg-command-list tbody tr {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      column-gap: var(--space-2);
+      padding-block: var(--space-3);
+      border-top: 1px solid var(--color-border-subtle);
+    }
+    .fg-command-list tbody tr:last-child { border-bottom: 1px solid var(--color-border-subtle); }
+    .fg-command-list td,
+    .fg-command-list tbody tr:last-child td,
+    .fg-command-list td.fg-command-list__action { width: auto; padding: 0; border: 0; }
+    .fg-command-list__command { white-space: normal; overflow-wrap: anywhere; }
+    .fg-command-list td.fg-command-list__description { grid-column: 1; padding-top: var(--space-1); }
+    .fg-command-list td.fg-command-list__action { grid-column: 2; grid-row: 1 / span 2; }
+  }
   @media (min-width: 681px) {
     .fg-site-frame,
     .fg-site-header__inner { padding-inline: var(--site-gutter, var(--space-6)); }
@@ -161,6 +441,8 @@
     .fg-site-header__end { gap: var(--space-2) var(--space-4); }
     .fg-site-header__links { gap: var(--space-4); }
     .fg-site-projects__menu a { min-height: var(--control-lg); }
+    .fg-site-definitions { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
+    .fg-site-definitions dd + dt { margin-top: var(--space-3); }
   }
   @media (prefers-reduced-motion: reduce) {
     .fg-site-projects__chevron,