@parallelworks/ui 0.92.0 → 0.94.0

package/dist/app-frame/index.js

@@ -0,0 +1,369 @@
+import { cx } from "../cx.js";
+import { CloseIcon, SidebarCloseIcon, SidebarOpenIcon } from "../icons.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { AppLink, isPlainClick } from "../components/AppLink.js";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/app-frame/index.tsx
+var defaultLabels = {
+	navigation: "Main navigation",
+	skipToContent: "Skip to content",
+	openNavigation: "Open navigation",
+	closeNavigation: "Close navigation",
+	expandSidebar: "Expand sidebar",
+	collapseSidebar: "Collapse sidebar",
+	resizeSidebar: "Resize sidebar"
+};
+var Context = createContext(null);
+function useAppFrame() {
+	const context = useContext(Context);
+	if (!context) throw new Error("useAppFrame requires AppFrame");
+	return context;
+}
+function useFrameContext() {
+	const context = useContext(Context);
+	if (!context) throw new Error("App frame controls require AppFrame");
+	return context;
+}
+function useMobile(breakpoint) {
+	const media = useMemo(() => typeof window === "undefined" ? null : window.matchMedia(`(max-width: ${breakpoint - 1}px)`), [breakpoint]);
+	return useSyncExternalStore(useMemo(() => (changed) => {
+		media?.addEventListener("change", changed);
+		return () => media?.removeEventListener("change", changed);
+	}, [media]), () => media?.matches ?? false, () => false);
+}
+function slot(value, state) {
+	return typeof value === "function" ? value(state) : value;
+}
+/** An inset application surface beside a resizable icon rail or navigation column.
+* Router, identity, persistence and permissions belong to the host. Import app-frame.css. */
+function AppFrame({ children, brand, navigation, footer, header, banner, expanded: controlledExpanded, defaultExpanded = true, onExpandedChange, width: controlledWidth, defaultWidth = 240, onWidthChange, minWidth = 200, maxWidth = 400, railWidth = 64, resizable = true, mobileBreakpoint = 768, navigationKey, navigationResetKey = navigationKey, sidebarProps, fullBleed = false, labels: labelOverrides, mainId: suppliedMainId, mainClassName, className, style, ...props }) {
+	const id = useId();
+	const mainId = suppliedMainId ?? `${id}-main`;
+	const navigationId = `${id}-navigation`;
+	const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
+	const [ownWidth, setOwnWidth] = useState(defaultWidth);
+	const [dragWidth, setDragWidth] = useState(null);
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const [resizing, setResizing] = useState(false);
+	const desktopExpanded = controlledExpanded ?? ownExpanded;
+	const minimum = Math.max(railWidth, minWidth);
+	const maximum = Math.max(minimum, maxWidth);
+	const clamp = (n) => Math.min(maximum, Math.max(minimum, Number.isFinite(n) ? n : defaultWidth));
+	const width = clamp(dragWidth ?? controlledWidth ?? ownWidth);
+	const isMobile = useMobile(mobileBreakpoint);
+	const labels = {
+		...defaultLabels,
+		...labelOverrides
+	};
+	const navRef = useRef(null);
+	const scrollRef = useRef(null);
+	const savedScrollTop = useRef(0);
+	const restoreScroll = useCallback((node) => {
+		scrollRef.current = node;
+		if (node) node.scrollTop = savedScrollTop.current;
+	}, []);
+	const portalRef = useRef(null);
+	const drag = useRef(null);
+	useEffect(() => {
+		if (!isMobile && resizable) return;
+		drag.current = null;
+		setDragWidth(null);
+		setResizing(false);
+	}, [isMobile, resizable]);
+	const setExpanded = (next) => {
+		setOwnExpanded(next);
+		onExpandedChange?.(next);
+	};
+	const setWidth = (next) => {
+		const value = clamp(next);
+		setOwnWidth(value);
+		onWidthChange?.(value);
+	};
+	const closeNavigation = () => setMobileOpen(false);
+	const state = {
+		expanded: isMobile || desktopExpanded,
+		isMobile,
+		mobileOpen,
+		toggle: () => isMobile ? setMobileOpen(!mobileOpen) : setExpanded(!desktopExpanded),
+		closeNavigation,
+		labels,
+		navigationId
+	};
+	const previousLocation = useRef({
+		navigationKey,
+		navigationResetKey,
+		isMobile
+	});
+	useEffect(() => {
+		if (previousLocation.current.navigationKey === navigationKey && previousLocation.current.navigationResetKey === navigationResetKey && previousLocation.current.isMobile === isMobile) return;
+		if (previousLocation.current.navigationKey !== navigationKey || previousLocation.current.isMobile !== isMobile) setMobileOpen(false);
+		if (previousLocation.current.navigationResetKey !== navigationResetKey || previousLocation.current.isMobile !== isMobile) {
+			savedScrollTop.current = 0;
+			scrollRef.current?.scrollTo({ top: 0 });
+		}
+		previousLocation.current = {
+			navigationKey,
+			navigationResetKey,
+			isMobile
+		};
+	}, [
+		navigationKey,
+		navigationResetKey,
+		isMobile
+	]);
+	const navContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		brand && /* @__PURE__ */ jsx("div", {
+			className: "pw-frame-brand",
+			children: slot(brand, state)
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "pw-frame-links",
+			ref: restoreScroll,
+			onScroll: (event) => {
+				savedScrollTop.current = event.currentTarget.scrollTop;
+			},
+			children: slot(navigation, state)
+		}),
+		footer && /* @__PURE__ */ jsx("div", {
+			className: "pw-frame-footer",
+			children: slot(footer, state)
+		})
+	] });
+	const resize = (clientX, pointerId) => {
+		const current = drag.current;
+		if (!current || current.pointerId !== pointerId) return;
+		const next = (clientX - current.origin) * current.direction;
+		if (desktopExpanded && next < minimum - 80) setExpanded(false);
+		else if (!desktopExpanded && next >= minimum - 50) {
+			setExpanded(true);
+			current.width = clamp(next);
+			setDragWidth(current.width);
+		} else if (desktopExpanded) {
+			current.width = clamp(next);
+			setDragWidth(current.width);
+		}
+	};
+	const endResize = (event) => {
+		const ended = drag.current;
+		if (!ended || ended.pointerId !== event.pointerId) return;
+		drag.current = null;
+		setResizing(false);
+		setDragWidth(null);
+		if (desktopExpanded && ended.width !== ended.startWidth) setWidth(ended.width);
+	};
+	return /* @__PURE__ */ jsx(Context, {
+		value: state,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: cx("pw-app-frame", className),
+			"data-mobile": isMobile || void 0,
+			"data-full-bleed": fullBleed || void 0,
+			style,
+			children: [
+				/* @__PURE__ */ jsx("a", {
+					className: "pw-frame-skip",
+					href: `#${mainId}`,
+					onClick: (event) => {
+						event.preventDefault();
+						document.getElementById(mainId)?.focus();
+					},
+					children: labels.skipToContent
+				}),
+				banner && /* @__PURE__ */ jsx("div", {
+					className: "pw-frame-banner",
+					children: banner
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pw-frame-body",
+					children: [
+						!isMobile && /* @__PURE__ */ jsxs("aside", {
+							...sidebarProps,
+							ref: navRef,
+							id: navigationId,
+							className: cx("pw-frame-sidebar", sidebarProps?.className),
+							"data-sidebar-mode": desktopExpanded ? "expanded" : "rail",
+							"data-resizing": resizing || void 0,
+							style: {
+								...sidebarProps?.style,
+								width: desktopExpanded ? width : railWidth
+							},
+							children: [navContent, resizable && /* @__PURE__ */ jsx("div", {
+								role: "separator",
+								tabIndex: 0,
+								"aria-orientation": "vertical",
+								"aria-label": labels.resizeSidebar,
+								"aria-controls": navigationId,
+								"aria-valuemin": railWidth,
+								"aria-valuemax": maximum,
+								"aria-valuenow": Math.round(desktopExpanded ? width : railWidth),
+								className: "pw-frame-resize",
+								onPointerDown: (event) => {
+									if (event.button !== 0 || event.isPrimary === false || drag.current) return;
+									event.preventDefault();
+									const rect = navRef.current?.getBoundingClientRect();
+									if (!rect) return;
+									const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+									drag.current = {
+										origin: rtl ? rect.right : rect.left,
+										direction: rtl ? -1 : 1,
+										pointerId: event.pointerId,
+										startWidth: width,
+										width
+									};
+									event.currentTarget.setPointerCapture(event.pointerId);
+									setResizing(true);
+								},
+								onPointerMove: (event) => resize(event.clientX, event.pointerId),
+								onPointerUp: endResize,
+								onPointerCancel: endResize,
+								onLostPointerCapture: endResize,
+								onDoubleClick: () => {
+									setExpanded(true);
+									setWidth(defaultWidth);
+								},
+								onKeyDown: (event) => {
+									const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+									const smaller = rtl ? "ArrowRight" : "ArrowLeft";
+									if (![
+										smaller,
+										rtl ? "ArrowLeft" : "ArrowRight",
+										"Home",
+										"End"
+									].includes(event.key)) return;
+									event.preventDefault();
+									if (event.key === "Home") {
+										setExpanded(true);
+										setWidth(minimum);
+									} else if (event.key === "End") {
+										setExpanded(true);
+										setWidth(maximum);
+									} else if (event.key === smaller) {
+										if (width <= minimum) setExpanded(false);
+										else if (desktopExpanded) setWidth(width - 16);
+									} else if (!desktopExpanded) setExpanded(true);
+									else setWidth(width + 16);
+								}
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "pw-frame-surface-wrap",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "pw-frame-surface",
+								children: [header && /* @__PURE__ */ jsx("div", {
+									className: "pw-frame-header",
+									children: header
+								}), /* @__PURE__ */ jsx("main", {
+									id: mainId,
+									tabIndex: -1,
+									className: cx("pw-frame-main", mainClassName),
+									children
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx("div", { ref: portalRef })
+					]
+				}),
+				isMobile && /* @__PURE__ */ jsx(Dialog.Root, {
+					open: mobileOpen,
+					onOpenChange: setMobileOpen,
+					children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+						container: portalRef,
+						children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "pw-frame-backdrop" }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+							...sidebarProps,
+							id: navigationId,
+							className: cx("pw-frame-drawer", sidebarProps?.className),
+							"aria-label": labels.navigation,
+							"aria-modal": "true",
+							"data-sidebar-mode": "drawer",
+							style: {
+								...sidebarProps?.style,
+								width
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "pw-frame-mobile-close",
+								children: /* @__PURE__ */ jsx(Dialog.Close, {
+									className: "pw-frame-toggle",
+									"aria-label": labels.closeNavigation,
+									children: /* @__PURE__ */ jsx(CloseIcon, {})
+								})
+							}), navContent]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+/** Put in the page header on mobile, and the sidebar footer on desktop. */
+function AppFrameToggle({ className, ...props }) {
+	const { expanded, isMobile, mobileOpen, toggle, labels, navigationId } = useFrameContext();
+	const label = isMobile ? mobileOpen ? labels.closeNavigation : labels.openNavigation : expanded ? labels.collapseSidebar : labels.expandSidebar;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		side: isMobile ? "bottom" : "right",
+		children: /* @__PURE__ */ jsx("button", {
+			...props,
+			type: "button",
+			className: cx("pw-frame-toggle", className),
+			"aria-label": label,
+			"aria-expanded": isMobile ? mobileOpen : expanded,
+			"aria-controls": navigationId,
+			onClick: (event) => {
+				props.onClick?.(event);
+				if (!event.defaultPrevented) toggle();
+			},
+			children: expanded && !isMobile ? /* @__PURE__ */ jsx(SidebarCloseIcon, {}) : /* @__PURE__ */ jsx(SidebarOpenIcon, {})
+		})
+	});
+}
+/** Router-aware navigation that keeps icon-only rail items named and discoverable. */
+function AppFrameNavItem({ label, icon, selected, badge, disabled, onClick, className, ...target }) {
+	const { expanded, closeNavigation } = useFrameContext();
+	const props = {
+		className: cx("pw-frame-nav-item", className),
+		"aria-current": selected ? "page" : void 0,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+			if (!event.defaultPrevented && isPlainClick(event)) closeNavigation();
+		},
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pw-frame-nav-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: expanded ? "pw-frame-nav-label" : "sr-only",
+				children: label
+			}),
+			expanded && badge != null && /* @__PURE__ */ jsx("span", {
+				className: "pw-frame-nav-badge",
+				"aria-hidden": "true",
+				children: badge
+			})
+		] })
+	};
+	const item = target.href ? /* @__PURE__ */ jsx(AppLink, {
+		...target,
+		...props,
+		disabled
+	}) : /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		disabled
+	});
+	return expanded ? item : /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		side: "right",
+		delay: 0,
+		children: item
+	});
+}
+//#endregion
+export { AppFrame, AppFrameNavItem, AppFrameToggle, useAppFrame };

