@janga/norna 0.7.24 → 0.7.26

package/src/components/ImageStackEnhancement.astro

@@ -0,0 +1,331 @@
+---
+import { Maximize2, Minimize2, X } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+const labels = projectConfig.locale.labels;
+---
+
+<dialog class="image-inspector" data-image-inspector aria-label={labels.imageInspection}>
+	<div class="image-inspector-layout">
+		<div class="image-inspector-controls">
+			<button
+				type="button"
+				data-image-inspector-size
+				hidden
+				aria-label={labels.imageInspectionActualSize}
+				title={labels.imageInspectionActualSize}
+				data-fit-label={labels.imageInspectionFit}
+				data-actual-label={labels.imageInspectionActualSize}
+			>
+				<Maximize2 aria-hidden="true" data-image-inspector-size-icon="actual" size={20} stroke-width={2} />
+				<Minimize2 aria-hidden="true" data-image-inspector-size-icon="fit" hidden size={20} stroke-width={2} />
+			</button>
+			<button
+				type="button"
+				data-image-inspector-close
+				aria-label={labels.imageInspectionClose}
+				title={labels.imageInspectionClose}
+			>
+				<X aria-hidden="true" size={20} stroke-width={2} />
+			</button>
+		</div>
+		<div class="image-inspector-media" data-image-inspector-media data-image-inspector-mode="fit">
+			<img data-image-inspector-image alt="" />
+		</div>
+		<p class="image-inspector-caption" id="image-inspector-caption" data-image-inspector-caption hidden></p>
+	</div>
+</dialog>
+
+<script>
+	const dialog = document.querySelector<HTMLDialogElement>('[data-image-inspector]');
+	const triggers = Array.from(document.querySelectorAll<HTMLAnchorElement>('[data-image-inspection-trigger]'));
+	const figures = Array.from(document.querySelectorAll<HTMLElement>('[data-image-stack-figure]'));
+	const enlargementThreshold = 1.2;
+	const persistentCaptionViewportWidth = 1101;
+	const persistentCaptionMinimumWidth = 160;
+	const persistentCaptionHeightRatio = 0.9;
+	let captionScheduledFrame: number | null = null;
+
+	const isVisible = (element: Element) => {
+		const style = getComputedStyle(element);
+		const bounds = element.getBoundingClientRect();
+		return style.display !== 'none' && style.visibility !== 'hidden' && bounds.width > 0 && bounds.height > 0;
+	};
+
+	const rectanglesOverlap = (first: DOMRect, second: DOMRect) => (
+		first.left < second.right
+		&& first.right > second.left
+		&& first.top < second.bottom
+		&& first.bottom > second.top
+	);
+
+	const resolveCssLength = (value: string, fallback: number) => {
+		const probe = document.createElement('span');
+		probe.style.cssText = [
+			'position:fixed',
+			'visibility:hidden',
+			'pointer-events:none',
+			'box-sizing:content-box',
+			'height:0',
+			'padding:0',
+			'border:0',
+			`width:${value.trim() || `${fallback}px`}`,
+		].join(';');
+		document.body.append(probe);
+		const width = probe.getBoundingClientRect().width;
+		probe.remove();
+		return Number.isFinite(width) && width > 0 ? width : fallback;
+	};
+
+	const clearPersistentCaption = (figure: HTMLElement) => {
+		delete figure.dataset.imageCaptionPlacement;
+		figure.style.removeProperty('--image-persistent-caption-inline-start');
+		figure.style.removeProperty('--image-persistent-caption-width');
+		figure.style.removeProperty('--image-persistent-caption-reserve');
+		figure.style.removeProperty('--image-persistent-caption-block-start');
+		figure.style.removeProperty('--image-persistent-caption-block-end');
+	};
+
+	const updatePersistentCaption = (figure: HTMLElement) => {
+		clearPersistentCaption(figure);
+		if (window.innerWidth < persistentCaptionViewportWidth) return;
+
+		const frame = figure.querySelector<HTMLElement>('.managed-image-frame');
+		const caption = figure.querySelector<HTMLElement>('.image-meta');
+		const image = frame?.querySelector<HTMLImageElement>('img');
+		const layout = figure.closest<HTMLElement>('.site-page-layout-tree')
+			?? figure.closest<HTMLElement>('.site-content');
+		if (!frame || !caption || !image || !layout || !isVisible(frame) || !isVisible(caption)) return;
+
+		const headerOffset = Number.parseFloat(
+			getComputedStyle(document.documentElement).getPropertyValue('--site-top-anchor-offset'),
+		) || 0;
+		const usableViewportHeight = Math.max(0, window.innerHeight - headerOffset);
+		const imageBounds = image.getBoundingClientRect();
+		if (imageBounds.height < usableViewportHeight * persistentCaptionHeightRatio) return;
+
+		const visibleContentsRail = Array.from(
+			layout.querySelectorAll<HTMLElement>('.page-contents-navigation-rail'),
+		).some(isVisible);
+		const reservesContentsLane = layout.dataset.pageContentsPlacement === 'contents-rail'
+			&& document.documentElement.dataset.focusReading !== 'on';
+		if (visibleContentsRail || reservesContentsLane) return;
+
+		const frameBounds = frame.getBoundingClientRect();
+		const figureBounds = figure.getBoundingClientRect();
+		const captionBounds = caption.getBoundingClientRect();
+		const layoutBounds = layout.getBoundingClientRect();
+		const rootStyle = getComputedStyle(document.documentElement);
+		const figureStyle = getComputedStyle(figure);
+		const gap = resolveCssLength(figureStyle.getPropertyValue('--image-caption-inline-gap'), 12);
+		const preferredWidth = resolveCssLength(rootStyle.getPropertyValue('--section-note-width'), 192);
+		const isRightToLeft = getComputedStyle(figure).direction === 'rtl';
+		const availableWidth = isRightToLeft
+			? imageBounds.left - layoutBounds.left - gap
+			: layoutBounds.right - imageBounds.right - gap;
+		const captionWidth = Math.min(preferredWidth, availableWidth);
+		if (captionWidth < persistentCaptionMinimumWidth || captionBounds.height > imageBounds.height) return;
+
+		const proposedBounds = new DOMRect(
+			isRightToLeft ? imageBounds.left - gap - captionWidth : imageBounds.right + gap,
+			imageBounds.top,
+			captionWidth,
+			imageBounds.height,
+		);
+		const laneClaims = Array.from(figure.closest('.site-section')?.querySelectorAll<HTMLElement>([
+			'.section-note',
+			'[data-table-layout="end"]',
+			'[data-table-layout="canvas"]',
+		].join(', ')) ?? []).filter((element) => element !== figure && isVisible(element));
+		if (laneClaims.some((element) => rectanglesOverlap(proposedBounds, element.getBoundingClientRect()))) return;
+
+		const reserve = Math.max(0, captionBounds.bottom - frameBounds.bottom);
+		const inlineStart = isRightToLeft
+			? figureBounds.right - imageBounds.left + gap
+			: imageBounds.right - figureBounds.left + gap;
+		const blockStart = imageBounds.top - figureBounds.top;
+		const blockEnd = figureBounds.bottom - imageBounds.bottom;
+		figure.style.setProperty('--image-persistent-caption-inline-start', `${inlineStart}px`);
+		figure.style.setProperty('--image-persistent-caption-width', `${captionWidth}px`);
+		figure.style.setProperty('--image-persistent-caption-reserve', `${reserve}px`);
+		figure.style.setProperty('--image-persistent-caption-block-start', `${blockStart}px`);
+		figure.style.setProperty('--image-persistent-caption-block-end', `${blockEnd}px`);
+		figure.dataset.imageCaptionPlacement = 'persistent';
+	};
+
+	const updatePersistentCaptions = () => {
+		captionScheduledFrame = null;
+		figures.forEach(updatePersistentCaption);
+	};
+
+	const schedulePersistentCaptionUpdate = () => {
+		if (captionScheduledFrame !== null) return;
+		captionScheduledFrame = requestAnimationFrame(updatePersistentCaptions);
+	};
+
+	if (figures.length > 0) {
+		figures.forEach((figure) => {
+			const image = figure.querySelector('img');
+			if (image && !image.complete) image.addEventListener('load', schedulePersistentCaptionUpdate, { once: true });
+		});
+		if ('ResizeObserver' in window) {
+			const observer = new ResizeObserver(schedulePersistentCaptionUpdate);
+			figures.forEach((figure) => {
+				const frame = figure.querySelector('.managed-image-frame');
+				if (frame) observer.observe(frame);
+			});
+		}
+		const preferenceObserver = new MutationObserver(schedulePersistentCaptionUpdate);
+		preferenceObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['data-focus-reading', 'data-reading-width'],
+		});
+		window.addEventListener('resize', schedulePersistentCaptionUpdate, { passive: true });
+		document.fonts?.ready.then(schedulePersistentCaptionUpdate).catch(() => {});
+		updatePersistentCaptions();
+	}
+
+	if (dialog && typeof dialog.showModal === 'function' && triggers.length > 0) {
+		const inspectedImage = dialog.querySelector<HTMLImageElement>('[data-image-inspector-image]');
+		const media = dialog.querySelector<HTMLElement>('[data-image-inspector-media]');
+		const caption = dialog.querySelector<HTMLElement>('[data-image-inspector-caption]');
+		const sizeButton = dialog.querySelector<HTMLButtonElement>('[data-image-inspector-size]');
+		const closeButton = dialog.querySelector<HTMLButtonElement>('[data-image-inspector-close]');
+		let activeTrigger: HTMLAnchorElement | null = null;
+		let scheduledFrame: number | null = null;
+		let sizeControlScheduledFrame: number | null = null;
+
+		const setInspectorMode = (mode: 'fit' | 'actual') => {
+			if (!media || !sizeButton) return;
+			media.dataset.imageInspectorMode = mode;
+			const nextLabel = mode === 'fit'
+				? sizeButton.dataset.actualLabel
+				: sizeButton.dataset.fitLabel;
+			if (nextLabel) {
+				sizeButton.setAttribute('aria-label', nextLabel);
+				sizeButton.title = nextLabel;
+			}
+			sizeButton.querySelectorAll<SVGElement>('[data-image-inspector-size-icon]').forEach((icon) => {
+				icon.hidden = icon.dataset.imageInspectorSizeIcon !== (mode === 'fit' ? 'actual' : 'fit');
+			});
+		};
+
+		const canInspect = (trigger: HTMLAnchorElement) => {
+			const image = trigger.querySelector('img');
+			const width = Number(trigger.dataset.imageIntrinsicWidth);
+			const height = Number(trigger.dataset.imageIntrinsicHeight);
+			if (!image || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+				return false;
+			}
+
+			const bounds = image.getBoundingClientRect();
+			if (bounds.width <= 0 || bounds.height <= 0) return false;
+			const captionReserve = trigger.getAttribute('aria-describedby') ? 176 : 112;
+			const availableWidth = Math.max(0, window.innerWidth - 48);
+			const availableHeight = Math.max(0, window.innerHeight - captionReserve);
+			const fitScale = Math.min(1, availableWidth / width, availableHeight / height);
+			const renderedScale = Math.min(bounds.width / width, bounds.height / height);
+			const fitGain = fitScale / renderedScale;
+			const actualSizeGain = 1 / renderedScale;
+
+			return Math.max(fitGain, actualSizeGain) >= enlargementThreshold;
+		};
+
+		const updateSizeControlAvailability = () => {
+			sizeControlScheduledFrame = null;
+			if (!activeTrigger || !inspectedImage || !media || !sizeButton) return;
+
+			const isScalable = activeTrigger.dataset.imageInspectionScalable === 'true';
+			const intrinsicWidth = inspectedImage.naturalWidth;
+			const intrinsicHeight = inspectedImage.naturalHeight;
+			const fitScale = intrinsicWidth > 0 && intrinsicHeight > 0
+				? Math.min(1, media.clientWidth / intrinsicWidth, media.clientHeight / intrinsicHeight)
+				: 1;
+			const actualSizeGain = fitScale > 0 ? 1 / fitScale : 1;
+			const isUseful = !isScalable && actualSizeGain >= enlargementThreshold;
+
+			if (!isUseful && media.dataset.imageInspectorMode === 'actual') setInspectorMode('fit');
+			if (!isUseful && document.activeElement === sizeButton) closeButton?.focus();
+			sizeButton.hidden = !isUseful;
+			sizeButton.disabled = !isUseful;
+		};
+
+		const scheduleSizeControlUpdate = () => {
+			if (sizeControlScheduledFrame !== null) return;
+			sizeControlScheduledFrame = requestAnimationFrame(updateSizeControlAvailability);
+		};
+
+		const updateAvailability = () => {
+			scheduledFrame = null;
+			triggers.forEach((trigger) => {
+				trigger.dataset.imageInspectionAvailable = canInspect(trigger) ? 'true' : 'false';
+			});
+		};
+
+		const scheduleAvailabilityUpdate = () => {
+			if (scheduledFrame !== null) return;
+			scheduledFrame = requestAnimationFrame(updateAvailability);
+		};
+
+		const openInspector = (trigger: HTMLAnchorElement) => {
+			if (!inspectedImage || !caption || !closeButton) return;
+			const sourceImage = trigger.querySelector('img');
+			const captionId = trigger.getAttribute('aria-describedby');
+			const sourceCaption = captionId ? document.getElementById(captionId) : null;
+			activeTrigger = trigger;
+			sizeButton?.setAttribute('disabled', '');
+			if (sizeButton) sizeButton.hidden = true;
+			inspectedImage.src = trigger.href;
+			inspectedImage.alt = sourceImage?.alt ?? '';
+			if (sourceCaption?.textContent?.trim()) {
+				caption.textContent = sourceCaption.textContent.trim();
+				caption.hidden = false;
+				inspectedImage.setAttribute('aria-describedby', caption.id);
+			} else {
+				caption.textContent = '';
+				caption.hidden = true;
+				inspectedImage.removeAttribute('aria-describedby');
+			}
+			setInspectorMode('fit');
+			document.documentElement.dataset.imageInspectorOpen = 'true';
+			dialog.showModal();
+			closeButton.focus();
+			if (inspectedImage.complete) scheduleSizeControlUpdate();
+		};
+
+		triggers.forEach((trigger) => {
+			const image = trigger.querySelector('img');
+			if (image && !image.complete) image.addEventListener('load', scheduleAvailabilityUpdate, { once: true });
+			trigger.addEventListener('click', (event) => {
+				if (trigger.dataset.imageInspectionAvailable !== 'true') return;
+				event.preventDefault();
+				openInspector(trigger);
+			});
+		});
+
+		sizeButton?.addEventListener('click', () => {
+			setInspectorMode(media?.dataset.imageInspectorMode === 'actual' ? 'fit' : 'actual');
+		});
+		closeButton?.addEventListener('click', () => dialog.close());
+		dialog.addEventListener('close', () => {
+			delete document.documentElement.dataset.imageInspectorOpen;
+			activeTrigger?.focus();
+			activeTrigger = null;
+			if (inspectedImage) inspectedImage.removeAttribute('src');
+		});
+
+		if ('ResizeObserver' in window) {
+			const observer = new ResizeObserver(scheduleAvailabilityUpdate);
+			triggers.forEach((trigger) => observer.observe(trigger));
+			if (media) new ResizeObserver(scheduleSizeControlUpdate).observe(media);
+		} else {
+			window.addEventListener('resize', () => {
+				scheduleAvailabilityUpdate();
+				scheduleSizeControlUpdate();
+			}, { passive: true });
+		}
+		inspectedImage?.addEventListener('load', scheduleSizeControlUpdate);
+		document.fonts?.ready.then(scheduleAvailabilityUpdate).catch(() => {});
+		updateAvailability();
+	}
+</script>

