@filipgutica/ui 1.11.1 → 1.11.2

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

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     html: string;
     label: string;
-    /** Scales the capture down to the available width instead of scrolling it. */
+    /** Fits the capture to the available width when it remains readable. */
     fit: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/site.js

@@ -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"
 	}
-], re = { class: "fg-site-header" }, V = { class: "fg-site-header__inner" }, H = ["aria-label"], U = {
+], re = { class: "fg-site-header" }, ie = { class: "fg-site-header__inner" }, V = ["aria-label"], H = {
 	class: "fg-site-projects__menu fg-site-nav",
 	"aria-label": "Projects"
-}, W = ["href", "aria-current"], G = { class: "fg-site-header__end" }, K = {
+}, U = ["href", "aria-current"], W = { class: "fg-site-header__end" }, G = {
 	key: 0,
 	class: "fg-site-header__links",
 	"aria-label": "Site links"
-}, q = ["href"], J = {
+}, K = ["href"], q = {
 	key: 0,
 	class: "fg-site-appearance",
 	role: "group",
 	"aria-label": "Color theme"
-}, Y = [
+}, J = [
 	"aria-label",
 	"title",
 	"aria-pressed",
 	"onClick"
-], X = {
+], Y = {
 	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"
-}, ie = {
+}, ae = {
 	key: 2,
 	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
-}, ae = /* @__PURE__ */ m({
+}, oe = /* @__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", re, [d("div", V, [d("details", {
+		}), y(() => document.removeEventListener("pointerdown", h)), (s, f) => (S(), u("header", re, [d("div", ie, [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, H), d("nav", U, [(S(!0), u(o, null, w(O(B), (t) => (S(), u("a", {
+		}, [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", {
 			key: t.id,
 			href: t.href,
 			"aria-current": t.id === e.project ? "page" : void 0
-		}, 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", {
+		}, 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", {
 			key: e.href,
 			href: e.href
-		}, 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", {
+		}, 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", {
 			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", X, [e.value === "system" ? (S(), u(o, { key: 0 }, [f[1] ||= d("rect", {
+		}, [(S(), u("svg", Y, [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", ie))]))], 8, Y)), 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", ae))]))], 8, J)), 64))])) : l("", !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 }, Z = /* @__PURE__ */ m({
+], de = { key: 0 }, X = /* @__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, ce)) : l("", !0), (S(!0), u(o, null, w(e.items, (e) => (S(), u("a", {
+		}, D(e.label), 9, le)) : 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", ue, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(e.label), 1)], 64))], 8, le))), 128))], 8, se))), 128))])], 8, oe));
+		}, [e.code ? (S(), u("code", de, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(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__ */ m({
+}), fe = ["data-enhanced"], pe = ["open"], me = ["aria-controls"], he = "(max-width: 800px)", ge = /* @__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(me), w(), o.value = !0, h.addEventListener("change", w);
+			h = matchMedia(he), 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)
-		}, D(e.label), 9, pe), p(Z, {
+		}, D(e.label), 9, me), p(X, {
 			"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, fe)) : (S(), c(i, {
+		])], 8, pe)) : (S(), c(i, {
 			key: 1,
 			open: l.value,
 			"onUpdate:open": h[0] ||= (e) => l.value = e,
@@ -275,7 +275,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				default: M(() => [f(D(e.label), 1)]),
 				_: 1
 			})]),
-			default: M(() => [p(Z, {
+			default: M(() => [p(X, {
 				"content-id": O(t),
 				label: e.label,
 				groups: e.groups,
@@ -288,14 +288,14 @@ var I = "tool-site-theme", L = (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",
 	"innerHTML"
-], Q = /* @__PURE__ */ m({
+], Z = .7, Q = /* @__PURE__ */ m({
 	__name: "CaptureScreen",
 	props: {
 		html: {},
@@ -303,35 +303,37 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 		fit: { type: Boolean }
 	},
 	setup(e) {
-		let t = C(), n = C(1), r = C(), i, a = () => {
+		let t = C(), n = C(1), r = C(), i = s(() => r.value !== void 0), a, o = () => {
 			if (!e.fit) {
 				r.value = void 0, n.value = 1;
 				return;
 			}
 			let i = t.value, a = i?.firstElementChild;
-			!i?.clientWidth || !(a instanceof HTMLElement) || !a.offsetWidth || (n.value = Math.min(1, i.clientWidth / a.offsetWidth), r.value = Math.ceil(a.offsetHeight * n.value) + i.offsetHeight - i.clientHeight);
+			if (!i?.clientWidth || !(a instanceof HTMLElement) || !a.offsetWidth) return;
+			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], a, { flush: "post" }), b(() => {
-			typeof ResizeObserver < "u" && (i = new ResizeObserver(a), t.value && i.observe(t.value)), a();
-		}), x(() => i?.disconnect()), (i, a) => (S(), u("div", {
+		return j(() => [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",
 			ref: t,
 			class: "fg-capture__screen",
 			role: "region",
 			"aria-label": e.label,
-			tabindex: e.fit ? void 0 : 0,
-			"data-fit": e.fit || void 0,
+			tabindex: i.value ? void 0 : 0,
+			"data-fit": i.value || void 0,
 			style: v({
 				height: r.value === void 0 ? void 0 : `${r.value}px`,
 				"--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__ */ m({
+}, we = { key: 0 }, Te = /* @__PURE__ */ m({
 	__name: "UiCapture",
 	props: /*@__PURE__*/ h({
 		items: {},
@@ -394,7 +396,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: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), d("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ve)) : l("", !0),
+			}, [d("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), d("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ye)) : l("", !0),
 			p(n, {
 				"model-value": h.value,
 				items: m.value,
@@ -405,7 +407,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 					key: 0,
 					id: `${e.idPrefix}${n.id}`,
 					class: "fg-capture__figure"
-				}, [d("div", be, [p(Q, {
+				}, [d("div", xe, [p(Q, {
 					html: n.html,
 					label: `Terminal capture: ${n.label}`,
 					fit: a.value
@@ -421,7 +423,7 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 					"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))]),
+				}, 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, [
 				"model-value",
@@ -452,26 +454,26 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 				}, null, 8, ["html", "label"])) : l("", !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__ */ m({
+}, Ie = /* @__PURE__ */ m({
 	__name: "UiCommandList",
 	props: {
 		items: {},
@@ -491,14 +493,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", 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)
+		return (e, s) => (S(), u("div", Ee, [d("table", De, [d("thead", null, [d("tr", null, [
+			d("th", $, D(t.commandHeader), 1),
+			d("th", Oe, D(t.descriptionHeader), 1),
+			t.copyable ? (S(), u("td", ke)) : l("", !0)
 		])]), d("tbody", null, [(S(!0), u(o, null, w(t.items, (c) => (S(), u("tr", { key: c.command }, [
-			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", {
+			d("td", Ae, [T(e.$slots, "command", { item: c }, () => [d("code", null, D(c.command), 1)])]),
+			d("td", je, [T(e.$slots, "description", { item: c }, () => [f(D(c.description), 1)])]),
+			t.copyable ? (S(), u("td", Me, [n.value ? (S(), u("button", {
 				key: 0,
 				type: "button",
 				class: "fg-command-list__copy",
@@ -506,13 +508,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", Ne, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Pe)) : (S(), u(o, { key: 1 }, [s[0] ||= d("rect", {
+			}, [(S(), u("svg", Pe, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Fe)) : (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, Me)) : 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, Ne)) : l("", !0)])) : l("", !0)
 		]))), 128))])]), d("span", {
 			class: _(["fg-command-list__status", { "fg-site-sr-only": !O(a) }]),
 			role: "status"
@@ -520,4 +522,4 @@ var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "
 	}
 });
 //#endregion
-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 };
+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 };

package/package.json

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

package/src/site.css

@@ -411,6 +411,8 @@
     background: transparent;
     cursor: zoom-in;
   }
+  /* Leave pointer gestures to the screen when the capture needs to scroll. */
+  .fg-capture__screen:not([data-fit]) + .fg-capture__expand { pointer-events: none; }
   .fg-capture__caption {
     display: grid;
     justify-items: start;