@filipgutica/ui 1.8.0 → 1.8.1

package/README.md

@@ -18,6 +18,7 @@ Import the styles from your application stylesheet:
 ```css
 @import "tailwindcss";
 @import "@filipgutica/ui/theme.css";
+@import "@filipgutica/ui/themes/graphite-indigo.css";
 @import "@filipgutica/ui/components.css";
 ```
 
@@ -93,13 +94,10 @@ The gallery's search-and-install dialog is docs-only, not an exported component.
 Applications can build their own picker with the exported components and theme
 helpers. `UiSiteHeader` includes the built-in System, Light, and Dark control.
 
-The default theme is unchanged. To opt in to Graphite Indigo, import it after
-`theme.css`:
-
-```css
-@import "@filipgutica/ui/theme.css";
-@import "@filipgutica/ui/themes/graphite-indigo.css";
-```
+The install steps above import Graphite Indigo, the palette of the project
+sites, after `theme.css`. To keep the base theme instead, with blue actions and
+warm greys, leave out the `themes/graphite-indigo.css` import. Graphite Indigo
+stays opt-in: `theme.css` alone still gives the base theme.
 
 ## Project sites
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-qEJQS1S9.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";
 //#region src/components/UiCard.vue?vue&type=script&setup=true&lang.ts

package/dist/site.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-qEJQS1S9.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";
 //#region src/site/appearance.ts

package/dist/{use-active-section-CiflgGBI.js → use-active-section-qEJQS1S9.js}

@@ -1,9 +1,9 @@
-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";
+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, useTemplateRef as b, watch as x, withCtx as S } from "vue";
+import { DialogClose as C, DialogContent as w, DialogDescription as T, DialogOverlay as E, DialogPortal as D, DialogRoot as O, DialogTitle as k, DialogTrigger as A, Primitive as j } from "reka-ui";
+import { useTimeoutFn as M } from "@vueuse/core";
 //#endregion
 //#region src/components/UiButton.vue