package/src/components/NavigationPageTree.astro

@@ -7,7 +7,7 @@ import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: SiteNavigationNode[];
-	currentPage?: SitePage;
+	currentPage?: SiteNode;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
 }

package/src/components/NoteNavigationScript.astro

@@ -0,0 +1,4 @@
+<script>
+	import { installNoteNavigation } from '../lib/noteNavigation';
+	installNoteNavigation();
+</script>

package/src/components/PageAliasRedirect.astro

@@ -6,9 +6,10 @@ import { withBasePath } from '../lib/basePath';
 interface Props {
 	targetPathname: string;
 	targetTitle: string;
+	categoryTitle?: string;
 }
 
-const { targetPathname, targetTitle } = Astro.props;
+const { targetPathname, targetTitle, categoryTitle } = Astro.props;
 const { labels, lang } = projectConfig.locale;
 const targetHref = withBasePath(projectConfig.site.basePath, targetPathname);
 const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
@@ -22,7 +23,7 @@ const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
 		<meta name="robots" content="noindex, follow" />
 		<meta http-equiv="refresh" content={`0; url=${targetHref}`} />
 		<link rel="canonical" href={canonicalUrl} />
-		<title>{labels.pageMoved}: {targetTitle}</title>
+		<title>{categoryTitle ?? labels.pageMoved}: {targetTitle}</title>
 		<style is:inline>
 			:root {
 				color-scheme: light dark;
@@ -42,8 +43,8 @@ const canonicalUrl = getAbsolutePageUrl(projectConfig.site.url, targetPathname);
 	</head>
 	<body>
 		<main>
-			<h1>{labels.pageMoved}</h1>
-			<p>{labels.pageMovedText} <a href={targetHref}>{targetTitle}</a>.</p>
+			<h1>{categoryTitle ?? labels.pageMoved}</h1>
+			<p>{!categoryTitle && labels.pageMovedText} <a href={targetHref}>{targetTitle}</a>.</p>
 		</main>
 	</body>
 </html>

package/src/components/PageContentsNavigation.astro

@@ -6,14 +6,13 @@ import PageContentsLinks from './PageContentsLinks.astro';
 interface Props {
 	headings: HeadingNavigation[];
 	pageTitle: string;
-	variant: 'inline' | 'rail';
 }
 
-const { headings, pageTitle, variant } = Astro.props;
+const { headings, pageTitle } = Astro.props;
 const label = `${projectConfig.locale.labels.pageNavigation}: ${pageTitle}`;
 ---
 
-<aside class={`page-contents-navigation page-contents-navigation-${variant}`}>
+<aside class="page-contents-navigation page-contents-navigation-rail">
 	<nav aria-label={label}>
 		<p class="page-contents-navigation-label">{projectConfig.locale.labels.pageNavigation}</p>
 		<PageContentsLinks headings={headings} variant="desktop" />

package/src/components/SearchNavigationScript.astro

@@ -0,0 +1,4 @@
+<script>
+	import { setupSearchNavigation } from '../lib/searchNavigation';
+	setupSearchNavigation();
+</script>

package/src/components/SearchPage.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import { ArrowLeft } from '@lucide/astro';
 import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
@@ -82,6 +83,9 @@ const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
 		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
 	);
 const bundlePath = withBasePath(projectConfig.site.basePath, '/pagefind/');