package/dist/components/PageHeader.js

@@ -151,47 +151,62 @@ function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fi
 	const [row, setRow] = useState(null);
 	const [lead, setLead] = useState(null);
 	const [end, setEnd] = useState(null);
+	const [cover, setCover] = useState(null);
 	useActionsFit(fit, row, lead, end);
+	useLayoutEffect(() => {
+		fit.setCoverNode(cover);
+		return () => fit.setCoverNode(null);
+	}, [fit, cover]);
 	useSyncExternalStore(fit.subscribe, fit.getVersion, fit.getVersion);
 	const moved = fit.menu();
 	const hasTrail = breadcrumbs.length > 0;
+	const covered = fit.isCovered();
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("@container w-full shrink-0", !inPlace && "bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			ref: setRow,
-			className: cx("flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-12"),
-			children: [/* @__PURE__ */ jsxs("div", {
-				ref: setLead,
-				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [
-					navToggle?.(),
-					hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
-						crumbs: breadcrumbs,
-						heading
-					}),
-					present(titleActions) && /* @__PURE__ */ jsx("div", {
-						className: "flex shrink-0 items-center gap-0.5",
-						children: titleActions
-					}),
-					hasTrail && breadcrumbPin?.({ crumbs: breadcrumbs })
-				]
-			}), present(actions) && /* @__PURE__ */ jsxs("div", {
-				ref: setEnd,
-				className: "flex shrink-0 items-center gap-1",
-				children: [/* @__PURE__ */ jsx(HeaderActionsFitContext, {
-					value: fit,
-					children: actions
-				}), moved.length > 0 && /* @__PURE__ */ jsx(ActionMenu, {
-					items: moved,
-					label: t.moreActions,
-					triggerClassName: buttonClasses({
-						variant: "ghost",
-						size: "xs",
-						iconOnly: true
-					}),
-					children: /* @__PURE__ */ jsx(MoreIcon, {})
-				})]
-			})]
+			className: cx("relative flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-12"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					ref: setLead,
+					inert: covered,
+					className: cx("flex min-w-0 flex-1 items-center gap-2", covered && "invisible"),
+					children: [
+						navToggle?.(),
+						hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
+							crumbs: breadcrumbs,
+							heading
+						}),
+						present(titleActions) && /* @__PURE__ */ jsx("div", {
+							className: "flex shrink-0 items-center gap-0.5",
+							children: titleActions
+						}),
+						hasTrail && breadcrumbPin?.({ crumbs: breadcrumbs })
+					]
+				}),
+				present(actions) && /* @__PURE__ */ jsxs("div", {
+					ref: setEnd,
+					inert: covered,
+					className: cx("flex shrink-0 items-center gap-1", covered && "invisible"),
+					children: [/* @__PURE__ */ jsx(HeaderActionsFitContext, {
+						value: fit,
+						children: actions
+					}), moved.length > 0 && /* @__PURE__ */ jsx(ActionMenu, {
+						items: moved,
+						label: t.moreActions,
+						triggerClassName: buttonClasses({
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true
+						}),
+						children: /* @__PURE__ */ jsx(MoreIcon, {})
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: setCover,
+					className: "pointer-events-none absolute inset-0 flex items-center px-4"
+				})
+			]
 		}), present(toolbar) && /* @__PURE__ */ jsx("div", {
 			className: "px-4",
 			children: toolbar
@@ -243,10 +258,13 @@ function useActionsFit(fit, row, lead, end) {
 			}
 			leadMin += Math.max(0, leadItems - 1) * LEAD_GAP;
 			const room = rowWidth - Number.parseFloat(style.paddingLeft || "0") - Number.parseFloat(style.paddingRight || "0") - leadMin - ROW_GAP;
+			const shown = end.getBoundingClientRect().width;
+			const moved = items.filter((id) => fit.isOverflowed(id));
 			fit.setOverflow(overflowingActions(items.map((id) => ({
 				id,
 				width: width(id)
-			})), end.getBoundingClientRect().width, items.filter((id) => fit.isOverflowed(id)), room));
+			})), shown, moved, room));
+			fit.setSearchCovers(searchCovers(end, items, moved, width, shown, room));
 		};
 		measure();
 		const resize = new ResizeObserver(measure);
