@filipgutica/ui 1.9.0 → 1.10.0

package/README.md

@@ -50,9 +50,10 @@ cancelable `closeAutoFocus` event and focus that heading.
 
 `UiTabs` renders every labelled panel during SSR and initial hydration. After
 mounting, it adds keyboard-accessible tabs and hides inactive panels without
-unmounting them. Use unique item values and keep page anchor headings outside
-the panels. Re-align an initial hash after layout settles if enhancement changes
-the page height.
+unmounting them. A tab strip narrower than its tabs scrolls, fades each clipped
+edge, and keeps the selected tab in view when it resizes. Use unique item values
+and keep page anchor headings outside the panels. Re-align an initial hash after
+layout settles if enhancement changes the page height.
 
 Track page sections from a component's setup function:
 
@@ -68,7 +69,10 @@ The returned readonly ref contains the last supplied heading above the root's
 CSS `scroll-padding-top` inset, or the final section at the document bottom.
 IDs must remain stable and in page order; missing elements are ignored after
 mounting. Bind matching links to `aria-current="location"`. Scrolling, resizing,
-layout changes, completed transitions, and restored pages update the value.
+layout changes, completed transitions, and restored pages update the value. After
+a jump to a section, through a `#id` link, a hash change, or a deep link, that
+section stays current until the reader scrolls away from where the jump lands, so
+a page too short to bring it to the top still marks it.
 The composable does not change focus, the URL, or browser history, and removes
 its listeners and observer when the component unmounts. During SSR it returns
 the first supplied ID without accessing browser globals.
@@ -198,9 +202,10 @@ description and wraps.
 
 `site.css` also includes page helpers: `.fg-site-steps` for an ordered list with
 numbered circles, `.fg-site-facts` for an inline `dl` of short label and value
-pairs, `.fg-site-definitions` for a two-column `dl` of `dt` and `dd` that stacks
-on phones, `.fg-site-sr-only` for visually hidden text, and `.fg-site-skip` for
-a skip link that appears on focus.
+pairs whose links get a `--control-lg` hit area at 640px and below,
+`.fg-site-definitions` for a two-column `dl` of `dt` and `dd` that stacks on
+phones and keeps `code` such as `--all` on one line, `.fg-site-sr-only` for
+visually hidden text, and `.fg-site-skip` for a skip link that appears on focus.
 
 ### Docs shell
 
@@ -211,9 +216,11 @@ main content, and footer. The shell then supplies:
   the footer on the frame edges. At 800px and below the rail stacks above `main`.
 - element defaults inside the shell, plus the page background and font on
   `body`: box sizing, heading sizes and margins, paragraph measure, links,
-  `kbd`, and a 2px focus outline.
+  inline `code` at `--text-sm`, `kbd`, a 2px focus outline, and a `[hidden]`
+  rule that outranks the page's own `display` rules.
 - `.fg-site-footer` for the footer and `.fg-site-legend` for a `dl` that explains
