@filipgutica/ui 1.16.1 → 1.18.0

package/README.md

@@ -186,9 +186,9 @@ import read from './captures/read.html?raw'
 
 `UiSiteNav` renders a labelled list of route rows in optional `groups`. Links to
 `#id` sections track the reader's position with `useActiveSection` and get
-`aria-current="location"`, an accent bar without a fill. An item with
+`aria-current="location"`, an accent pip without a fill. An item with
 `current: true` gets
-`aria-current="page"`, the selected fill and accent bar; `code: true` shows the
+`aria-current="page"`, a quiet filled row with a slight lift and accent text; `code: true` shows the
 label in the monospace font. The page grid places the rail, which stays in view
 on desktop. At 800px and below it is a native disclosure until the page is
 interactive, then a drawer. The disclosure, the drawer button, and the drawer

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./use-active-section-DMbpGE2f.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./use-active-section-DpcSUhA9.js";
 import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, inject as g, mergeModels as _, mergeProps as v, normalizeStyle as y, openBlock as b, provide as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as T, shallowRef as ee, toDisplayString as E, unref as D, useAttrs as te, useId as O, useModel as ne, useSlots as k, watch as re, withCtx as A } from "vue";
 import { CheckboxIndicator as j, CheckboxRoot as M, Primitive as N, ProgressIndicator as P, ProgressRoot as F, RadioGroupItem as I, RadioGroupRoot as L, SliderRange as R, SliderRoot as z, SliderThumb as B, SliderTrack as V, Toggle as H } 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, s as a, t as o } from "./use-active-section-DMbpGE2f.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./use-active-section-DpcSUhA9.js";
 import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as b, onMounted as x, onUnmounted as S, openBlock as C, ref as w, renderList as T, renderSlot as E, shallowRef as D, toDisplayString as O, unref as k, useId as A, useModel as j, useSlots as M, useTemplateRef as N, watch as P, withCtx as F } from "vue";
 import { tryOnMounted as I, usePreferredDark as L, useStorage as R } from "@vueuse/core";
 //#region src/site/appearance.ts

package/dist/{use-active-section-DMbpGE2f.js → use-active-section-DpcSUhA9.js}

@@ -185,13 +185,32 @@ var N = /* @__PURE__ */ c({
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let a = n;
-		return (n, o) => (f(), i("div", {
+		let a = n, o = b("root"), s = !1;
+		u(() => requestAnimationFrame(() => {
+			s = !0;
+		}));
+		let c = () => {
+			o.value && (delete o.value.dataset.slide, o.value.style.removeProperty("--fg-segmented-slide-left"), o.value.style.removeProperty("--fg-segmented-slide-right"));
+		};
+		return x(() => t.modelValue, (e, n) => {
+			let r = o.value;
+			if (!r) return;
+			let i = Array.from(r.children).filter((e) => e instanceof HTMLElement), a = i[t.items.findIndex((e) => e.value === n)], l = i[t.items.findIndex((t) => t.value === e)];
+			if (!s || !a || !l || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+				c();
+				return;
+			}
+			let u = getComputedStyle(a, "::before"), d = a.getBoundingClientRect(), f = d.left + parseFloat(u.left), p = d.right - parseFloat(u.right), m = l.getBoundingClientRect();
+			c(), r.style.setProperty("--fg-segmented-slide-left", `${f - m.left}px`), r.style.setProperty("--fg-segmented-slide-right", `${m.right - p}px`), r.dataset.slide = "";
+		}, { flush: "pre" }), (n, s) => (f(), i("div", {
+			ref_key: "root",
+			ref: o,
 			class: "fg-segmented",
 			role: "group",
 			"aria-label": t.label,
 			"data-size": t.size,
-			"data-icon-only": t.iconOnly ? "true" : void 0
+			"data-icon-only": t.iconOnly ? "true" : void 0,
+			onAnimationend: s[0] ||= (e) => e.animationName === "fg-segmented-slide" && c()
 		}, [(f(!0), i(e, null, h(t.items, (e) => (f(), i("button", {
 			key: e.value,
 			type: "button",
@@ -204,7 +223,7 @@ var N = /* @__PURE__ */ c({
 		}, [g(n.$slots, "icon", {
 			item: e,
 			pressed: t.modelValue === e.value
-		}), t.iconOnly ? r("", !0) : (f(), i("span", W, _(e.label), 1))], 8, U))), 128))], 8, H));
+		}), t.iconOnly ? r("", !0) : (f(), i("span", W, _(e.label), 1))], 8, U))), 128))], 40, H));
 	}
 }), K = { class: "fg-tabs" }, q = ["aria-label", "data-clipped"], J = [
 	"id",

package/package.json

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

package/src/components.css

@@ -16,7 +16,8 @@
     min-width: 0;
     max-width: 100%;
     overflow: hidden;
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid transparent;
+    box-shadow: var(--shadow-raise);
     border-radius: var(--radius-panel);
     background: var(--color-code);
     color: var(--color-code-text);
@@ -146,13 +147,15 @@
   }
 
   .fg-button {
+    --fg-button-shadow: var(--shadow-raise);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-2);
     color: var(--color-button-text);
     background: var(--color-button-bg);
