@filipgutica/ui 1.6.0 → 1.7.0

package/README.md

@@ -176,8 +176,9 @@ breakpoint.
 
 `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 expand button opens the capture
-at full size in a dialog and returns focus to the button on close. `v-model`
+terminal markup with a single root element. The Full size button at the end of
+the tab row, or a click on the capture, opens it at full size in a dialog, and
+focus returns to the button on close. Phones show the button as an icon. `v-model`
 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
@@ -186,8 +187,8 @@ colors: set `--site-capture-bg` on `:root`, because the dialog renders outside
 the panel.
 
 `UiCommandList` renders a table of monospace commands and descriptions. Use the
-`description` slot for `<kbd>` or `<code>`, and `commandHeader` and
-`descriptionHeader` to rename the columns. Each row gets a copy button named
+`command` slot to show a key as `<kbd>`, the `description` slot for `<kbd>` or
+`<code>`, and `commandHeader` and `descriptionHeader` to rename the columns. Each row gets a copy button named
 "Copy <command>" once the page is interactive; set `copyable` to `false` to
 remove them. A status message announces each copy and shows a fallback when
 the clipboard is unavailable. At 640px and below each command stacks above its

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

@@ -10,6 +10,10 @@ export interface UiCommandListProps {
     descriptionHeader?: string;
 }
 type __VLS_Slots = {
+    /** Replaces the code-styled command, for a key shown as `<kbd>`. Copying still uses `item.command`. */
+    command?(props: {
+        item: UiCommandItem;
+    }): unknown;
     /** Replaces the plain description, for text with `<kbd>` or `<code>`. */
     description?(props: {
         item: UiCommandItem;

package/dist/site.js

@@ -1,8 +1,8 @@
 import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.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, watch as j, withCtx as M } from "vue";
+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
-var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "dark", te = `(function () {
+var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "dark", ne = `(function () {
   var root = document.documentElement, choice;
   try { choice = localStorage.getItem('${I}'); } catch (error) {}
   var dark = choice === 'dark';
@@ -73,24 +73,24 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		href: "https://filipgutica.github.io/ui/",
 		repository: "https://github.com/filipgutica/ui"
 	}
-], ne = { class: "fg-site-header" }, re = { class: "fg-site-header__inner" }, V = ["aria-label"], H = {
+], re = { class: "fg-site-header" }, V = { class: "fg-site-header__inner" }, H = ["aria-label"], U = {
 	class: "fg-site-projects__menu fg-site-nav",
 	"aria-label": "Projects"
-}, U = ["href", "aria-current"], W = { class: "fg-site-header__end" }, G = {
+}, W = ["href", "aria-current"], G = { class: "fg-site-header__end" }, K = {
 	key: 0,
 	class: "fg-site-header__links",
 	"aria-label": "Site links"
-}, K = ["href"], q = {
+}, q = ["href"], J = {
 	key: 0,
 	class: "fg-site-appearance",
 	role: "group",
 	"aria-label": "Color theme"
-}, J = [
+}, Y = [
 	"aria-label",
 	"title",
 	"aria-pressed",
 	"onClick"
-], Y = {
+], X = {
 	viewBox: "0 0 24 24",
 	width: "18",
 	height: "18",
@@ -98,10 +98,10 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, X = {
+}, ie = {
 	key: 2,
 	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
-}, ie = /* @__PURE__ */ m({
+}, ae = /* @__PURE__ */ m({
 	__name: "UiSiteHeader",
 	props: {
 		project: {},
@@ -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", ne, [d("div", re, [d("details", {
+		}), y(() => document.removeEventListener("pointerdown", h)), (s, f) => (S(), u("header", re, [d("div", V, [d("details", {
 			ref_key: "menu",
 			ref: a,
 			class: "fg-site-projects",
@@ -152,14 +152,14 @@ 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, H), d("nav", U, [(S(!0), u(o, null, w(O(B), (t) => (S(), u("a", {
 			key: t.id,
 			href: t.href,
 			"aria-current": t.id === e.project ? "page" : void 0
-		}, D(t.label), 9, U))), 128))])], 544), d("div", W, [e.links.length > 0 ? (S(), u("nav", G, [(S(!0), u(o, null, w(e.links, (e) => (S(), u("a", {
+		}, D(t.label), 9, W))), 128))])], 544), d("div", G, [e.links.length > 0 ? (S(), u("nav", K, [(S(!0), u(o, null, w(e.links, (e) => (S(), u("a", {
 			key: e.href,
 			href: e.href
-		}, D(e.label), 9, K))), 128))])) : l("", !0), T(s.$slots, "default", {}, () => [i.value && O(r) ? (S(), u("div", q, [(S(), u(o, null, w(t, (e) => d("button", {
+		}, D(e.label), 9, q))), 128))])) : l("", !0), T(s.$slots, "default", {}, () => [i.value && O(r) ? (S(), u("div", J, [(S(), u(o, null, w(t, (e) => d("button", {
 			key: e.value,
 			type: "button",
 			class: "fg-site-appearance__choice",
@@ -167,7 +167,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			title: `${e.label} theme`,
 			"aria-pressed": O(r).choice.value === e.value,
 			onClick: (t) => O(r).chooseAppearance(e.value)
-		}, [(S(), u("svg", Y, [e.value === "system" ? (S(), u(o, { key: 0 }, [f[1] ||= d("rect", {
+		}, [(S(), u("svg", X, [e.value === "system" ? (S(), u(o, { key: 0 }, [f[1] ||= d("rect", {
 			x: "3",
 			y: "4",
 			width: "18",
@@ -177,13 +177,13 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			cx: "12",
 			cy: "12",
 			r: "4"
-		}, null, -1), f[4] ||= d("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (S(), u("path", X))]))], 8, J)), 64))])) : l("", !0)])])])]));
+		}, null, -1), f[4] ||= d("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (S(), u("path", ie))]))], 8, Y)), 64))])) : l("", !0)])])])]));
 	}
-}), ae = ["id"], oe = ["role", "aria-labelledby"], se = ["id"], ce = [
+}), oe = ["id"], se = ["role", "aria-labelledby"], ce = ["id"], le = [
 	"href",
 	"aria-current",
 	"onClick"
-], le = { key: 0 }, Z = /* @__PURE__ */ m({
+], ue = { key: 0 }, Z = /* @__PURE__ */ m({
 	__name: "SiteNavLinks",
 	props: {
 		contentId: {},
@@ -212,14 +212,14 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			key: 0,
 			id: i(t),
 			class: "fg-site-rail__group-label"
-		}, D(e.label), 9, se)) : l("", !0), (S(!0), u(o, null, w(e.items, (e) => (S(), u("a", {
+		}, D(e.label), 9, ce)) : l("", !0), (S(!0), u(o, null, w(e.items, (e) => (S(), u("a", {
 			key: e.href,
 			href: e.href,
 			"aria-current": a(e),
 			onClick: (t) => n("navigate", e.href, t)
-		}, [e.code ? (S(), u("code", le, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(e.label), 1)], 64))], 8, ce))), 128))], 8, oe))), 128))])], 8, ae));
+		}, [e.code ? (S(), u("code", ue, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(e.label), 1)], 64))], 8, le))), 128))], 8, se))), 128))])], 8, oe));
 	}
-}), ue = ["data-enhanced"], de = ["open"], fe = ["aria-controls"], pe = "(max-width: 800px)", me = /* @__PURE__ */ m({
+}), de = ["data-enhanced"], fe = ["open"], pe = ["aria-controls"], me = "(max-width: 800px)", he = /* @__PURE__ */ m({
 	__name: "UiSiteNav",
 	props: {
 		label: {},
@@ -237,7 +237,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			_ ? (e.preventDefault(), _.tabIndex = -1, _.focus({ preventScroll: !0 }), _ = null) : s.value || (e.preventDefault(), y());
 		};
 		return b(() => {
-			h = matchMedia(pe), w(), o.value = !0, h.addEventListener("change", w);
+			h = matchMedia(me), w(), o.value = !0, h.addEventListener("change", w);
 		}), x(() => h?.removeEventListener("change", w)), (a, h) => (S(), u("div", {
 			ref_key: "root",
 			ref: n,
@@ -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, fe), p(Z, {
+		}, " Menu ", 8, pe), p(Z, {
 			"content-id": O(t),
 			label: e.label,
 			groups: e.groups,
@@ -260,7 +260,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 			"label",
 			"groups",
 			"active-id"
-		])], 8, de)) : (S(), c(i, {
+		])], 8, fe)) : (S(), c(i, {
 			key: 1,
 			open: l.value,
 			"onUpdate:open": h[0] ||= (e) => l.value = e,
@@ -288,9 +288,9 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				"active-id"
 			])]),
 			_: 1
-		}, 8, ["open"]))], 8, ue));
+		}, 8, ["open"]))], 8, de));
 	}
-}), he = [
+}), ge = [
 	"aria-label",
 	"tabindex",
 	"data-fit",
@@ -326,16 +326,12 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				"--capture-scale": n.value
 			}),
 			innerHTML: e.html
-		}, null, 12, he));
+		}, null, 12, ge));
 	}
-}), ge = ["data-enhanced"], _e = ["id"], ve = { class: "fg-capture__preview" }, ye = [
-	"aria-label",
-	"title",
-	"onClick"
-], be = {
+}), _e = ["data-enhanced"], ve = ["aria-label"], ye = ["id"], be = { class: "fg-capture__preview" }, xe = ["title", "onClick"], Se = {
 	key: 0,
 	class: "fg-capture__caption"
-}, xe = { key: 0 }, Se = /* @__PURE__ */ m({
+}, Ce = { key: 0 }, we = /* @__PURE__ */ m({
 	__name: "UiCapture",
 	props: /*@__PURE__*/ h({
 		items: {},
@@ -350,113 +346,132 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		let i = ee(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 ?? ""), _ = C(!1), v = E(), y, O = 0, k = 0, A = (e, t) => {
-			t.currentTarget instanceof HTMLElement && (y = t.currentTarget), v.value = e, _.value = !0;
-		}, j = (e) => {
-			y?.isConnected && (e.preventDefault(), y.focus({ preventScroll: !0 }));
-		}, N = () => {
+		}))), 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) => {
+			y.value = e, v.value = !0;
+		}, N = (e) => {
+			A.value?.isConnected && (e.preventDefault(), A.value.focus({ preventScroll: !0 }));
+		}, P = () => {
 			try {
 				return document.getElementById(decodeURIComponent(location.hash.slice(1)));
 			} catch {
 				return null;
 			}
-		}, P = async () => {
+		}, F = async () => {
 			await g(), cancelAnimationFrame(O), cancelAnimationFrame(k), O = requestAnimationFrame(() => {
-				k = requestAnimationFrame(() => N()?.scrollIntoView({
+				k = requestAnimationFrame(() => P()?.scrollIntoView({
 					behavior: "instant",
 					block: "start"
 				}));
 			});
-		}, F = () => {
-			let t = N();
+		}, I = () => {
+			let t = P();
 			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);
-		}, I = () => {
-			F() && P();
+		}, L = () => {
+			I() && F();
 		};
 		return b(() => {
-			a.value = !0, F(), location.hash && P(), window.addEventListener("hashchange", I), window.addEventListener("popstate", I);
+			a.value = !0, I(), location.hash && F(), window.addEventListener("hashchange", L), window.addEventListener("popstate", L);
 		}), x(() => {
-			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", I), window.removeEventListener("popstate", I);
+			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", L), window.removeEventListener("popstate", L);
 		}), (s, g) => (S(), u("div", {
 			class: "fg-capture",
 			"data-enhanced": a.value
-		}, [p(n, {
-			"model-value": h.value,
-			items: m.value,
-			label: e.label,
-			"onUpdate:modelValue": g[0] ||= (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", {
-				key: 0,
-				id: `${e.idPrefix}${n.id}`,
-				class: "fg-capture__figure"
-			}, [d("div", ve, [p(Q, {
-				html: n.html,
-				label: `Terminal capture: ${n.label}`,
-				fit: a.value
-			}, null, 8, [
-				"html",
-				"label",
-				"fit"
-			]), a.value ? (S(), u("button", {
+		}, [
+			a.value && _.value ? (S(), u("button", {
 				key: 0,
+				ref_key: "fullSizeButton",
+				ref: A,
 				type: "button",
-				class: "fg-capture__expand",
-				"aria-label": `Expand ${n.label} capture`,
+				class: "fg-capture__full",
+				"aria-label": `Expand ${_.value.label} capture at full size`,
 				"aria-haspopup": "dialog",
-				title: `Open ${n.label} capture at full size`,
-				onClick: (e) => A(n, e)
-			}, null, 8, ye)) : l("", !0)]), n.command || s.$slots.caption ? (S(), u("figcaption", be, [n.command ? (S(), u("code", xe, D(n.command), 1)) : l("", !0), T(s.$slots, "caption", { item: n })])) : l("", !0)], 8, _e)) : l("", !0)], 64))), 128))]),
-			_: 3
-		}, 8, [
-			"model-value",
-			"items",
-			"label"
-		]), p(t, {
-			open: _.value,
-			"onUpdate:open": g[2] ||= (e) => _.value = e,
-			title: `${v.value?.label ?? ""} capture`,
-			description: "Scroll to read the full capture.",
-			class: "fg-capture-viewer",
-			onCloseAutoFocus: j
-		}, {
-			footer: M(() => [p(r, {
-				variant: "secondary",
-				size: "lg",
-				onClick: g[1] ||= (e) => _.value = !1
+				onClick: g[0] ||= (e) => j(_.value)
+			}, [...g[4] ||= [d("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.5",
+				"aria-hidden": "true"
+			}, [d("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), d("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ve)) : l("", !0),
+			p(n, {
+				"model-value": h.value,
+				items: m.value,
+				label: e.label,
+				"onUpdate:modelValue": g[1] ||= (e) => i.value = e
 			}, {
-				default: M(() => [...g[3] ||= [f(" Close capture ", -1)]]),
+				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", {
+					key: 0,
+					id: `${e.idPrefix}${n.id}`,
+					class: "fg-capture__figure"
+				}, [d("div", be, [p(Q, {
+					html: n.html,
+					label: `Terminal capture: ${n.label}`,
+					fit: a.value
+				}, null, 8, [
+					"html",
+					"label",
+					"fit"
+				]), a.value ? (S(), u("button", {
+					key: 0,
+					type: "button",
+					class: "fg-capture__expand",
+					tabindex: "-1",
+					"aria-hidden": "true",
+					title: `Open ${n.label} capture at full size`,
+					onClick: (e) => j(n)
+				}, null, 8, xe)) : l("", !0)]), n.command || s.$slots.caption ? (S(), u("figcaption", Se, [n.command ? (S(), u("code", Ce, D(n.command), 1)) : l("", !0), T(s.$slots, "caption", { item: n })])) : l("", !0)], 8, ye)) : l("", !0)], 64))), 128))]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"items",
+				"label"
+			]),
+			p(t, {
+				open: v.value,
+				"onUpdate:open": g[3] ||= (e) => v.value = e,
+				title: `${y.value?.label ?? ""} capture`,
+				description: "Scroll to read the full capture.",
+				class: "fg-capture-viewer",
+				onCloseAutoFocus: N
+			}, {
+				footer: M(() => [p(r, {
+					variant: "secondary",
+					size: "lg",
+					onClick: g[2] ||= (e) => v.value = !1
+				}, {
+					default: M(() => [...g[5] ||= [f(" Close capture ", -1)]]),
+					_: 1
+				})]),
+				default: M(() => [y.value ? (S(), c(Q, {
+					key: 0,
+					html: y.value.html,
+					label: `${y.value.label} capture at full size`,
+					fit: !1
+				}, null, 8, ["html", "label"])) : l("", !0)]),
 				_: 1
-			})]),
-			default: M(() => [v.value ? (S(), c(Q, {
-				key: 0,
-				html: v.value.html,
-				label: `${v.value.label} capture at full size`,
-				fit: !1
-			}, null, 8, ["html", "label"])) : l("", !0)]),
-			_: 1
-		}, 8, ["open", "title"])], 8, ge));
+			}, 8, ["open", "title"])
+		], 8, _e));
 	}
-}), Ce = { class: "fg-command-list" }, we = { class: "fg-command-list__table" }, Te = { scope: "col" }, Ee = { scope: "col" }, De = { key: 0 }, $ = { class: "fg-command-list__command" }, Oe = { class: "fg-command-list__description" }, ke = {
+}), 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 = {
 	key: 0,
 	class: "fg-command-list__action"
-}, Ae = [
+}, Me = [
 	"disabled",
 	"aria-label",
 	"title",
 	"onClick"
-], je = {
+], Ne = {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, Me = {
+}, Pe = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, Ne = /* @__PURE__ */ m({
+}, Fe = /* @__PURE__ */ m({
 	__name: "UiCommandList",
 	props: {
 		items: {},
@@ -476,14 +491,14 @@ var I = "tool-site-theme", L = (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."
 		}), p = C(""), m = s(() => a.value || (r.value ? `${p.value} copied to clipboard.` : "")), h = (e) => (p.value = e, c(e));
-		return (e, s) => (S(), u("div", Ce, [d("table", we, [d("thead", null, [d("tr", null, [
-			d("th", Te, D(t.commandHeader), 1),
-			d("th", Ee, D(t.descriptionHeader), 1),
-			t.copyable ? (S(), u("td", De)) : l("", !0)
+		return (e, s) => (S(), u("div", Te, [d("table", Ee, [d("thead", null, [d("tr", null, [
+			d("th", De, D(t.commandHeader), 1),
+			d("th", $, D(t.descriptionHeader), 1),
+			t.copyable ? (S(), u("td", Oe)) : l("", !0)
 		])]), d("tbody", null, [(S(!0), u(o, null, w(t.items, (c) => (S(), u("tr", { key: c.command }, [
-			d("td", $, [d("code", null, D(c.command), 1)]),
-			d("td", Oe, [T(e.$slots, "description", { item: c }, () => [f(D(c.description), 1)])]),
-			t.copyable ? (S(), u("td", ke, [n.value ? (S(), u("button", {
+			d("td", ke, [T(e.$slots, "command", { item: c }, () => [d("code", null, D(c.command), 1)])]),
+			d("td", Ae, [T(e.$slots, "description", { item: c }, () => [f(D(c.description), 1)])]),
+			t.copyable ? (S(), u("td", je, [n.value ? (S(), u("button", {
 				key: 0,
 				type: "button",
 				class: "fg-command-list__copy",
@@ -491,13 +506,13 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				"aria-label": `Copy ${c.command}`,
 				title: `Copy ${c.command}`,
 				onClick: (e) => h(c.command)
-			}, [(S(), u("svg", je, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Me)) : (S(), u(o, { key: 1 }, [s[0] ||= d("rect", {
+			}, [(S(), u("svg", Ne, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Pe)) : (S(), u(o, { key: 1 }, [s[0] ||= d("rect", {
 				x: "8",
 				y: "8",
 				width: "12",
 				height: "13",
 				rx: "2"
-			}, null, -1), s[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))]))], 8, Ae)) : l("", !0)])) : l("", !0)
+			}, null, -1), s[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))]))], 8, Me)) : l("", !0)])) : l("", !0)
 		]))), 128))])]), d("span", {
 			class: _(["fg-command-list__status", { "fg-site-sr-only": !O(a) }]),
 			role: "status"
@@ -505,4 +520,4 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 	}
 });
 //#endregion
-export { I as SITE_APPEARANCE_KEY, B as SITE_PROJECTS, Se as UiCapture, Ne as UiCommandList, ie as UiSiteHeader, me as UiSiteNav, R as applySiteAppearance, te as siteThemeBootScript, z as useSiteAppearance };
+export { I as SITE_APPEARANCE_KEY, B as SITE_PROJECTS, we as UiCapture, Fe as UiCommandList, ae as UiSiteHeader, he as UiSiteNav, R as applySiteAppearance, ne as siteThemeBootScript, z as useSiteAppearance };

package/package.json

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

package/src/site.css

@@ -170,6 +170,7 @@
    * 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 {
+    position: relative;
     min-width: 0;
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-panel);
@@ -177,6 +178,27 @@
   }
   .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); }
+  .fg-capture__full {
+    position: absolute;
+    top: 0;
+    right: var(--space-2);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-height: var(--control-lg);
+    padding-inline: var(--space-2);
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: var(--color-muted);
+    font: var(--text-sm) / var(--leading) var(--font-ui);
+    cursor: pointer;
+  }
+  .fg-capture__full:hover { color: var(--color-text); }
+  .fg-capture__full svg { width: 14px; height: 14px; flex: none; }
+  .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); }
   .fg-capture:not([data-enhanced="true"]) .fg-tabs__panel + .fg-tabs__panel { border-top: 1px solid var(--color-border-subtle); }
@@ -407,6 +429,10 @@
   }
   @media (max-width: 640px) {
     .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__full { min-width: var(--control-lg); justify-content: center; }
+    .fg-capture__full-label { display: none; }
     .fg-command-list__table,
     .fg-command-list tbody { display: block; }
     .fg-command-list thead {