@@ -270,5 +288,23 @@ function useActionsFit(fit, row, lead, end) {
 		widths
 	]);
 }
+var SEARCH_FIELD_WIDTH = 288;
+/**
+* Whether a search in the actions, opened in place, would leave the trail too little room even
+* with every action in the "…" menu, so it takes the whole bar instead. It works from the
+* actions' width as they are now, whether the search shows as its button or its field, so the
+* answer is the same either way.
+*/
+function searchCovers(end, items, moved, width, shown, room) {
+	const control = end.querySelector("[data-header-search]")?.firstElementChild;
+	if (!control) return false;
+	let least = shown - control.getBoundingClientRect().width + SEARCH_FIELD_WIDTH;
+	const still = items.filter((id) => !moved.includes(id));
+	if (still.length > 0) {
+		least -= still.reduce((sum, id) => sum + width(id) + 4, 0);
+		if (moved.length === 0) least += 28;
+	}
+	return least > room + .5;
+}
 //#endregion
 export { PageHeader, PageHeaderBar, PageHeaderProvider };

package/dist/components/Provider.d.ts

@@ -653,6 +653,8 @@ export interface UIStrings {
         /** Where the page sits, for `Pagination` too narrow for page numbers: it shows "5 / 12". */
         pageOfTotal: (page: number, total: number) => string;
         removeSearchTerm: (term: string) => string;
+        /** The search button's name while a query it holds narrows the list, its field closed. */
+        searchActive: (label: string) => string;
     };
     /** The chip row of a list's active filters, its Filter menu and its pickers. Field and option
      *  labels come from the host's fields, already translated. */