-    box-shadow: none;
+    box-shadow: var(--fg-button-shadow);
+    transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
     font-weight: 500;
     letter-spacing: -0.01em;
     line-height: 1.25;
@@ -163,8 +166,8 @@
     background: var(--color-button-hover);
   }
 
-  .fg-button:active:not(:disabled) {
-    box-shadow: none;
+  .fg-button:where(:not([data-variant]), [data-variant="primary"]):is(:active, [aria-pressed="true"]):not(:disabled) {
+    background: color-mix(in srgb, var(--color-button-bg) 80%, var(--color-bg));
   }
 
   .fg-button:disabled,
@@ -239,24 +242,29 @@
   }
 
   .fg-button[data-variant="secondary"] {
-    border-color: var(--color-border);
     color: var(--color-text);
-    background: transparent;
+    background: var(--color-control-thumb);
+  }
+
+  .fg-button[data-variant="secondary"]:hover:not(:disabled) {
+    color: var(--color-text);
+    background: color-mix(in srgb, var(--color-text) 8%, var(--color-control-thumb));
   }
 
-  .fg-button[data-variant="secondary"]:hover:not(:disabled),
   .fg-button[data-variant="ghost"]:hover:not(:disabled) {
     color: var(--color-text);
     background: var(--color-row-hover);
   }
 
   .fg-button[data-variant="ghost"] {
+    --fg-button-shadow: 0 0 0 0 transparent;
     color: var(--color-muted);
     background: transparent;
     box-shadow: none;
   }
 
   .fg-button[data-variant="danger"] {
+    --fg-button-shadow: 0 0 0 0 transparent;
     color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
     box-shadow: none;
@@ -270,6 +278,7 @@
   }
 
   .fg-button[data-variant="text"] {
+    --fg-button-shadow: 0 0 0 0 transparent;
     height: auto;
     min-height: auto;
     padding: var(--space-1);
@@ -285,13 +294,20 @@
     background: transparent;
   }
 
+  /* Keep press specificity level with focus so its halo can wrap the sink shadow. */
+  .fg-button:where(:not([data-variant="danger"], [data-variant="text"])):is(:active, [aria-pressed="true"]):not(:disabled) {
+    --fg-button-shadow: var(--shadow-sink);
+    box-shadow: var(--fg-button-shadow);
+  }
+  .fg-button[data-variant="secondary"]:is(:active, [aria-pressed="true"]):not(:disabled) { background: var(--color-well); }
+  .fg-button:disabled { box-shadow: none; }
+
   .fg-input,
   .fg-select {
     width: 100%;
-    border-color: var(--color-input-border);
     color: var(--color-input-text);
-    background: var(--color-input-bg);
-    box-shadow: none;
+    background: var(--color-well);
+    box-shadow: var(--shadow-sink);
     line-height: 1.35;
   }
 
@@ -348,7 +364,7 @@
       min-height: var(--control-sm);
       gap: var(--space-2);
       padding: var(--space-2) var(--space-3);
-      border-radius: var(--radius-control);
+      border-radius: calc(var(--radius-panel) - var(--space-1));
       color: var(--color-text);
       background: transparent;
       cursor: pointer;