-  what a capture shows.
+  what a capture shows. Legend columns are at least `--site-legend-column` wide,
+  `--sidebar` by default; set it on the legend to fit more entries in a row.
 
 ```vue
 <template>

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-qEJQS1S9.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-DCS_wyYq.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-qEJQS1S9.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-DCS_wyYq.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-qEJQS1S9.js → use-active-section-DCS_wyYq.js}

@@ -154,7 +154,7 @@ var N = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), H = { class: "fg-tabs" }, U = ["aria-label"], W = [
+}), H = { class: "fg-tabs" }, U = ["aria-label", "data-clipped"], W = [
 	"id",
 	"aria-controls",
 	"aria-selected",
@@ -180,16 +180,34 @@ var N = /* @__PURE__ */ c({
 		u(() => {
 			l.value = !0;
 		});
-		let C = b("list");
-		x([l, d], () => {
+		let C = b("list"), w = () => {
 			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) => {
+			let n = e.getBoundingClientRect(), r = getComputedStyle(e), i = n.left + (Number.parseFloat(r.scrollPaddingLeft) || 0), a = n.right - (Number.parseFloat(r.scrollPaddingRight) || 0), { left: o, right: s } = t.getBoundingClientRect();
+			o < i ? e.scrollLeft -= i - o : s > a && (e.scrollLeft += s - a);
+		}, T = m(), E = () => {
+			let e = C.value;
+			if (!e) return;
+			let t = e.scrollWidth - e.clientWidth, n = getComputedStyle(e).direction === "rtl" ? e.scrollLeft + t : e.scrollLeft, r = n > 1, i = n < t - 1;
+			T.value = r && i ? "both" : r ? "left" : i ? "right" : void 0;
+		}, D = () => {
+			w(), E();
+		};
+		x([
+			l,
+			d,
+			() => n.items
+		], D, {
+			flush: "post",
+			deep: !0
+		}), x(C, (e, t, n) => {
+			if (!e || typeof ResizeObserver > "u") return;
+			let r = new ResizeObserver(D);
+			r.observe(e), n(() => r.disconnect());
+		});
+		let O = (e) => {
 			e !== d.value && s("update:modelValue", e);
-		}, T = (e) => {
+		}, k = (e) => {
 			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
 				"ArrowLeft",
 				"ArrowRight",
@@ -213,7 +231,9 @@ var N = /* @__PURE__ */ c({
 			class: "fg-tabs__list",
 			role: "tablist",
 			"aria-label": n.label,
-			onKeydown: T
+			"data-clipped": T.value,
+			onKeydown: k,
+			onScrollPassive: E
 		}, [(f(!0), i(e, null, h(n.items, (e) => (f(), i("button", {
 			id: p(e.value),
 			key: e.value,
@@ -223,8 +243,8 @@ var N = /* @__PURE__ */ c({
 			"aria-controls": v(e.value),
 			"aria-selected": e.value === d.value,
 			tabindex: e.value === d.value ? 0 : -1,
-			onClick: (t) => w(e.value),
-			onFocus: (t) => w(e.value)
+			onClick: (t) => O(e.value),
+			onFocus: (t) => O(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,
@@ -248,17 +268,35 @@ var N = /* @__PURE__ */ c({
 				id: e,
 				element: t
 			}] : [];
-		}), o = () => {
-			n = void 0;
-			let e = document.documentElement, r = Number.parseFloat(getComputedStyle(e).scrollPaddingTop) || 0, i = a[0]?.id;
-			for (let e of a) e.element.getBoundingClientRect().top <= r + 1 && (i = e.id);
-			window.scrollY > 0 && window.scrollY + window.innerHeight >= e.scrollHeight - 2 && (i = a.at(-1)?.id), t.value = i;
-		}, s = () => {
-			n === void 0 && (n = requestAnimationFrame(o));
+		}), o = document.documentElement, s = () => Number.parseFloat(getComputedStyle(o).scrollPaddingTop) || 0, c, l = () => {
+			if (n = void 0, c) {
+				let e = Math.abs(window.scrollY - c.landing);
+				e > c.closest + 2 ? c = void 0 : c.closest = Math.min(c.closest, e);
+			}
+			let e = s(), r = a[0]?.id;
+			for (let t of a) t.element.getBoundingClientRect().top <= e + 1 && (r = t.id);
+			window.scrollY > 0 && window.scrollY + window.innerHeight >= o.scrollHeight - 2 && (r = a.at(-1)?.id), t.value = c?.id ?? r;
+		}, u = () => {
+			n === void 0 && (n = requestAnimationFrame(l));
+		}, d = (e) => {
+			let t = a.find((t) => t.id === e);
+			if (c = void 0, t) {
+				let n = Math.max(0, o.scrollHeight - window.innerHeight), r = window.scrollY + t.element.getBoundingClientRect().top - s(), i = Math.min(Math.max(r, 0), n);
+				c = {
+					id: e,
+					landing: i,
+					closest: Math.abs(window.scrollY - i)
+				};
+			}
+			u();
+		}, f = () => d(location.hash.slice(1)), p = (e) => {
+			if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+			let t = e.target instanceof Element ? e.target.closest("a[href^=\"#\"]")?.getAttribute("href") : void 0;
+			t && d(t.slice(1));
 		};
-		window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s), window.addEventListener("pageshow", s), document.body.addEventListener("transitionend", s), typeof ResizeObserver < "u" && (r = new ResizeObserver(s), r.observe(document.body)), i = () => {
-			window.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("pageshow", s), document.body.removeEventListener("transitionend", s);
-		}, o();
+		window.addEventListener("scroll", u, { passive: !0 }), window.addEventListener("resize", u), window.addEventListener("pageshow", u), window.addEventListener("hashchange", f), document.addEventListener("click", p), document.body.addEventListener("transitionend", u), typeof ResizeObserver < "u" && (r = new ResizeObserver(u), r.observe(document.body)), i = () => {
+			window.removeEventListener("scroll", u), window.removeEventListener("resize", u), window.removeEventListener("pageshow", u), window.removeEventListener("hashchange", f), document.removeEventListener("click", p), document.body.removeEventListener("transitionend", u);
+		}, location.hash && f(), l();
 	}), d(() => {
 		i?.(), r?.disconnect(), n !== void 0 && cancelAnimationFrame(n);
 	}), p(t);

package/package.json

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

package/src/components/tabs.css

@@ -12,10 +12,19 @@
     width: max-content;
     max-width: 100%;
     overflow-x: auto;
+    scroll-padding-inline: var(--space-6);
     margin-block-end: var(--space-4);
     border-bottom: 1px solid var(--color-border-subtle);
   }
 
+  /* A strip that scrolls fades each clipped edge; the scroll padding keeps a revealed tab clear
+   * of the fade. Mask stops are alpha only: #000 keeps a pixel and transparent hides it. */
+  .fg-tabs__list[data-clipped="right"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--space-6)), transparent); }
+  .fg-tabs__list[data-clipped="left"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--space-6)), transparent); }
+  .fg-tabs__list[data-clipped="both"] {
+    mask-image: linear-gradient(to right, transparent, #000 var(--space-6), #000 calc(100% - var(--space-6)), transparent);
+  }
+
   .fg-tabs__tab {
     flex: none;
     min-height: var(--control-md);

package/src/site.css

@@ -27,7 +27,13 @@
   .fg-site-docs :where(h1) { max-width: 22ch; font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
   .fg-site-docs :where(h2) { font-size: var(--text-xl); }
   .fg-site-docs :where(p) { max-width: var(--measure); }
+  /* Tab panels and other enhanced markup use the hidden attribute, so it outranks the page's own
+   * display rules. until-found keeps the browser's find-in-page behavior. */
+  .fg-site-docs :where([hidden]:not([hidden="until-found"])) { display: none !important; }
   .fg-site-docs :where(code, kbd, pre) { font-family: var(--font-mono); }
+  /* Monospace looks larger than the UI face, so inline code steps down: --text-sm in --text-md text.
+   * Code inside pre keeps the block's own size. */
+  .fg-site-docs :where(:not(pre) > code) { font-size: var(--text-sm); }
   .fg-site-docs :where(a) { color: var(--color-link); text-underline-offset: 0.18em; }
   .fg-site-docs :where(kbd) {
     display: inline-block;
@@ -90,10 +96,11 @@
   }
   .fg-site-footer a:hover { color: var(--color-text); text-decoration: underline; }
 
-  /* Legend: a dl of what a capture shows, with one div per dt and dd pair. */
+  /* Legend: a dl of what a capture shows, with one div per dt and dd pair. Columns are at
+   * least --site-legend-column wide (default --sidebar); a page can lower it to fit more. */
   .fg-site-legend {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(var(--sidebar), 100%), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--site-legend-column, var(--sidebar)), 100%), 1fr));
     gap: 0 var(--space-6);
     margin: 0;
     font-size: var(--text-sm);
@@ -513,6 +520,8 @@
   }
   .fg-site-definitions dt { font-weight: var(--weight-medium); }
   .fg-site-definitions dd { margin: 0; color: var(--color-muted); }
+  /* Keep flags such as --all whole instead of breaking after a hyphen. */
+  .fg-site-definitions code { white-space: nowrap; }
 
   .fg-site-sr-only {
     position: absolute;
@@ -606,6 +615,16 @@
     .fg-site-docs { padding-inline: var(--space-4); }
     /* Docs-shell pages keep one header row on phones and repeat these links in their footer. */
     .fg-site-docs .fg-site-header__links { display: none; }
+    /* Fact links, such as a Source link that stands in for the hidden header link, get a
+     * touch-sized hit area. The negative margin keeps each fact row one line tall, and the
+     * row gap of a list with links makes room for the part of the hit area past the line. */
+    .fg-site-facts:has(a) { row-gap: calc(var(--control-lg) - 1lh); }
+    .fg-site-facts a {
+      display: inline-flex;
+      min-height: var(--control-lg);
+      align-items: center;
+      margin-block: calc((1lh - var(--control-lg)) / 2);
+    }
     .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 { margin-inline-end: calc(var(--space-2) + var(--control-lg)); }

package/src/themes/graphite-indigo.css

@@ -106,6 +106,6 @@
   --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
   --color-success-surface: color-mix(in srgb, var(--color-success) 11%, var(--color-bg));
   --color-info-surface: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
-  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border);
+  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
   --color-status-text: var(--color-text);
 }