staffa 0.18.2 → 0.18.4

package/src/components/menu.ts

@@ -1,6 +1,6 @@
 import A from "aberdeen";
 import { matchCurrent, current as currentRoute, go } from "aberdeen/route";
-import { type Slot, type Attributes, drawSlot, mountPortal, focusFirst } from "../core.js";
+import { type Slot, type Attributes, drawSlot, followAnchor, mountPortal, focusFirst } from "../core.js";
 import { menu as menuIcon, chevronRight, externalLink as newTabIcon, link as linkIcon } from "../icons.js";
 import { button, type ButtonOptions } from "./button.js";
 import { toast } from "./toast.js";
@@ -647,7 +647,7 @@ export function closeFloatingMenu(anchor?: HTMLElement): void {
 	if (isFloatingMenuOpen(anchor)) closeFloating();
 }
 
-function positionMenu(menuEl: HTMLElement, rect: { left: number; right: number; top: number; bottom: number }): void {
+function positionMenu(menuEl: HTMLElement, rect: DOMRect): void {
 	const mw = menuEl.offsetWidth, mh = menuEl.offsetHeight;
 	const vw = window.innerWidth, vh = window.innerHeight;
 	const gap = 4;
@@ -717,16 +717,13 @@ mountPortal(() => {
 		document.removeEventListener("keydown", onKey, true);
 	});
 
-	// Position after layout, then focus the first enabled item.
+	// At the supplied point when given — the pointer location for a context menu
+	// — otherwise below the anchor.
+	followAnchor(f.at ? new DOMRect(f.at.x, f.at.y, 0, 0) : f.anchor, (rect) => positionMenu(menuEl, rect));
+	// Once it can take focus: the current-page item if there is one, else the
+	// first focusable element (covers custom slot content, not just `.s-menu-item`s).
 	requestAnimationFrame(() => {
-		if (!document.body.contains(menuEl)) return;
-		// Position at the supplied point (a zero-size rect) when given — e.g. the
-		// pointer location for a context menu — otherwise below the anchor.
-		const rect = f.at ? { left: f.at.x, right: f.at.x, top: f.at.y, bottom: f.at.y } : f.anchor.getBoundingClientRect();
-		positionMenu(menuEl, rect);
-		// Focus the current-page item if there is one, else the first focusable
-		// element (covers custom slot content, not just `.s-menu-item`s).
-		focusFirst(menuEl, ".s-menu-item[aria-current=page]");
+		if (document.body.contains(menuEl)) focusFirst(menuEl, ".s-menu-item[aria-current=page]");
 	});
 });
 

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

@@ -80,6 +80,22 @@ export function drawSlot<Args extends unknown[] = []>(slot: Slot<Args> | undefin
 /** Selector matching the natively focusable elements we care about. */
 const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
 
+/** Whether this element can actually take focus right now. */
+const isFocusable = (el: Element): el is HTMLElement =>
+	el instanceof HTMLElement &&
+	!el.hasAttribute("disabled") &&
+	el.getAttribute("aria-disabled") !== "true" &&
+	el.tabIndex >= 0 &&
+	el.getClientRects().length > 0;
+
+/**
+ * The focusable elements inside `container`, in tab order — disabled,
+ * `aria-disabled`, `tabindex=-1` and hidden ones left out.
+ */
+export function focusables(container: HTMLElement): HTMLElement[] {
+	return [...container.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
+}
+
 /**
  * Move keyboard focus to the first focusable element inside `container`, skipping
  * disabled, `aria-disabled`, `tabindex=-1` and hidden ones. A `prefer` selector,
@@ -90,15 +106,9 @@ const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]
  * the DOM and laid out — typically inside a `requestAnimationFrame`.
  */
 export function focusFirst(container: HTMLElement, prefer?: string): boolean {
-	const ok = (el: Element): el is HTMLElement =>
-		el instanceof HTMLElement &&
-		!el.hasAttribute("disabled") &&
-		el.getAttribute("aria-disabled") !== "true" &&
-		el.tabIndex >= 0 &&
-		el.getClientRects().length > 0;
 	const target =
-		(prefer ? [...container.querySelectorAll(prefer)].find(ok) : undefined) ??
-		[...container.querySelectorAll(FOCUSABLE_SELECTOR)].find(ok);
+		(prefer ? [...container.querySelectorAll(prefer)].find(isFocusable) : undefined) ??
+		focusables(container)[0];
 	target?.focus();
 	return target != null;
 }
@@ -114,3 +124,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

@@ -229,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":