@@ -419,7 +435,7 @@
     margin-top: 0.1rem;
     place-items: center;
     border: 1px solid var(--color-input-border);
-    border-radius: var(--radius-control);
+    border-radius: var(--radius-inline);
     color: var(--color-button-text);
     background: var(--color-input-bg);
     box-shadow: var(--shadow-control);
@@ -494,25 +510,24 @@
     min-width: 0;
     padding: var(--space-3);
     overflow: hidden;
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid transparent;
     border-radius: var(--radius-panel);
     color: var(--color-text);
     background: var(--color-surface-raised);
-    box-shadow: none;
+    box-shadow: var(--shadow-raise);
     text-align: left;
     cursor: pointer;
     transition: transform var(--duration-fast) var(--ease-out);
   }
 
-  .fg-radio-card:hover:not([data-disabled]) {
-    border-color: var(--color-border);
+  .fg-radio-card:hover:not([data-disabled], [data-state="checked"]) {
+    background: color-mix(in srgb, var(--color-surface-muted) 45%, var(--color-surface-raised));
   }
 
-  /* Checked choices use the accent, as the checkbox does; blue stays for links and focus. */
+  /* Depth and a check badge distinguish the choice without an accent ring. */
   .fg-radio-card[data-state="checked"] {
-    border-color: var(--color-accent);
-    outline: 1px solid var(--color-accent);
-    outline-offset: -2px;
+    background: var(--color-well);
+    box-shadow: var(--shadow-sink);
   }
 
   .fg-radio-card[data-disabled] {
@@ -541,14 +556,26 @@
   }
 
   .fg-radio-card[data-state="checked"] .fg-radio-card__indicator {
-    border: 0.3rem solid var(--color-accent);
+    border-color: var(--color-accent);
+    color: var(--color-accent-text);
+    background: var(--color-accent);
+  }
+
+  .fg-radio-card[data-state="checked"] .fg-radio-card__indicator::after {
+    content: "";
+    position: absolute;
+    inset: 2px 4px 4px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
   }
 
   .fg-badge {
     display: inline-flex;
     align-items: center;
     width: fit-content;
-    border: 1px solid var(--color-border-subtle);
+    gap: 6px;
+    border: 1px solid transparent;
     border-radius: var(--radius-pill);
     padding: 0.18rem 0.56rem;
     color: var(--color-muted);
@@ -558,41 +585,53 @@
     line-height: 1.25;
   }
 
-  /* A tone badge is a tinted pill whose text carries the status colour, darkened toward the text
-   * colour so it reads at small sizes on the tint. */
-  .fg-badge[data-tone]:not([data-tone="neutral"]) { border-color: transparent; }
-  .fg-badge[data-tone="info"] { color: color-mix(in srgb, var(--color-info) 80%, var(--color-text)); background: var(--color-info-surface); }
-  .fg-badge[data-tone="success"] { color: color-mix(in srgb, var(--color-success) 80%, var(--color-text)); background: var(--color-success-surface); }
-  .fg-badge[data-tone="warning"] { color: color-mix(in srgb, var(--color-warning) 80%, var(--color-text)); background: var(--color-warning-surface); }
+  /* Status tint and text use the same hue; neutral metadata has no status dot. */
+  .fg-badge[data-tone]:not([data-tone="neutral"]) {
+    color: color-mix(in srgb, var(--fg-badge-tone) 75%, var(--color-text));
+    background: color-mix(in srgb, var(--fg-badge-tone) 22%, var(--color-surface-raised));
+  }
+  :root.dark .fg-badge[data-tone]:not([data-tone="neutral"]) {
+    color: color-mix(in srgb, var(--fg-badge-tone) 85%, var(--color-text));
+  }
+  .fg-badge[data-tone]:not([data-tone="neutral"])::before {
+    content: "";
+    flex: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+  .fg-badge[data-tone="info"] { --fg-badge-tone: var(--color-info); }
+  .fg-badge[data-tone="success"] { --fg-badge-tone: var(--color-success); }
+  .fg-badge[data-tone="warning"] { --fg-badge-tone: var(--color-warning); }
   .fg-badge[data-tone="danger"],
-  .fg-badge[data-tone="error"] { color: color-mix(in srgb, var(--color-error) 80%, var(--color-text)); background: var(--color-error-surface); }
+  .fg-badge[data-tone="error"] { --fg-badge-tone: var(--color-error); }
 
   .fg-alert {
     display: flex;
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-3) var(--space-4);
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid transparent;
     border-radius: var(--radius-panel);
     color: var(--color-text);
     background: var(--color-surface);
   }
 
-  .fg-alert[data-tone="info"] { border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-border-subtle)); background: var(--color-info-surface); }
-  .fg-alert[data-tone="success"] { border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border-subtle)); background: var(--color-success-surface); }
-  .fg-alert[data-tone="warning"] { border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border-subtle)); background: var(--color-warning-surface); }
+  .fg-alert[data-tone="info"] { background: var(--color-info-surface); }
+  .fg-alert[data-tone="success"] { background: var(--color-success-surface); }
+  .fg-alert[data-tone="warning"] { background: var(--color-warning-surface); }
   .fg-alert[data-tone="danger"],
   .fg-alert[data-tone="error"] {
-    border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-border-subtle));
     color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
   }
 
   .fg-surface {
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid transparent;
     border-radius: var(--radius-panel);
     background: var(--color-surface-raised);
-    box-shadow: none;
+    box-shadow: var(--shadow-raise);
   }
 
   .fg-surface[data-padding="compact"] { padding: var(--space-3); }
