@janga/norna 0.7.24 → 0.7.25

package/scripts/lib/table-render-plugin.mjs

@@ -0,0 +1,33 @@
+import { defineHastPlugin } from 'satteri';
+
+export const nornaTableRenderPlugin = defineHastPlugin({
+	name: 'norna-table-render',
+	element: {
+		filter: ['table'],
+		visit(node, context) {
+			context.replaceNode(node, {
+				type: 'element',
+				tagName: 'div',
+				properties: {
+					className: ['norna-table-frame', 'content-block-note-lane-boundary'],
+					'data-table-frame': '',
+				},
+				children: [{
+					type: 'element',
+					tagName: 'div',
+					properties: {
+						className: ['norna-table-scroll'],
+						'data-table-scroll': '',
+						tabIndex: 0,
+					},
+					children: [{
+						type: 'element',
+						tagName: node.tagName,
+						properties: { ...(node.properties ?? {}) },
+						children: [...(node.children ?? [])],
+					}],
+				}],
+			});
+		},
+	},
+});

package/src/components/CardList.astro

@@ -32,6 +32,7 @@ const cardImageSizes = [
 const displayLink = (link: string) => withBasePath(projectConfig.site.basePath, link);
 const cardListClasses = [
 	'card-list',
+	'content-block-note-lane-boundary',
 	`card-list-layout-${layout}`,
 	`card-list-flow-${flow}`,
 	`card-list-size-${size}`,

package/src/components/CodeBlockCopyScript.astro

@@ -77,7 +77,8 @@ const labels = {
 
 			const button = template.content.firstElementChild?.cloneNode(true);
 			if (!(button instanceof HTMLButtonElement)) return;
-			wrapper.append(button);
+			const title = codeExample?.querySelector(':scope > .norna-code-title');
+			(title ?? wrapper).append(button);
 			button.addEventListener('click', async () => {
 				if (button.dataset.copyBusy === 'true') return;
 				button.dataset.copyBusy = 'true';

package/src/components/ImageCarousel.astro

@@ -45,7 +45,10 @@ const carouselStyle = carouselAspectRatio
 	: undefined;
 ---
 
-<div class="managed-images" aria-label={`${projectConfig.locale.labels.images}: ${title}`}>
+<div
+	class="managed-images content-block-note-lane-boundary"
+	aria-label={`${projectConfig.locale.labels.images}: ${title}`}
+>
 	<section
 		class="managed-image-item image-carousel"
 		data-carousel

package/src/components/ImageStack.astro

@@ -1,6 +1,7 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
-import { getImageAttributes } from '../lib/generatedImages';
+import { Maximize2 } from '@lucide/astro';
+import { getImageAttributes, getImageInspectionAttributes } from '../lib/generatedImages';
 import {
 	getCaptionId,
 	getManagedImageSizes,
@@ -23,21 +24,45 @@ const { title, images, maxAvailableWidthPercent, priorityFirstImage = false } =
 const managedImageSizes = getManagedImageSizes(maxAvailableWidthPercent);
 ---
 
-<div class="image-stack" aria-label={`${projectConfig.locale.labels.images}: ${title}`}>
+<div
+	class="image-stack content-block-note-lane-boundary"
+	aria-label={`${projectConfig.locale.labels.images}: ${title}`}
+>
 	{images.map((image, itemIndex) => {
 		const isPriorityItem = priorityFirstImage && itemIndex === 0;
 		const captionId = image.caption ? getCaptionId(image, itemIndex) : undefined;
+		const inspection = getImageInspectionAttributes(image.src ?? image.image);
+		const inspectionDescription = image.alt || image.caption || `${title} ${itemIndex + 1}`;
+		const inspectionLabel = projectConfig.locale.labels.inspectImage.replace('{description}', inspectionDescription);
+		const inspectionStyle = inspection.width && inspection.height
+			? `--managed-image-intrinsic-width: ${inspection.width}px; --managed-image-aspect-ratio: ${inspection.width / inspection.height}`
+			: undefined;
 
 		return (
-			<figure class="managed-image-item">
+			<figure class="managed-image-item" data-image-stack-figure>
 				<div class="managed-image-frame">
-					<img
-						{...getImageAttributes(image.src ?? image.image, managedImageSizes)}
-						class:list={['managed-image', getImageClass(image)]}
-						alt={image.alt ?? ''}
+					<a
+						class="managed-image-inspection-link"
+						href={inspection.href}
+						aria-label={inspectionLabel}
 						aria-describedby={captionId}
-						{...getImageLoadingProps(isPriorityItem)}
-					/>
+						data-image-inspection-trigger
+						data-image-intrinsic-width={inspection.width}
+						data-image-intrinsic-height={inspection.height}
+						data-image-inspection-scalable={inspection.scalable ? 'true' : undefined}
+						style={inspectionStyle}
+					>
+						<img
+							{...getImageAttributes(image.src ?? image.image, managedImageSizes)}
+							class:list={['managed-image', getImageClass(image)]}
+							alt={image.alt ?? ''}
+							aria-describedby={captionId}
+							{...getImageLoadingProps(isPriorityItem)}
+						/>
+						<span class="managed-image-inspection-affordance" aria-hidden="true">
+							<Maximize2 size={18} stroke-width={2} />
+						</span>
+					</a>
 				</div>
 				{image.caption && (
 					<figcaption class="image-meta" id={captionId}>

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/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/SectionNavigationScript.astro

@@ -7,6 +7,8 @@
 	const submenuItems = Array.from(document.querySelectorAll<HTMLElement>('.site-nav-item-has-submenu'));
 	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 trackedHeadingIds = new Set(sectionLinks.flatMap((link) => {
 		const linkUrl = new URL(link.href, window.location.href);
@@ -158,17 +160,54 @@
 	});
 
 	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();
+		};
+
 		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()
+					mobileMenuClose?.focus()
 				));
 			}
 		});
@@ -178,16 +217,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;