@filipgutica/ui 1.17.0 → 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.17.0",
+  "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

@@ -147,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;
@@ -164,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,
@@ -241,12 +243,12 @@
 
   .fg-button[data-variant="secondary"] {
     color: var(--color-text);
-    background: var(--color-surface-muted);
+    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-surface-muted));
+    background: color-mix(in srgb, var(--color-text) 8%, var(--color-control-thumb));
   }
 
   .fg-button[data-variant="ghost"]:hover:not(:disabled) {
@@ -255,12 +257,14 @@
   }
 
   .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;
@@ -274,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);
@@ -289,6 +294,14 @@
     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%;
@@ -759,13 +772,14 @@
     border-radius: var(--radius-control);
     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);
@@ -781,7 +795,7 @@
   }
   .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-control); }
+  .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 accent label or icon marks the pressed choice at 3:1 against its thumb. */
@@ -789,9 +803,20 @@
   /* 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: 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; }
   .fg-switch__control {
@@ -1024,6 +1049,10 @@
     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,

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-inline);
+    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; }
   }

package/src/theme.css

@@ -38,6 +38,9 @@
   --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;
@@ -82,6 +85,7 @@
   --radius-inline: 6px;
   --radius-control: 999px;
   --radius-panel: 16px;
+  --radius-field: 10px;
   --radius-pill: 999px;
   --duration-fast: 120ms;
   --duration: 180ms;
@@ -110,6 +114,9 @@
   --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;