@@ -601,11 +640,11 @@
   .fg-card {
     min-width: 0;
     overflow: hidden;
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid transparent;
     border-radius: var(--radius-panel);
     color: var(--color-text);
     background: var(--color-surface-raised);
-    box-shadow: none;
+    box-shadow: var(--shadow-raise);
   }
 
   .fg-card__header {
@@ -725,20 +764,22 @@
   /* Segmented control: one pressed choice on a muted track, so it reads as a raised thumb in both themes. */
   .fg-segmented {
     --fg-segmented-item: var(--control-md);
-    /* The thumb is lighter than the track in both themes; the dark raised surface is darker than the track. */
-    --fg-segmented-thumb: light-dark(var(--color-row-selected), color-mix(in srgb, var(--color-text) 10%, var(--color-surface-muted)));
+    --fg-segmented-thumb: var(--color-surface-raised);
     display: inline-flex;
     flex: none;
     /* 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);
+    background: var(--color-well);
+    box-shadow: var(--shadow-sink);
+    /* Thumbs stack on the track, under every label, so a sliding thumb never covers its neighbour's. */
+    isolation: isolate;
   }
+  :root.dark .fg-segmented { --fg-segmented-thumb: color-mix(in srgb, var(--color-surface-raised) 88%, white); }
   .fg-segmented[data-size="sm"] { --fg-segmented-item: var(--control-sm); font-size: var(--text-sm); }
   .fg-segmented[data-size="lg"] { --fg-segmented-item: var(--control-lg); font-size: var(--text-lg); }
   .fg-segmented__item {
     position: relative;
-    isolation: isolate;
     display: inline-flex;
     gap: var(--space-2);
     min-height: var(--fg-segmented-item);
@@ -754,16 +795,27 @@
   }
   .fg-segmented[data-icon-only="true"] .fg-segmented__item { width: var(--fg-segmented-item); padding: 0; }
   /* The thumb is inset inside each full-size button, so it floats on the track and the hit target keeps its size. */
-  .fg-segmented__item::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: var(--radius-inline); }
+  .fg-segmented__item::before { content: ""; position: absolute; inset: 2px; z-index: -2; border-radius: var(--radius-control); pointer-events: none; }
   .fg-segmented__item:hover:not(:disabled, [aria-pressed="true"]) { color: var(--color-text); }
   .fg-segmented__item:hover:not(:disabled, [aria-pressed="true"])::before { background: color-mix(in srgb, var(--fg-segmented-thumb) 45%, transparent); }