package/dist/components/Provider.js

@@ -634,7 +634,8 @@ var DEFAULTS = {
 			pagination: "Pagination",
 			page: (page) => `Page ${page}`,
 			pageOfTotal: (page, total) => `Page ${page} of ${total}`,
-			removeSearchTerm: (term) => `Remove filter ${term}`
+			removeSearchTerm: (term) => `Remove filter ${term}`,
+			searchActive: (label) => `${label}, on`
 		},
 		filters: {
 			addFilter: "Filter",

package/dist/components/headerActionsFit.d.ts

@@ -9,6 +9,9 @@ import type { MenuEntry } from './MenuEntries.js';
 export declare class HeaderActionsFit {
     private entries;
     private overflow;
+    private covers;
+    private cover;
+    private coverers;
     private version;
     private listeners;
     subscribe: (listener: () => void) => (() => void);
@@ -20,11 +23,23 @@ export declare class HeaderActionsFit {
     /** The moved actions' rows, in the bar's order. */
     menu(): MenuEntry[];
     setOverflow(ids: readonly string[]): void;
+    /** Whether an open search would take the whole bar: its field, opened in place, wouldn't fit
+     *  beside the trail even with every action in the "…" menu. The bar measures it. */
+    searchCovers(): boolean;
+    setSearchCovers(covers: boolean): void;
+    /** Where a search that takes the bar renders its field: a layer over the bar's row. */
+    coverNode(): HTMLElement | null;
+    setCoverNode(node: HTMLElement | null): void;
+    /** Whether a search has the bar now, so the bar hides and disables what it covers. */
+    isCovered(): boolean;
+    setCovering(id: string, covering: boolean): void;
     private changed;
 }
 /** Set around the header's `actions`, so the actions there can move into its
  *  menu; title actions sit beside the title and never do. */
 export declare const HeaderActionsFitContext: import("react").Context<HeaderActionsFit | null>;
+export declare const ACTION_GAP = 4;
+export declare const MENU_BUTTON_WIDTH = 24;
 /**
  * The trailing actions to move into the "…" menu so the rest fit in `room`
  * pixels, last first, or none when everything fits. `shown` is the actions'

package/dist/components/headerActionsFit.js

@@ -10,6 +10,9 @@ import { createContext } from "react";
 var HeaderActionsFit = class {
 	entries = /* @__PURE__ */ new Map();
 	overflow = [];
+	covers = false;
+	cover = null;
+	coverers = /* @__PURE__ */ new Set();
 	version = 0;
 	listeners = /* @__PURE__ */ new Set();
 	subscribe = (listener) => {
@@ -46,6 +49,37 @@ var HeaderActionsFit = class {
 		this.overflow = ids;
 		this.changed();
 	}
+	/** Whether an open search would take the whole bar: its field, opened in place, wouldn't fit
+	*  beside the trail even with every action in the "…" menu. The bar measures it. */
+	searchCovers() {
+		return this.covers;
+	}
+	setSearchCovers(covers) {
+		if (covers !== this.covers) {
+			this.covers = covers;
+			this.changed();
+		}
+	}
+	/** Where a search that takes the bar renders its field: a layer over the bar's row. */
+	coverNode() {
+		return this.cover;
+	}
+	setCoverNode(node) {
+		if (node !== this.cover) {
+			this.cover = node;
+			this.changed();
+		}
+	}
+	/** Whether a search has the bar now, so the bar hides and disables what it covers. */
+	isCovered() {
+		return this.coverers.size > 0;
+	}
+	setCovering(id, covering) {
+		if (covering === this.coverers.has(id)) return;
+		if (covering) this.coverers.add(id);
+		else this.coverers.delete(id);
+		this.changed();
+	}
 	changed() {
 		this.version++;
 		for (const listener of this.listeners) listener();
@@ -54,7 +88,6 @@ var HeaderActionsFit = class {
 /** Set around the header's `actions`, so the actions there can move into its
 *  menu; title actions sit beside the title and never do. */
 var HeaderActionsFitContext = createContext(null);
-var ACTION_GAP = 4;
 /**
 * The trailing actions to move into the "…" menu so the rest fit in `room`
 * pixels, last first, or none when everything fits. `shown` is the actions'
@@ -65,14 +98,14 @@ function overflowingActions(items, shown, moved, room) {
 	const width = new Map(items.map((item) => [item.id, item.width]));
 	let total = shown;
 	if (moved.length > 0) {
-		total += moved.reduce((sum, id) => sum + (width.get(id) ?? 0) + ACTION_GAP, 0);
+		total += moved.reduce((sum, id) => sum + (width.get(id) ?? 0) + 4, 0);
 		total -= 28;
 	}
 	const next = [];
 	for (let i = items.length - 1; i >= 0 && total > room + .5; i--) {
 		const item = items[i];
 		if (next.length === 0) total += 28;
-		total -= item.width + ACTION_GAP;
+		total -= item.width + 4;
 		next.unshift(item.id);
 	}
 	return next;

package/dist/list/ListPage.js

@@ -5,7 +5,7 @@ import { useNavigation } from "../components/Provider.js";
 import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { isMenuDivider, isMenuGroup, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
 import { CellPlacementContext, STACKED_ITEM, Table, hasContent } from "../components/Table.js";
-import { ListCountText, ListFooterCountContext } from "./listSearch.js";
+import { ListCountStatus, ListFooterCountContext } from "./listSearch.js";
 import { ListFilterBar } from "./ListFilterBar.js";
 import { ListActionsHeader, ListError, ListSkeleton, StretchRowLinkContext } from "./ListTable.js";
 import { ListToolbar, toolbarCount } from "./ListToolbar.js";
@@ -69,7 +69,8 @@ function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, er
 		nounPlural: count.nounPlural
 	} : fromToolbar;
 	const showsRows = !loading && !failed && !isEmpty && !noneMatch && (!counted || counted.matches > 0);
-	const footerCount = showsRows ? counted : void 0;
+	const countable = !!count || fromToolbar !== void 0;
+	const spokenCount = loading || failed ? void 0 : counted;
 	const shareLine = counted !== void 0 && !!toolbar && isValidElement(givenBar) && givenBar.type === ListFilterBar;
 	const bar = shareLine ? cloneElement(givenBar, { end: toolbar }) : givenBar;
 	let body = children;
@@ -102,18 +103,21 @@ function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, er
 			children: [/* @__PURE__ */ jsx(ListRowActionsProvider, {
 				view,
 				children: body
-			}), (footerCount || showsRows && !!pager) && /* @__PURE__ */ jsx(ListFooter, {
-				count: footerCount,
-				pager
+			}), (countable || showsRows && !!pager) && /* @__PURE__ */ jsx(ListFooter, {
+				count: spokenCount,
+				countable,
+				pager: showsRows ? pager : null,
+				shown: showsRows && (counted !== void 0 || !!pager)
 			})]
 		})]
 	});
 }
-/** The line under a list's last row: its count at the rows' start, its pager at their end. */
-function ListFooter({ count, pager }) {
+/** The line under a list's last row: its count at the rows' start, its pager at their end. With no
+*  rows to show, only a screen reader finds it, so the count's status stays mounted. */
+function ListFooter({ count, countable, pager, shown }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-10 flex-wrap items-center gap-x-3 px-4 empty:hidden [&>:not([role=status])]:ml-auto [&>nav]:flex-1 [&>nav]:px-0 [&>nav>div:first-child]:justify-end",
-		children: [count && /* @__PURE__ */ jsx(ListCountText, { ...count }), pager]
+		className: shown ? "flex min-h-10 flex-wrap items-center gap-x-3 px-4 empty:hidden [&>:not([role=status])]:ml-auto [&>nav]:flex-1 [&>nav]:px-0 [&>nav>div:first-child]:justify-end" : "sr-only",
+		children: [countable && /* @__PURE__ */ jsx(ListCountStatus, { count }), pager]
 	});
 }
 var STACKED = { stacked: true };