staffa 0.18.1 → 0.18.3

package/src/components/tooltip.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type Slot, type Attributes, drawSlot, mountPortal } from "../core.js";
+import { type Slot, type Attributes, drawSlot, followAnchor, mountPortal } from "../core.js";
 
 /** Options for {@link addTooltip}. */
 export interface TooltipOptions {
@@ -32,11 +32,6 @@ A.insertGlobalCss({
 const $ttActive = A.proxy<{ opts: TooltipOptions; anchor: HTMLElement } | undefined>(undefined);
 let hideTimer: ReturnType<typeof setTimeout> | null = null;
 
-// Hide tooltip when the page scrolls (anchor has moved).
-if (typeof window !== "undefined") {
-	window.addEventListener("scroll", () => { $ttActive.value = undefined; }, { capture: true, passive: true });
-}
-
 function computePos(rect: DOMRect, tipW: number, tipH: number, placement: string): { x: number; y: number } {
 	const gap = 7;
 	const vw = window.innerWidth;
@@ -84,7 +79,7 @@ mountPortal(() => {
 	const { opts, anchor } = active;
 	const placement = opts.placement ?? "top";
 
-	const tipEl = A("div.s-tt-tip.s-s.neutral.shadow role=tooltip visibility:hidden", opts.attrs, () => {
+	const tipEl = A("div.s-tt-tip.s-s.neutral.shadow role=tooltip", opts.attrs, () => {
 		A("mouseenter=", () => {
 			if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
 		});
@@ -92,13 +87,16 @@ mountPortal(() => {
 		drawSlot(opts.tip);
 	}) as HTMLElement;
 
-	requestAnimationFrame(() => {
-		if (!document.body.contains(tipEl)) return;
-		const rect = anchor.getBoundingClientRect();
+	followAnchor(anchor, (rect) => {
+		// Out of the viewport, or on a panel that slid off and went inert: nothing
+		// left to explain, and no `mouseleave` is coming to say so.
+		if (rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth || anchor.closest("[inert]")) {
+			$ttActive.value = undefined;
+			return;
+		}
 		const { x, y } = computePos(rect, tipEl.offsetWidth, tipEl.offsetHeight, placement);
 		tipEl.style.left = x + "px";
 		tipEl.style.top = y + "px";
-		tipEl.style.visibility = "";
 	});
 });
 

package/src/core.ts

@@ -114,3 +114,36 @@ export function focusFirst(container: HTMLElement, prefer?: string): boolean {
 export function mountPortal(draw: () => void): void {
 	queueMicrotask(() => A(draw));
 }
+
+/** Something scrolled, the window resized, or an animation began: an anchor may be on the move. */
+const WAKE_EVENTS = ["scroll", "resize", "transitionstart", "animationstart"];
+
+/**
+ * Keep a `position:fixed` overlay glued to its anchor. `place` gets the anchor's
+ * viewport rect right away, and again whenever it changes: frame by frame while
+ * the anchor is on the move — riding a dialog's opening animation or a panel's
+ * slide, or scrolling — and not at all once it has been at rest for half a
+ * second, until one of the events that precede any movement wakes the loop. So
+ * an overlay left standing open doesn't keep the page awake. Stops with the
+ * current scope; a point (a `DOMRect` of no size) is followed like an element.
+ *
+ * Returns a function to call when the overlay's own size changed (its rows
+ * redrawn, say), so it gets placed again.
+ */
+export function followAnchor(anchor: Element | DOMRect, place: (rect: DOMRect) => void): () => void {
+	let placedAt = "", raf = 0, still = 0;
+	const track = () => {
+		const r = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+		const at = `${r.left} ${r.top} ${r.bottom} ${r.width}`;
+		if (at !== placedAt) { placedAt = at; place(r); still = 0; }
+		raf = ++still > 30 ? 0 : requestAnimationFrame(track);
+	};
+	const wake = () => { still = 0; if (!raf) track(); };
+	for (const ev of WAKE_EVENTS) window.addEventListener(ev, wake, true);
+	A.clean(() => {
+		cancelAnimationFrame(raf);
+		for (const ev of WAKE_EVENTS) window.removeEventListener(ev, wake, true);
+	});
+	track();
+	return () => { placedAt = ""; wake(); };
+}

package/src/theme.ts

@@ -32,9 +32,11 @@ import A from "aberdeen";
  * declaration, at the given angle. A shared constant rather than a `--s-sheen`
  * custom property: `var()`s inside a custom property resolve where it is
  * *defined*, so every surface would get the page's wash instead of its own.
+ * The shorthand names `$s-bg` as well as the gradient: a `background:` that
+ * gave only an image would reset the colour under it to transparent.
  */
 const sheen = (angle: string) =>
-	`background: linear-gradient(${angle}, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));`;
+	`background: $s-bg linear-gradient(${angle}, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));`;
 
 /** The surface sheen: the wash every surface (and the page) is painted with. */
 export const SURFACE_SHEEN = sheen("170deg");
@@ -120,7 +122,14 @@ A.insertGlobalCss({
 	// A lightweight reset: bare semantic HTML, with less ugly defaults.
 	"*, *::before, *::after": "box-sizing:border-box",
 	html: "text-size-adjust:100%",
-	body: "m:0 p:$3 line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased background-color:$s-bg text:$s-text",
+	// The page wears the same wash as a surface, on a page at least as tall as
+	// what that wash is painted on: <body>'s background is propagated to the
+	// canvas, which covers the whole viewport, while the gradient is still
+	// *sized* from the root box. So a page shorter than the viewport — a bare
+	// spinner while an app boots — would tile its wash down the rest of the
+	// canvas in bands. `dvh`, not `vh`: a mobile viewport that grows as the URL
+	// bar retracts would open a band again.
+	body: "m:0 p:$3 min-height:100dvh line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased text:$s-text " + SURFACE_SHEEN,
 	// The contextual link colour: `--s-link` on neutral surfaces, the ink on accent ones.
 	a: "color: $s-link-fg; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;",
 	"a:hover": "filter: brightness(1.15)",
@@ -196,9 +205,9 @@ A.insertGlobalCss({
 		"--s-muted: color-mix(in oklab, $s-text, $s-bg 42%); " +
 		"--s-faint: color-mix(in oklab, $s-text, $s-bg 80%); " +
 		"color:$s-text accent-color:$s-accent scrollbar-width:thin scrollbar-color: $s-faint transparent;",
-	// Subtle single-colour gradient sheen, painted on every surface (and the page).
-	".s-s, body": SURFACE_SHEEN,
-	".s-s": "r:$s-radius",
+	// Subtle single-colour gradient sheen, painted on every surface (the page
+	// gets its own, up in the reset).
+	".s-s": SURFACE_SHEEN + " r:$s-radius",
 	// A neutral surface owns a hairline border, so a card reads as a card without
 	// any component help. `:where()` keeps it zero-specificity, so a bar that wants
 	// only a divider overrides it with a single plain rule.
@@ -220,8 +229,14 @@ A.insertGlobalCss({
 
 	// Accent variants: the fill colour becomes the ink, over a soft self-tint
 	// (`tonal`) or a transparent body with a colour edge (`outlined`).
-	".s-s:not(.neutral).tonal, .s-s:not(.neutral).outlined":
-		"--s-text:$s-bg --s-accent:$s-bg --s-link-fg:$s-bg --s-faint: color-mix(in srgb, $s-bg 30%, transparent); --s-muted: color-mix(in srgb, $s-bg 70%, transparent);",
+	".s-s:not(.neutral).tonal, .s-s:not(.neutral).outlined": {
+		"&": "--s-text:$s-bg --s-accent:$s-bg --s-link-fg:$s-bg --s-faint: color-mix(in srgb, $s-bg 30%, transparent); --s-muted: color-mix(in srgb, $s-bg 70%, transparent);",
+		// The ink *is* the surface colour here, so the fill `code` and `pre` mix
+		// from their text/background pair would land invisibly on itself. The
+		// monospace face carries inline code on its own; a block keeps a hairline.
+		code: "background:transparent padding:0",
+		pre: "background:transparent border: 1px solid $s-faint;",
+	},
 	".s-s:not(.neutral).tonal":
 		"background: color-mix(in srgb, $s-bg 15%, transparent); border: 1px solid $s-faint;",
 	".s-s:not(.neutral).outlined":