-  /* The ring gives the pressed choice 3:1 against the track in both themes (WCAG 1.4.11). */
-  .fg-segmented__item[aria-pressed="true"] { color: var(--color-text); }
+  /* The accent label or icon marks the pressed choice at 3:1 against its thumb. */
+  .fg-segmented__item[aria-pressed="true"] { color: var(--color-accent); }
   /* Drawn inside the button, the ring hugs the thumb instead of reaching the next choice. */
   .fg-segmented .fg-segmented__item:focus-visible { outline-offset: -2px; }
   .fg-segmented__item[aria-pressed="true"]::before {
+    z-index: -1;
     background: var(--fg-segmented-thumb);
-    box-shadow: inset 0 0 0 1px var(--color-border);
+    box-shadow: var(--shadow-raise);
+  }
+  /* Motion answers only the reader: hover, and a change of choice, which the script marks
+   * with the thumb's start over the previous option. A theme change recolours at once. */
+  @media (prefers-reduced-motion: no-preference) {
+    .fg-segmented__item:hover:not(:disabled, [aria-pressed="true"]) { transition: color var(--duration-fast) var(--ease-out); }
+    .fg-segmented[data-slide] .fg-segmented__item { transition: color var(--duration) var(--ease-out); }
+    .fg-segmented[data-slide] .fg-segmented__item[aria-pressed="true"]::before { animation: fg-segmented-slide var(--duration) var(--ease-out); }
+  }
+  @keyframes fg-segmented-slide {
+    from { left: var(--fg-segmented-slide-left); right: var(--fg-segmented-slide-right); }
   }
 
   .fg-switch { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
@@ -801,7 +853,8 @@
     height: 1rem;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-pill);
-    background: var(--color-surface-muted);
+    background: var(--color-well);
+    box-shadow: var(--shadow-sink);
     transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
   }
 
@@ -813,7 +866,8 @@
     width: 0.625rem;
     height: 0.625rem;
     border-radius: var(--radius-pill);
-    background: var(--color-border);
+    background: var(--color-surface-raised);
+    box-shadow: var(--shadow-raise);
     content: "";
     transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
   }
@@ -990,8 +1044,26 @@
   .fg-toggle-button:focus-visible,
   .fg-segmented__item:focus-visible,
   .fg-switch__control:focus-visible .fg-switch__track {
-    outline: 2px solid var(--color-focus);
+    outline: 2px solid color-mix(in srgb, var(--color-accent) 80%, transparent);
     outline-offset: 2px;
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
+  }
+
+  .fg-button:focus-visible:not(:disabled) {
+    box-shadow: var(--fg-button-shadow), 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
+  }
+
+  .fg-input:focus-visible,
+  .fg-select:focus-visible,
+  .fg-radio-card[data-state="checked"]:focus-visible,
+  .fg-switch__control:focus-visible .fg-switch__track {
+    box-shadow: var(--shadow-sink), 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
+  }
+  .fg-dialog__content:focus-visible {
+    box-shadow: var(--shadow-dialog), 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
+  }
+  .fg-radio-card:not([data-state="checked"]):focus-visible {
+    box-shadow: var(--shadow-raise), 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
   }
 
   /* The control is a larger transparent hit area, so the ring follows the visible track instead. */
@@ -1025,6 +1097,12 @@
   }
 
   @media (forced-colors: active) {
+    .fg-radio-card[data-state="checked"] .fg-radio-card__indicator {
+      forced-color-adjust: none;
+      border-color: Highlight;
+      color: HighlightText;
+      background: Highlight;
+    }
     /* Forced colors drop the fill and the ring, so the pressed choice takes the system highlight. */
     .fg-segmented__item[aria-pressed="true"] { forced-color-adjust: none; color: HighlightText; }
     .fg-segmented__item[aria-pressed="true"]::before { forced-color-adjust: none; background: Highlight; }

package/src/site.css

@@ -201,30 +201,39 @@
 
   /* Route rows. Hover is neutral, and the current page keeps its selected fill on
    * hover. An in-page section marker (aria-current="location") must look different
-   * from the current page, so it keeps the bar without the selected fill. */
+   * from the current page, so it uses an accent pip without the raised fill. */
   .fg-site-nav a {
     display: flex;
     min-height: var(--row);
     align-items: center;
     padding-inline: var(--space-3);
-    border-radius: var(--radius-control);
+    border-radius: var(--radius-field);
     color: var(--color-muted);
     font-family: var(--font-mono);
     font-size: var(--text-sm);
     text-decoration: none;
-    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
+    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
   }
   .fg-site-nav a:hover { background: var(--color-row-hover); color: var(--color-text); }
   .fg-site-nav a[aria-current="page"] {
-    background: var(--color-surface-raised);
-    box-shadow: inset 2px 0 0 var(--color-project);
-    color: var(--color-text);
+    background: var(--color-nav-current);
+    box-shadow: var(--shadow-nav-current);
+    color: var(--color-accent);
     font-weight: var(--weight-medium);
   }
-  .fg-site-nav a[aria-current="location"] { box-shadow: inset 2px 0 0 var(--color-project); color: var(--color-text); font-weight: var(--weight-medium); }
+  .fg-site-nav a[aria-current="location"] { position: relative; color: var(--color-text); font-weight: var(--weight-medium); }
+  .fg-site-nav a[aria-current="location"]::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: var(--space-1);
+    width: 3px;
+    height: 14px;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent);
+  }
   .fg-site-nav a code { font-family: var(--font-mono); font-size: var(--text-sm); }
 