-var j = /* @__PURE__ */ c({
+var N = /* @__PURE__ */ c({
 	__name: "UiButton",
 	props: {
 		disabled: {
@@ -19,7 +19,7 @@ var j = /* @__PURE__ */ c({
 		variant: { default: "primary" }
 	},
 	setup(e) {
-		return (t, r) => (f(), n(v(k), {
+		return (t, r) => (f(), n(v(j), {
 			as: "button",
 			class: "fg-button",
 			"data-size": e.size,
@@ -28,7 +28,7 @@ var j = /* @__PURE__ */ c({
 			disabled: e.disabled || e.loading,
 			type: e.type
 		}, {
-			default: b(() => [g(t.$slots, "default")]),
+			default: S(() => [g(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"data-size",
@@ -38,8 +38,8 @@ var j = /* @__PURE__ */ c({
 			"type"
 		]));
 	}
-}), M = ({ unavailableMessage: e, failureMessage: t }) => {
-	let n = m(!1), r = m(!1), i = m(""), { start: a } = A(() => {
+}), P = ({ unavailableMessage: e, failureMessage: t }) => {
+	let n = m(!1), r = m(!1), i = m(""), { start: a } = M(() => {
 		n.value = !1;
 	}, 1500, { immediate: !1 });
 	return {
@@ -61,10 +61,10 @@ var j = /* @__PURE__ */ c({
 			}
 		}
 	};
-}, N = { class: "fg-dialog__header" }, P = { class: "fg-dialog__body" }, F = {
+}, F = { class: "fg-dialog__header" }, I = { class: "fg-dialog__body" }, L = {
 	key: 0,
 	class: "fg-dialog__footer"
-}, I = /* @__PURE__ */ c({
+}, R = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDialog",
 	props: {
@@ -75,34 +75,34 @@ var j = /* @__PURE__ */ c({
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
 		let c = t;
-		return (t, u) => (f(), n(v(E), {
+		return (t, u) => (f(), n(v(O), {
 			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({
+			default: S(() => [s(v(D), null, {
+				default: S(() => [s(v(E), { class: "fg-dialog__overlay" }), s(v(w), 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)]),
+					default: S(() => [
+						a("div", F, [a("div", null, [s(v(k), { class: "fg-dialog__title" }, {
+							default: S(() => [o(_(e.title), 1)]),
 							_: 1
-						}), e.description ? (f(), n(v(C), {
+						}), e.description ? (f(), n(v(T), {
 							key: 0,
 							class: "fg-dialog__description"
 						}, {
-							default: b(() => [o(_(e.description), 1)]),
+							default: S(() => [o(_(e.description), 1)]),
 							_: 1
-						})) : r("", !0)]), s(v(x), {
+						})) : r("", !0)]), s(v(C), {
 							class: "fg-dialog__close",
 							"aria-label": "Close dialog"
 						}, {
-							default: b(() => [...u[1] ||= [o(" × ", -1)]]),
+							default: S(() => [...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)
+						a("div", I, [g(t.$slots, "default")]),
+						t.$slots.footer ? (f(), i("div", L, [g(t.$slots, "footer")])) : r("", !0)
 					]),
 					_: 3
 				}, 16)]),
@@ -111,7 +111,7 @@ var j = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), L = { class: "fg-drawer__header" }, R = { class: "fg-drawer__body" }, z = /* @__PURE__ */ c({
+}), z = { class: "fg-drawer__header" }, B = { class: "fg-drawer__body" }, V = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDrawer",
 	props: {
@@ -121,32 +121,32 @@ var j = /* @__PURE__ */ c({
 	emits: ["update:open", "closeAutoFocus"],
 	setup(e, { emit: t }) {
 		let i = t;
-		return (t, c) => (f(), n(v(E), {
+		return (t, c) => (f(), n(v(O), {
 			open: e.open,
 			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
 		}, {
-			default: b(() => [t.$slots.trigger ? (f(), n(v(O), {
+			default: S(() => [t.$slots.trigger ? (f(), n(v(A), {
 				key: 0,
 				"as-child": ""
 			}, {
-				default: b(() => [g(t.$slots, "trigger")]),
+				default: S(() => [g(t.$slots, "trigger")]),
 				_: 3
-			})) : r("", !0), s(v(T), null, {
-				default: b(() => [s(v(w), { class: "fg-drawer__overlay" }), s(v(S), l({
+			})) : r("", !0), s(v(D), null, {
+				default: S(() => [s(v(E), { class: "fg-drawer__overlay" }), s(v(w), 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)]),
+					default: S(() => [a("div", z, [s(v(k), { class: "fg-drawer__title" }, {
+						default: S(() => [o(_(e.title), 1)]),
 						_: 1
-					}), s(v(x), {
+					}), s(v(C), {
 						class: "fg-drawer__close",
 						"aria-label": "Close drawer"
 					}, {
-						default: b(() => [...c[2] ||= [o(" × ", -1)]]),
+						default: S(() => [...c[2] ||= [o(" × ", -1)]]),
 						_: 1
-					})]), a("div", R, [g(t.$slots, "default")])]),
+					})]), a("div", B, [g(t.$slots, "default")])]),
 					_: 3
 				}, 16)]),
 				_: 3
@@ -154,20 +154,20 @@ var j = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), B = { class: "fg-tabs" }, V = ["aria-label"], H = [
+}), H = { class: "fg-tabs" }, U = ["aria-label"], W = [
 	"id",
 	"aria-controls",
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], U = [
+], G = [
 	"id",
 	"role",
 	"aria-labelledby",
 	"hidden",
 	"tabindex"
-], W = ["id", "hidden"], G = /* @__PURE__ */ c({
+], K = ["id", "hidden"], q = /* @__PURE__ */ c({
 	__name: "UiTabs",
 	props: {
 		items: {},
@@ -176,13 +176,20 @@ var j = /* @__PURE__ */ c({
 	},
 	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)}`;
+		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)}`, S = (e) => `${c}-heading-${encodeURIComponent(e)}`;
 		u(() => {
 			l.value = !0;
 		});
-		let x = (e) => {
+		let C = b("list");
+		x([l, d], () => {
+			let e = C.value, t = e?.querySelector("[aria-selected=\"true\"]");
+			if (!e || !t) return;
+			let n = e.getBoundingClientRect(), { left: r, right: i } = t.getBoundingClientRect();
+			r < n.left ? e.scrollLeft -= n.left - r : i > n.right && (e.scrollLeft += i - n.right);
+		}, { flush: "post" });
+		let w = (e) => {
 			e !== d.value && s("update:modelValue", e);
-		}, S = (e) => {
+		}, T = (e) => {
 			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
 				"ArrowLeft",
 				"ArrowRight",
@@ -194,14 +201,19 @@ var j = /* @__PURE__ */ c({
 			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());
+			s && (e.preventDefault(), s.focus(), s.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			}));
 		};
-		return (t, o) => (f(), i("div", B, [l.value ? (f(), i("div", {
+		return (t, o) => (f(), i("div", H, [l.value ? (f(), i("div", {
 			key: 0,
+			ref_key: "list",
+			ref: C,
 			class: "fg-tabs__list",
 			role: "tablist",
 			"aria-label": n.label,
-			onKeydown: S
+			onKeydown: T
 		}, [(f(!0), i(e, null, h(n.items, (e) => (f(), i("button", {
 			id: p(e.value),
 			key: e.value,
@@ -211,23 +223,23 @@ var j = /* @__PURE__ */ c({
 			"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", {
+			onClick: (t) => w(e.value),
+			onFocus: (t) => w(e.value)
+		}, _(e.label), 41, W))), 128))], 40, U)) : 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),
+			"aria-labelledby": l.value ? p(e.value) : S(e.value),
 			hidden: l.value && e.value !== d.value,
 			tabindex: l.value ? 0 : void 0
 		}, [a("h3", {
-			id: b(e.value),
+			id: S(e.value),
 			class: "fg-tabs__heading",
 			hidden: l.value
-		}, _(e.label), 9, W), g(t.$slots, "panel", { value: e.value })], 8, U))), 128))]));
+		}, _(e.label), 9, K), g(t.$slots, "panel", { value: e.value })], 8, G))), 128))]));
 	}
-}), K = ({ targetIds: e }) => {
+}), J = ({ targetIds: e }) => {
 	let t = m(e[0]), n, r, i;
 	return u(() => {
 		let a = e.flatMap((e) => {
@@ -252,4 +264,4 @@ var j = /* @__PURE__ */ c({
 	}), p(t);
 };
 //#endregion
-export { M as a, I as i, G as n, j as o, z as r, K as t };
+export { P as a, R as i, q as n, N as o, V as r, J as t };

package/package.json

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

package/src/components/tabs.css

@@ -32,7 +32,7 @@
 
   .fg-tabs__tab:hover { color: var(--color-text); }
   .fg-tabs__tab[aria-selected="true"] {
-    border-bottom-color: var(--color-link);
+    border-bottom-color: var(--color-accent);
     color: var(--color-text);
   }
 
@@ -44,10 +44,15 @@
     font-weight: var(--weight-medium);
   }
 
-  .fg-tabs__tab:focus-visible, .fg-tabs__panel:focus-visible {
+  /* Inset: the tab list scrolls sideways, which would clip an outer ring. */
+  .fg-tabs__tab:focus-visible {
     outline: 2px solid var(--color-focus);
     outline-offset: -2px;
   }
+  .fg-tabs__panel:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+  }
 
   @media (max-width: 640px) {
     .fg-tabs__tab { min-height: var(--control-lg); }

package/src/components.css

@@ -51,7 +51,9 @@
   }
   .fg-code-block__copy:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
   .fg-code-block__copy svg { width: 1rem; height: 1rem; }
-  .fg-code-block__copy:focus-visible, .fg-code-block__pre:focus-visible, .fg-figure__plate:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+  /* Inset: the code block clips its content. */
+  .fg-code-block__copy:focus-visible, .fg-code-block__pre:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+  .fg-figure__plate:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
   .fg-code-block__pre { margin: 0; padding: 1rem; overflow: auto; max-height: 32rem; tab-size: 2; }
   .fg-code-block__pre, .fg-code-block__pre code { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.65; }
   .fg-code-block__pre code { display: block; color: inherit; }
@@ -323,9 +325,11 @@
       cursor: pointer;
     }
     .fg-select:not([multiple]):not([size]) option:checked { color: var(--color-row-selected-text); background: var(--color-row-selected); }
-    .fg-select:not([multiple]):not([size]) option:hover:not(:disabled), .fg-select:not([multiple]):not([size]) option:focus-visible { background: var(--color-row-hover); outline: 2px solid var(--color-focus); outline-offset: -2px; }
+    /* Pointer hover only fills the row; the focus ring marks the keyboard position. Inset: the picker scrolls. */
+    .fg-select:not([multiple]):not([size]) option:hover:not(:disabled) { background: var(--color-row-hover); }
+    .fg-select:not([multiple]):not([size]) option:focus-visible { background: var(--color-row-hover); outline: 2px solid var(--color-focus); outline-offset: -2px; }
     .fg-select:not([multiple]):not([size]) option:disabled { color: var(--color-muted); opacity: 0.58; cursor: not-allowed; }
-    .fg-select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--color-link); }
+    .fg-select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--color-accent); }
     @media (pointer: coarse) {
       .fg-select:not([multiple]):not([size]) option { min-height: var(--control-lg); }
     }
@@ -474,9 +478,10 @@
     border-color: var(--color-border);
   }
 
+  /* Checked choices use the accent, as the checkbox does; blue stays for links and focus. */
   .fg-radio-card[data-state="checked"] {
-    border-color: var(--color-link);
-    outline: 1px solid var(--color-link);
+    border-color: var(--color-accent);
+    outline: 1px solid var(--color-accent);
     outline-offset: -2px;
   }
 
@@ -506,7 +511,7 @@
   }
 
   .fg-radio-card[data-state="checked"] .fg-radio-card__indicator {
-    border: 0.3rem solid var(--color-link);
+    border: 0.3rem solid var(--color-accent);
   }
 
   .fg-badge {

package/src/site.css

@@ -129,10 +129,12 @@
   .fg-site-appearance__choice:hover { color: var(--color-text); background: var(--color-row-hover); }
   .fg-site-appearance__choice[aria-pressed="true"] { color: var(--color-text); background: var(--color-row-selected); }
 
+  /* Focus is a 2px outline outside the control, which forced-colors mode keeps. An
+   * inset ring is used only where a scrolling ancestor would clip an outer one. */
   .fg-site-header a:focus-visible,
   .fg-site-projects__trigger:focus-visible,
   .fg-site-appearance__choice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
-  .fg-site-appearance__choice:focus-visible { outline-offset: -2px; }
+  /* Inset: the desktop rail and the phone drawer scroll. */
   .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
@@ -178,8 +180,9 @@
   }
   .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); }
+  /* The Full size control sits at the end of the tab row. The list's margin, not its
+   * padding, reserves the control's width, so the scroll area and divider end before it. */
+  .fg-capture[data-enhanced="true"] .fg-tabs__list { width: auto; margin-inline-end: calc(var(--space-2) + 6.5rem); }
   .fg-capture__full {
     position: absolute;
     top: 0;
@@ -198,6 +201,7 @@
   }
   .fg-capture__full:hover { color: var(--color-text); }
   .fg-capture__full svg { width: 14px; height: 14px; flex: none; }
+  /* Inset: the capture preview below would cover an outset ring. */
   .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); }
@@ -240,8 +244,9 @@
     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; }
+  /* Inset: the enhanced panel clips its content. */
+  .fg-capture__screen:focus-visible,
+  .fg-capture__expand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   .fg-dialog__content.fg-capture-viewer {
     width: calc(100vw - var(--space-8));
     max-width: var(--page-max);
@@ -299,6 +304,7 @@
   }
   .fg-command-list__copy:hover { color: var(--color-text); background: var(--color-row-hover); }
   .fg-command-list__copy svg { width: 1rem; height: 1rem; }
+  /* Inset: the table scrolls sideways on larger screens. */
   .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); }
 
@@ -421,7 +427,7 @@
     }
     .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__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; }
@@ -430,7 +436,7 @@
   @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[data-enhanced="true"] .fg-tabs__list { margin-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,