+const pagefindTranslationOption = projectConfig.locale.pagefindTranslations
+	? `,\n\t\t\ttranslations: ${JSON.stringify(projectConfig.locale.pagefindTranslations)}`
+	: '';
 const searchScript = `(() => {
 	const root = document.querySelector('#norna-search');
 	const status = root?.querySelector('[data-search-status]');
@@ -95,7 +99,7 @@ const searchScript = `(() => {
 			bundlePath: ${JSON.stringify(bundlePath)},
 			baseUrl: ${JSON.stringify(projectConfig.site.basePath)},
 			showImages: false,
-			showSubResults: true
+			showSubResults: true${pagefindTranslationOption}
 		});
 		const labelInput = () => {
 			const input = root.querySelector('.pagefind-ui__search-input');
@@ -145,7 +149,44 @@ const searchScript = `(() => {
 			pagePresentation={pagePresentation}
 			visualTheme={visualTheme}
 			sectionIndex={0}
-		/>
+		>
+			<div slot="before-heading" class="search-return">
+				<a href={projectConfig.site.basePath} data-search-return data-search-return-label={labels.searchReturn}>
+					<ArrowLeft aria-hidden="true" />
+					<span>{labels.returnHome}</span>
+				</a>
+			</div>
+		</SiteSection>
 	</main>
 	<script is:inline set:html={searchScript} />
 </BaseLayout>
+
+<style>
+	.search-return {
+		width: var(--layout-heading-width);
+		margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+		margin-bottom: 1rem;
+	}
+
+	.search-return a {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 2.75rem;
+		max-width: 100%;
+		color: var(--color-link-text);
+		font-size: 0.9375rem;
+		line-height: 1.5;
+		text-underline-offset: 0.2em;
+	}
+
+	.search-return svg {
+		width: 1.125rem;
+		height: 1.125rem;
+		flex-shrink: 0;
+	}
+
+	.search-return span {
+		overflow-wrap: anywhere;
+	}
+</style>

package/src/components/SectionNavigationScript.astro

@@ -1,13 +1,18 @@
 <script>
+	import { setupNavigationFollowing } from '../lib/navigationFollowing';
+
 	const siteTop = document.querySelector<HTMLElement>('.site-top');
 	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
 	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>(
-		'.mobile-nav-sections a, .page-contents-links a, .page-nav a',
+		'.mobile-nav-sections a, .page-contents-links a, .page-nav a, .top-page-sections a',
 	));
-	const submenuItems = Array.from(document.querySelectorAll<HTMLElement>('.site-nav-item-has-submenu'));
+	const topPageMenus = Array.from(document.querySelectorAll<HTMLDetailsElement>('.top-page-menu'));
 	const mobileDestinationLinks = Array.from(mobileMenu?.querySelectorAll<HTMLAnchorElement>('.mobile-nav-destination') ?? []);
 	const mobileMenuSummary = mobileMenu?.querySelector<HTMLElement>(':scope > summary');
+	const mobileMenuPanel = mobileMenu?.querySelector<HTMLElement>('[data-compact-navigation-panel]');
+	const mobileMenuClose = mobileMenu?.querySelector<HTMLButtonElement>('[data-compact-navigation-close]');
 	const sectionTrackingEnabled = document.documentElement.dataset.sectionTracking === 'enabled';
+	const navigationFollowing = sectionTrackingEnabled ? setupNavigationFollowing() : undefined;
 	const trackedHeadingIds = new Set(sectionLinks.flatMap((link) => {
 		const linkUrl = new URL(link.href, window.location.href);
 		if (linkUrl.pathname !== window.location.pathname || !linkUrl.hash) return [];
@@ -99,6 +104,7 @@
 				link.removeAttribute('aria-current');
 			}
 		});
+		navigationFollowing?.update();
 	};
 
 	const updateReadingPosition = () => {
@@ -144,6 +150,7 @@
 				link.removeAttribute('aria-current');
 			}
 		});
+		navigationFollowing?.update();
 	};
 
 	const scheduleReadingPositionUpdate = () => {
@@ -151,25 +158,90 @@
 		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
 	};
 
-	submenuItems.forEach((item) => {
-		const resetDismissal = () => delete item.dataset.submenuDismissed;
-		item.addEventListener('pointerleave', resetDismissal);
-		item.querySelector<HTMLAnchorElement>(':scope > a')?.addEventListener('focus', resetDismissal);
+	topPageMenus.forEach((menu) => {
+		menu.addEventListener('toggle', () => {
+			if (!menu.open) return;
+			topPageMenus.forEach((other) => { if (other !== menu) other.open = false; });
+			const panel = menu.querySelector<HTMLElement>('.top-page-panel');
+			if (!panel) return;
+			panel.style.removeProperty('--top-page-panel-shift');
+			const rectangle = panel.getBoundingClientRect();
+			const shift = Math.max(0, 16 - rectangle.left)
+				- Math.max(0, rectangle.right - document.documentElement.clientWidth + 16);
+			panel.style.setProperty('--top-page-panel-shift', `${shift}px`);
+		});
+		menu.addEventListener('keydown', (event) => {
+			if (event.key !== 'Escape' || !menu.open) return;
+			event.preventDefault();
+			menu.open = false;
+			menu.querySelector('summary')?.focus();
+		});
+		menu.addEventListener('focusout', (event) => {
+			if (event.relatedTarget instanceof Node && !menu.contains(event.relatedTarget)) menu.open = false;
+		});
+		menu.querySelectorAll('a').forEach((link) => {
+			link.addEventListener('click', () => { menu.open = false; });
+		});
 	});
+	if (topPageMenus.length > 0) {
+		document.addEventListener('pointerdown', (event) => {
+			topPageMenus.forEach((menu) => {
+				if (event.target instanceof Node && !menu.contains(event.target)) menu.open = false;
+			});
+		});
+	}
 
 	if (mobileMenu) {
+		const siteHeader = mobileMenu.closest<HTMLElement>('.site-top');
+		const navigationRow = mobileMenu.closest<HTMLElement>('.site-nav-row');
+		const navigationActions = mobileMenu.closest<HTMLElement>('.site-nav-actions');
+		const backgroundTargets = new Set<HTMLElement>([
+			...Array.from(document.body.children)
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== siteHeader),
+			...Array.from(siteHeader?.children ?? [])
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== navigationRow),
+			...Array.from(navigationRow?.children ?? [])
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== navigationActions),
+			...Array.from(navigationActions?.children ?? [])
+				.filter((element): element is HTMLElement => element instanceof HTMLElement && element !== mobileMenu),
+		]);
+		const previousInertState = new Map<HTMLElement, boolean>();
+		const setBackgroundInert = (inert: boolean) => {
+			if (inert) {
+				backgroundTargets.forEach((element) => {
+					if (!previousInertState.has(element)) {
+						previousInertState.set(element, element.hasAttribute('inert'));
+					}
+					element.setAttribute('inert', '');
+				});
+				return;
+			}
+
+			previousInertState.forEach((wasInert, element) => {
+				if (!wasInert) element.removeAttribute('inert');
+			});
+			previousInertState.clear();
+		};
+		const closeMenu = (restoreFocus: boolean) => {
+			mobileMenu.open = false;
+			if (restoreFocus) mobileMenuSummary?.focus({ preventScroll: true });
+		};
+
 		mobileDestinationLinks.forEach((link) => {
 			link.addEventListener('click', () => {
-				mobileMenu.open = false;
+				closeMenu(false);
 			});
 		});
+		mobileMenuClose?.addEventListener('click', () => closeMenu(true));
 
 		mobileMenu.addEventListener('toggle', () => {
 			document.documentElement.classList.toggle('mobile-navigation-open', mobileMenu.open);
+			setBackgroundInert(mobileMenu.open);
 			if (mobileMenu.open) {
-				window.requestAnimationFrame(() => (
-					mobileMenu.querySelector<HTMLElement>('.mobile-nav-view h2, .mobile-nav-view a')?.focus()
-				));
+				window.requestAnimationFrame(() => {
+					mobileMenuClose?.focus({ preventScroll: true });
+					navigationFollowing?.revealCompact();
+				});
 			}
 		});
 
@@ -178,16 +250,15 @@
 
 			if (event.key === 'Escape') {
 				event.preventDefault();
-				mobileMenu.open = false;
-				mobileMenuSummary?.focus();
+				closeMenu(true);
 				return;
 			}
 
 			if (event.key !== 'Tab') return;
 
-			const focusableElements = Array.from(mobileMenu.querySelectorAll<HTMLElement>(
-				'summary, a[href]:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])',
-			)).filter((element) => element.getClientRects().length > 0);
+			const focusableElements = Array.from(mobileMenuPanel?.querySelectorAll<HTMLElement>(
+				'a[href]:not([hidden]), button:not([disabled]):not([hidden]), input:not([disabled]):not([hidden]), summary, [tabindex]:not([tabindex="-1"]):not([hidden])',
+			) ?? []).filter((element) => element.getClientRects().length > 0);
 			const firstFocusable = focusableElements[0];
 			const lastFocusable = focusableElements.at(-1);
 			if (!firstFocusable || !lastFocusable) return;
@@ -209,7 +280,6 @@
 
 			pauseSectionTrackingForAnchorNavigation();
 			if (mobileMenu) mobileMenu.open = false;
-			link.closest<HTMLElement>('.site-nav-item')?.setAttribute('data-submenu-dismissed', 'true');
 
 			window.requestAnimationFrame(() => {
 				updateCurrentSection();

package/src/components/SiteBreadcrumbs.astro

@@ -4,7 +4,7 @@ import { withBasePath } from '../lib/basePath';
 import type { SiteNode, SitePage } from '../lib/sitePages';
 
 interface Props {
-	currentPage: SitePage;
+	currentPage: SiteNode;
 	nodes: SiteNode[];
 }