-  /* Forced colors drop the inset marker, so the current link takes a system border. */
+  /* Forced colors drop shadows, so the current link takes a system border. */
   @media (forced-colors: active) {
     .fg-site-nav a[aria-current] { border-inline-start: 2px solid Highlight; }
   }
@@ -418,7 +427,7 @@
   .fg-capture-viewer .fg-capture__screen {
     max-height: calc(100dvh - var(--space-16) * 3);
     overflow: auto;
-    border-radius: var(--radius-control);
+    border-radius: var(--radius-inline);
   }
 
   /* Command table (UiCommandList). Wide commands scroll inside it on larger

package/src/theme.css

@@ -37,6 +37,10 @@
   --color-surface: #e9ebed;
   --color-surface-raised: #fbfbfc;
   --color-surface-muted: #e2e5e8;
+  --color-well: var(--color-surface-muted);
+  --color-control-thumb: var(--color-surface-raised);
+  --color-nav-current: var(--color-surface-raised);
+  --shadow-nav-current: 0 1px 3px rgb(130 142 158 / 40%);
   --color-text: #101315;
   --color-muted: #50575e;
   --color-link: #0b5f7c;
@@ -78,15 +82,18 @@
   --color-warning-surface: #e7e2de;
   --color-success-surface: #d9e5e1;
   --color-info-surface: #d9e3f2;
-  --radius-inline: 3px;
-  --radius-control: 4px;
-  --radius-panel: 6px;
+  --radius-inline: 6px;
+  --radius-control: 999px;
+  --radius-panel: 16px;
+  --radius-field: 10px;
   --radius-pill: 999px;
   --duration-fast: 120ms;
   --duration: 180ms;
   --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
   --shadow-control: none;
   --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
+  --shadow-raise: 2px 2px 6px rgb(130 142 158 / 35%), -2px -2px 6px rgb(255 255 255 / 80%);
+  --shadow-sink: inset 1.2px 1.2px 3.6px rgb(130 142 158 / 35%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 80%);
 
   --color-project: #4b45d1;
   --color-accent-text: var(--color-bg);
@@ -106,6 +113,10 @@
   --color-surface: #13171a;
   --color-surface-raised: #181d21;
   --color-surface-muted: #20262b;
+  --color-well: color-mix(in srgb, var(--color-bg) 87.5%, black);
+  --color-control-thumb: color-mix(in srgb, var(--color-surface-raised) 88%, white);
+  --color-nav-current: color-mix(in srgb, var(--color-text) 7%, transparent);
+  --shadow-nav-current: 0 1px 2px rgb(0 0 0 / 25%);
   --color-text: #e6e9eb;
   --color-muted: #9aa3ab;
   --color-link: #67c1df;
@@ -144,6 +155,8 @@
   --color-shadow: rgb(0 0 0 / 32%);
   --color-overlay: rgb(0 0 0 / 62%);
   --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
+  --shadow-raise: 2px 2px 6px rgb(0 0 0 / 50%), -2px -2px 6px rgb(255 255 255 / 5%);
+  --shadow-sink: inset 1.2px 1.2px 3.6px rgb(0 0 0 / 55%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 5%);
 
   --color-project: #a5a1ff;
   --color-accent-text: var(--color-bg);