@janga/norna 0.7.25 → 0.7.26

package/src/components/TableOverflowScript.astro

@@ -1,38 +1,48 @@
 ---
-import { ChevronLeft, ChevronRight } from '@lucide/astro';
+import { ChevronDown, ChevronsUpDown, ChevronUp } from '@lucide/astro';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 
 const labels = projectConfig.locale.labels;
 ---
 
 <template data-table-navigation-template>
-	<div class="norna-table-navigation" data-table-navigation hidden>
+	<div class="norna-table-navigation" data-table-navigation data-table-locale={projectConfig.locale.formattingLocale} hidden>
 		<span class="visually-hidden" data-table-overflow-description>{labels.tableOverflowDescription}</span>
-		<div class="norna-table-navigation-buttons" role="group" aria-label={labels.tableColumns}>
-			<button
-				type="button"
-				data-table-scroll-previous
-				aria-label={labels.tablePreviousColumns}
-				title={labels.tablePreviousColumns}
-			>
-				<ChevronLeft aria-hidden="true" size={18} stroke-width={1.8} />
-			</button>
-			<button
-				type="button"
-				data-table-scroll-next
-				aria-label={labels.tableNextColumns}
-				title={labels.tableNextColumns}
-			>
-				<ChevronRight aria-hidden="true" size={18} stroke-width={1.8} />
-			</button>
+		<div class="norna-table-scrollbar" data-table-scrollbar role="scrollbar"
+			aria-label={labels.tableColumns} aria-orientation="horizontal"
+			aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0">
+			<span class="norna-table-scrollbar-thumb" data-table-scrollbar-thumb aria-hidden="true"></span>
 		</div>
 	</div>
 </template>
 
+<template data-table-sort-indicator-template
+	data-sort-ascending={labels.tableSortAscending}
+	data-sort-descending={labels.tableSortDescending}
+	data-sort-reset={labels.tableSortReset}>
+	<span class="norna-table-sort-indicator" aria-hidden="true">
+		<span data-table-sort-icon="unsorted"><ChevronsUpDown size={15} stroke-width={1.8} /></span>
+		<span data-table-sort-icon="ascending"><ChevronUp size={15} stroke-width={1.8} /></span>
+		<span data-table-sort-icon="descending"><ChevronDown size={15} stroke-width={1.8} /></span>
+	</span>
+</template>
+
 <script>
+	import { createTableSortTooltip } from '../lib/table-sort-tooltip';
+
 	type TableLayout = 'contained' | 'prose' | 'end' | 'canvas';
+	type SortDirection = 'ascending' | 'descending';
+	type ScrollbarControl = { element: HTMLElement; thumb: HTMLElement; navigation: HTMLElement };
 	const layoutUpdaters = new Set<() => void>();
+	let sortTooltip: ReturnType<typeof createTableSortTooltip> | undefined;
 	const navigationTemplate = document.querySelector<HTMLTemplateElement>('[data-table-navigation-template]');
+	const sortIndicatorTemplate = document.querySelector<HTMLTemplateElement>('[data-table-sort-indicator-template]');
+	const sortActions = {
+		unsorted: sortIndicatorTemplate?.dataset.sortAscending ?? '',
+		ascending: sortIndicatorTemplate?.dataset.sortDescending ?? '',
+		descending: sortIndicatorTemplate?.dataset.sortReset ?? '',
+	};
+	const tableLocale = navigationTemplate?.content.querySelector<HTMLElement>('[data-table-locale]')?.dataset.tableLocale ?? 'en';
 	const synchronizedAttributes = [
 		'data-appearance',
 		'data-focus-reading',
@@ -47,13 +57,25 @@ const labels = projectConfig.locale.labels;
 		const isTopLevel = frame.parentElement?.classList.contains('section-markdown') === true;
 		const tableHead = table?.tHead;
 		const headingCells = Array.from(tableHead?.querySelectorAll<HTMLTableCellElement>('th') ?? []);
+		const hasRowHeaders = frame.dataset.tableRowHeaders === 'true';
 		let scheduledFrame: number | null = null;
 		let stickyHeading: HTMLElement | null = null;
 		let stickyHeadingTrack: HTMLElement | null = null;
-		let tableNavigation: HTMLElement | null = null;
-		let previousButton: HTMLButtonElement | null = null;
-		let nextButton: HTMLButtonElement | null = null;
+		const scrollbars: ScrollbarControl[] = [];
+		let scrollbarDrag: { control: ScrollbarControl; pointerId: number; grabOffset: number } | null = null;
 		let overflowDescriptionId: string | null = null;
+		const tableBody = table?.tBodies.length === 1 ? table.tBodies[0] : null;
+		const bodyRows = Array.from(tableBody?.rows ?? []);
+		const originalRows = bodyRows.map((row, index) => ({ row, index }));
+		let sortedColumn: number | null = null;
+		let sortDirection: SortDirection | null = null;
+		const sortButtons: HTMLButtonElement[] = [];
+		const stickyCells: HTMLElement[] = [];
+		const stickySortButtons: HTMLButtonElement[] = [];
+		// One sticky surface keeps the heading and scrollbar together at both table edges.
+		const stickyContext = document.createElement('div');
+		stickyContext.className = 'norna-table-sticky-context';
+		frame.insertBefore(stickyContext, scrollRegion);
 
 		const removeDuplicateIdentity = (element: HTMLElement) => {
 			element.removeAttribute('id');
@@ -72,21 +94,190 @@ const labels = projectConfig.locale.labels;
 			stickyHeadingTrack = document.createElement('div');
 			stickyHeadingTrack.className = 'norna-table-sticky-heading-track';
 			stickyHeading.append(stickyHeadingTrack);
-			frame.insertBefore(stickyHeading, scrollRegion);
+			stickyContext.prepend(stickyHeading);
 		};
 
 		const createTableNavigation = () => {
 			if (!navigationTemplate) return;
-			const fragment = navigationTemplate.content.cloneNode(true) as DocumentFragment;
-			tableNavigation = fragment.querySelector<HTMLElement>('[data-table-navigation]');
-			if (!tableNavigation) return;
-
-			const description = tableNavigation.querySelector<HTMLElement>('[data-table-overflow-description]');
-			previousButton = tableNavigation.querySelector<HTMLButtonElement>('[data-table-scroll-previous]');
-			nextButton = tableNavigation.querySelector<HTMLButtonElement>('[data-table-scroll-next]');
+			if (!scrollRegion.id) scrollRegion.id = `norna-table-scroll-${frameIndex + 1}`;
 			overflowDescriptionId = `norna-table-overflow-${frameIndex + 1}`;
-			if (description) description.id = overflowDescriptionId;
-			frame.insertBefore(fragment, scrollRegion);
+			for (const placement of ['top', 'bottom']) {
+				const fragment = navigationTemplate.content.cloneNode(true) as DocumentFragment;
+				const navigation = fragment.querySelector<HTMLElement>('[data-table-navigation]');
+				const element = navigation?.querySelector<HTMLElement>('[data-table-scrollbar]');
+				const thumb = element?.querySelector<HTMLElement>('[data-table-scrollbar-thumb]');
+				if (!navigation || !element || !thumb) continue;
+				navigation.dataset.tableNavigation = placement;
+				element.setAttribute('aria-controls', scrollRegion.id);
+				const description = navigation.querySelector<HTMLElement>('[data-table-overflow-description]');
+				if (placement === 'top' && description) description.id = overflowDescriptionId;
+				else description?.remove();
+				scrollbars.push({ element, thumb, navigation });
+				if (placement === 'top') stickyContext.append(fragment);
+				else frame.append(fragment);
+			}
+			if (scrollbars.length === 2) frame.dataset.tableCustomScrollbars = 'true';
+		};
+
+		const cellText = (cell: HTMLTableCellElement) => (cell.textContent ?? '').replace(/\s+/gu, ' ').trim();
+
+		const parseNumber = (value: string) => {
+			if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(value)) return null;
+			const number = Number(value);
+			return Number.isFinite(number) ? number : null;
+		};
+
+		const parseIsoDate = (value: string) => {
+			const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/u.exec(value);
+			if (dateOnly) {
+				const year = Number(dateOnly[1]);
+				const month = Number(dateOnly[2]);
+				const day = Number(dateOnly[3]);
+				const timestamp = Date.UTC(year, month - 1, day);
+				const date = new Date(timestamp);
+				return date.getUTCFullYear() === year
+					&& date.getUTCMonth() === month - 1
+					&& date.getUTCDate() === day
+					? timestamp
+					: null;
+			}
+
+			if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:\d{2})?$/u.test(value)) {
+				return null;
+			}
+
+			const timestamp = Date.parse(value);
+			return Number.isNaN(timestamp) ? null : timestamp;
+		};
+
+		const getColumnType = (columnIndex: number) => {
+			const values = originalRows
+				.map(({ row }) => cellText(row.cells[columnIndex]))
+				.filter((value) => value !== '');
+			if (values.length === 0) return 'text';
+			if (values.every((value) => parseNumber(value) !== null)) return 'number';
+			if (values.every((value) => parseIsoDate(value) !== null)) return 'date';
+			return 'text';
+		};
+
+		const getCollator = () => {
+			try {
+				return new Intl.Collator(tableLocale, {
+					numeric: false,
+					sensitivity: 'variant',
+					usage: 'sort',
+				});
+			} catch {
+				return new Intl.Collator(undefined, {
+					numeric: false,
+					sensitivity: 'variant',
+					usage: 'sort',
+				});
+			}
+		};
+
+		const isSortableTable = () => {
+			if (!tableBody || bodyRows.length === 0 || headingCells.length === 0 || tableHead?.rows.length !== 1) return false;
+			const expectedColumns = headingCells.length;
+			return headingCells.every((cell) => cell.colSpan === 1 && cell.rowSpan === 1
+				&& !cell.querySelector('a, button, input, select, textarea, summary, [tabindex], [contenteditable]'))
+				&& bodyRows.every((row) => row.cells.length === expectedColumns
+					&& Array.from(row.cells).every((cell) => cell.colSpan === 1 && cell.rowSpan === 1));
+		};
+
+		const updateSortState = (activeColumn: number | null, direction: SortDirection | null) => {
+			headingCells.forEach((headingCell, columnIndex) => {
+				headingCell.removeAttribute('aria-sort');
+				const button = sortButtons[columnIndex];
+				if (!button) return;
+				const state = columnIndex === activeColumn && direction ? direction : 'unsorted';
+				const action = sortActions[state];
+				const columnName = headingCell.getAttribute('aria-label') ?? cellText(headingCell);
+				for (const control of [button, stickySortButtons[columnIndex]]) {
+					if (!control) continue;
+					control.dataset.tableSortState = state;
+					control.dataset.tableSortAction = action;
+					control.setAttribute('aria-label', `${columnName}: ${action}`);
+					sortTooltip?.refresh(control);
+				}
+				if (columnIndex === activeColumn && direction) headingCell.setAttribute('aria-sort', direction);
+			});
+			if (activeColumn === null || !direction) {
+				table?.removeAttribute('data-table-sort-column');
+				table?.removeAttribute('data-table-sort-direction');
+			} else {
+				table?.setAttribute('data-table-sort-column', String(activeColumn));
+				table?.setAttribute('data-table-sort-direction', direction);
+			}
+		};
+
+		const sortRows = (columnIndex: number, direction: SortDirection) => {
+			if (!tableBody) return;
+			const type = getColumnType(columnIndex);
+			const collator = type === 'text' ? getCollator() : null;
+			const sortedRows = [...originalRows].sort((left, right) => {
+				const leftValue = cellText(left.row.cells[columnIndex]);
+				const rightValue = cellText(right.row.cells[columnIndex]);
+				if (leftValue === '' || rightValue === '') {
+					if (leftValue === rightValue) return left.index - right.index;
+					return leftValue === '' ? 1 : -1;
+				}
+
+				let result = 0;
+				if (type === 'number') {
+					result = (parseNumber(leftValue) ?? 0) - (parseNumber(rightValue) ?? 0);
+				} else if (type === 'date') {
+					result = (parseIsoDate(leftValue) ?? 0) - (parseIsoDate(rightValue) ?? 0);
+				} else {
+					result = collator?.compare(leftValue, rightValue) ?? 0;
+				}
+
+				return result === 0
+					? left.index - right.index
+					: result * (direction === 'ascending' ? 1 : -1);
+			});
+			sortedRows.forEach(({ row }) => tableBody.append(row));
+		};
+
+		const resetRows = () => {
+			if (!tableBody) return;
+			originalRows.forEach(({ row }) => tableBody.append(row));
+		};
+
+		const createTableSorting = () => {
+			if (!table || !sortIndicatorTemplate || !isSortableTable()) return;
+			sortTooltip ??= createTableSortTooltip();
+			headingCells.forEach((headingCell, columnIndex) => {
+				const button = document.createElement('button');
+				button.type = 'button';
+				button.className = 'norna-table-sort-button';
+				button.dataset.tableSortButton = '';
+				button.dataset.tableSortState = 'unsorted';
+				// Keep the semantic column name when its original control is hidden.
+				if (!headingCell.hasAttribute('aria-label')) headingCell.setAttribute('aria-label', cellText(headingCell));
+				button.append(...Array.from(headingCell.childNodes));
+				button.append(sortIndicatorTemplate.content.cloneNode(true));
+				headingCell.replaceChildren(button);
+				sortButtons.push(button);
+				sortTooltip.attach(button);
+				button.addEventListener('click', () => {
+					if (sortedColumn !== columnIndex) {
+						sortedColumn = columnIndex;
+						sortDirection = 'ascending';
+						sortRows(columnIndex, sortDirection);
+					} else if (sortDirection === 'ascending') {
+						sortDirection = 'descending';
+						sortRows(columnIndex, sortDirection);
+					} else {
+						resetRows();
+						sortedColumn = null;
+						sortDirection = null;
+					}
+					updateSortState(sortedColumn, sortDirection);
+				});
+			});
+			updateSortState(null, null);
+			table.dataset.tableSortable = 'true';
 		};
 
 		const setOverflowDescription = (enabled: boolean) => {
@@ -100,21 +291,83 @@ const labels = projectConfig.locale.labels;
 			else scrollRegion.removeAttribute('aria-describedby');
 		};
 
-		const scrollTable = (direction: -1 | 1) => {
-			const isRightToLeft = getComputedStyle(scrollRegion).direction === 'rtl';
-			const distance = Math.max(1, Math.round(scrollRegion.clientWidth * 0.8));
-			const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-			scrollRegion.scrollBy({
-				behavior: reducedMotion ? 'auto' : 'smooth',
-				left: direction * distance * (isRightToLeft ? -1 : 1),
-			});
+		const getScrollbarGeometry = (control = scrollbars[0]) => {
+			const maximum = Math.max(0, scrollRegion.scrollWidth - scrollRegion.clientWidth);
+			const rtl = getComputedStyle(scrollRegion).direction === 'rtl';
+			const position = Math.min(maximum, Math.max(0, scrollRegion.scrollLeft * (rtl ? -1 : 1)));
+			const width = control?.element.getBoundingClientRect().width ?? 0;
+			const fraction = scrollRegion.clientWidth / Math.max(1, scrollRegion.scrollWidth);
+			const thumbWidth = Math.min(width, Math.max(24, width * fraction));
+			return { maximum, rtl, position, width, thumbWidth, travel: width - thumbWidth };
+		};
+
+		const setScrollbarPosition = (position: number) => {
+			const { maximum, rtl } = getScrollbarGeometry();
+			scrollRegion.scrollTo({ left: Math.min(maximum, Math.max(0, position)) * (rtl ? -1 : 1), behavior: 'instant' });
+			updateOverflow();
+		};
+
+		const synchronizeScrollbar = () => {
+			for (const control of scrollbars) {
+				const { maximum, rtl, position, thumbWidth, travel } = getScrollbarGeometry(control);
+				const progress = maximum > 0 ? position / maximum : 0;
+				control.thumb.style.width = `${thumbWidth}px`;
+				control.thumb.style.left = `${travel * (rtl ? 1 - progress : progress)}px`;
+				control.element.setAttribute('aria-valuenow', String(Math.round(progress * 100)));
+			}
+		};
+
+		const dragScrollbar = (clientX: number) => {
+			if (!scrollbarDrag) return;
+			const { control } = scrollbarDrag;
+			const { maximum, rtl, travel } = getScrollbarGeometry(control);
+			if (travel <= 0) return;
+			const offset = clientX - control.element.getBoundingClientRect().left - scrollbarDrag.grabOffset;
+			const fraction = Math.min(1, Math.max(0, offset / travel));
+			setScrollbarPosition(maximum * (rtl ? 1 - fraction : fraction));
 		};
 
 		const synchronizeStickyHeadingPosition = () => {
 			if (!stickyHeading || !stickyHeadingTrack || !table) return;
 			const layerBounds = stickyHeading.getBoundingClientRect();
 			const tableBounds = table.getBoundingClientRect();
-			stickyHeadingTrack.style.transform = `translateX(${tableBounds.left - layerBounds.left}px)`;
+			const trackOffset = tableBounds.left - layerBounds.left;
+			stickyHeadingTrack.style.transform = `translateX(${trackOffset}px)`;
+
+			const rowHeader = stickyHeadingTrack.querySelector<HTMLElement>('[data-table-sticky-row-header]');
+			if (!rowHeader) return;
+			const rowHeaderLeft = Number.parseFloat(rowHeader.style.left) || 0;
+			const rowHeaderWidth = Number.parseFloat(rowHeader.style.width) || 0;
+			const isRightToLeft = getComputedStyle(table).direction === 'rtl';
+			const naturalLeft = tableBounds.left + rowHeaderLeft;
+			const desiredLeft = isRightToLeft
+				? layerBounds.right - rowHeaderWidth
+				: layerBounds.left;
+			rowHeader.style.transform = `translateX(${desiredLeft - naturalLeft}px)`;
+		};
+
+		const synchronizeSortControls = (useSticky: boolean) => {
+			if (!stickyHeading || sortButtons.length === 0) return;
+			const active = document.activeElement;
+			const from = useSticky ? sortButtons : stickySortButtons;
+			const to = useSticky ? stickySortButtons : sortButtons;
+			const focusedColumn = from.findIndex((button) => button === active);
+			stickyHeading.toggleAttribute('inert', !useSticky);
+			if (useSticky) {
+				stickyHeading.removeAttribute('aria-hidden');
+				stickyHeading.setAttribute('role', 'group');
+				const groupLabel = scrollbars[0]?.element.getAttribute('aria-label');
+				if (groupLabel) stickyHeading.setAttribute('aria-label', groupLabel);
+			}
+			for (const [index, button] of sortButtons.entries()) {
+				button.tabIndex = useSticky ? -1 : 0;
+				if (!useSticky) button.removeAttribute('aria-hidden');
+				if (stickySortButtons[index]) stickySortButtons[index].tabIndex = useSticky ? 0 : -1;
+			}
+			// Transfer focus before hiding the control that previously owned it.
+			if (focusedColumn >= 0) to[focusedColumn]?.focus({ preventScroll: true });
+			if (useSticky) sortButtons.forEach((button) => button.setAttribute('aria-hidden', 'true'));
+			else stickyHeading.setAttribute('aria-hidden', 'true');
 		};
 
 		const synchronizeStickyHeadingGeometry = () => {
@@ -128,10 +381,40 @@ const labels = projectConfig.locale.labels;
 			frame.style.setProperty('--table-sticky-heading-height', `${headingBounds.height}px`);
 			stickyHeadingTrack.style.width = `${tableBounds.width}px`;
 			stickyHeadingTrack.style.height = `${headingBounds.height}px`;
-			stickyHeadingTrack.replaceChildren(...headingCells.map((headingCell) => {
+			headingCells.forEach((headingCell, columnIndex) => {
 				const cellBounds = headingCell.getBoundingClientRect();
 				const computedStyle = getComputedStyle(headingCell);
-				const visualCell = document.createElement('div');
+				let visualCell = stickyCells[columnIndex];
+				if (!visualCell) {
+					visualCell = document.createElement('div');
+					visualCell.append(...Array.from(headingCell.childNodes, (node) => node.cloneNode(true)));
+					removeDuplicateIdentity(visualCell);
+					const button = visualCell.querySelector<HTMLButtonElement>('[data-table-sort-button]');
+					if (button) {
+						button.removeAttribute('aria-hidden');
+						button.tabIndex = -1;
+						sortTooltip?.attach(button);
+						button.addEventListener('click', () => sortButtons[columnIndex].click());
+						// Focus on a clipped column must reveal it in the real scroll region.
+						button.addEventListener('focus', () => {
+							if (!stickyHeading) return;
+							const bounds = visualCell.getBoundingClientRect();
+							const viewport = stickyHeading.getBoundingClientRect();
+							const pinnedWidth = hasRowHeaders && columnIndex > 0
+								? stickyCells[0].getBoundingClientRect().width : 0;
+							const rtl = getComputedStyle(scrollRegion).direction === 'rtl';
+							const start = viewport.left + (rtl ? 0 : pinnedWidth);
+							const end = viewport.right - (rtl ? pinnedWidth : 0);
+							const delta = bounds.left < start ? bounds.left - start
+								: bounds.right > end ? Math.min(bounds.right - end, bounds.left - start) : 0;
+							if (Math.abs(delta) > 1) scrollRegion.scrollLeft += delta;
+							synchronizeStickyHeadingPosition();
+						});
+						stickySortButtons[columnIndex] = button;
+					}
+					stickyCells[columnIndex] = visualCell;
+					stickyHeadingTrack.append(visualCell);
+				}
 				visualCell.className = 'norna-table-sticky-heading-cell';
 				visualCell.style.left = `${cellBounds.left - tableBounds.left}px`;
 				visualCell.style.top = `${cellBounds.top - headingBounds.top}px`;
@@ -147,18 +430,62 @@ const labels = projectConfig.locale.labels;
 				visualCell.style.whiteSpace = computedStyle.whiteSpace;
 				visualCell.style.wordBreak = computedStyle.wordBreak;
 				visualCell.style.overflowWrap = computedStyle.overflowWrap;
-				visualCell.append(...Array.from(headingCell.childNodes, (node) => node.cloneNode(true)));
-				removeDuplicateIdentity(visualCell);
-				return visualCell;
-			}));
+				if (hasRowHeaders && columnIndex === 0) {
+					visualCell.classList.add('norna-table-sticky-heading-cell-row-header');
+					visualCell.dataset.tableStickyRowHeader = '';
+				}
+			});
 			synchronizeStickyHeadingPosition();
 			return true;
 		};
 
+		createTableSorting();
 		createTableNavigation();
 		createStickyHeading();
-		previousButton?.addEventListener('click', () => scrollTable(-1));
-		nextButton?.addEventListener('click', () => scrollTable(1));
+		const stopScrollbarDrag = () => {
+			const pointerId = scrollbarDrag?.pointerId;
+			const scrollbar = scrollbarDrag?.control.element;
+			scrollbarDrag = null;
+			if (pointerId !== undefined && scrollbar?.hasPointerCapture(pointerId)) scrollbar.releasePointerCapture(pointerId);
+			if (scrollbar) delete scrollbar.dataset.dragging;
+		};
+		for (const control of scrollbars) {
+			const { element: scrollbar, thumb: scrollbarThumb } = control;
+			scrollbar.addEventListener('keydown', (event) => {
+				const { maximum, rtl, position } = getScrollbarGeometry(control);
+				const step = Math.max(1, scrollRegion.clientWidth * 0.1);
+				const page = scrollRegion.clientWidth * 0.8;
+				let next: number;
+				switch (event.key) {
+					case 'ArrowLeft': next = position + step * (rtl ? 1 : -1); break;
+					case 'ArrowRight': next = position + step * (rtl ? -1 : 1); break;
+					case 'PageUp': next = position - page; break;
+					case 'PageDown': next = position + page; break;
+					case 'Home': next = 0; break;
+					case 'End': next = maximum; break;
+					default: return;
+				}
+				event.preventDefault();
+				setScrollbarPosition(next);
+			});
+			scrollbar.addEventListener('pointerdown', (event) => {
+				if (!event.isPrimary || event.button !== 0) return;
+				event.preventDefault();
+				scrollbar.focus({ preventScroll: true });
+				const bounds = scrollbarThumb.getBoundingClientRect();
+				const onThumb = event.clientX >= bounds.left && event.clientX <= bounds.right;
+				scrollbarDrag = { control, pointerId: event.pointerId, grabOffset: onThumb ? event.clientX - bounds.left : bounds.width / 2 };
+				scrollbar.setPointerCapture(event.pointerId);
+				scrollbar.dataset.dragging = 'true';
+				dragScrollbar(event.clientX);
+			});
+			scrollbar.addEventListener('pointermove', (event) => {
+				if (scrollbarDrag?.pointerId === event.pointerId) dragScrollbar(event.clientX);
+			});
+			scrollbar.addEventListener('pointerup', stopScrollbarDrag);
+			scrollbar.addEventListener('pointercancel', stopScrollbarDrag);
+			scrollbar.addEventListener('lostpointercapture', stopScrollbarDrag);
+		}
 
 		const updateOverflow = ({ refreshStickyHeading = false } = {}) => {
 			const maximumScroll = Math.max(0, scrollRegion.scrollWidth - scrollRegion.clientWidth);
@@ -173,12 +500,13 @@ const labels = projectConfig.locale.labels;
 				? tableBounds.left >= scrollBounds.left - 2
 				: tableBounds.right <= scrollBounds.right + 2);
 
-			if (tableNavigation) {
-				tableNavigation.hidden = !hasOverflow;
-				frame.style.setProperty(
-					'--table-navigation-height',
-					hasOverflow ? `${tableNavigation.getBoundingClientRect().height}px` : '0px',
-				);
+			for (const { navigation } of scrollbars) {
+				if (!hasOverflow && navigation.contains(document.activeElement)) {
+					scrollRegion.tabIndex = -1;
+					scrollRegion.focus({ preventScroll: true });
+				}
+				if (!hasOverflow) stopScrollbarDrag();
+				navigation.hidden = !hasOverflow;
 			}
 			const stickyHeadingReady = hasOverflow && stickyHeading
 				? (refreshStickyHeading
@@ -190,11 +518,11 @@ const labels = projectConfig.locale.labels;
 			frame.dataset.tableAtStart = isAtStart ? 'true' : 'false';
 			frame.dataset.tableAtEnd = isAtEnd ? 'true' : 'false';
 			frame.dataset.tableStickyHeading = stickyHeadingReady ? 'true' : 'false';
-			if (previousButton) previousButton.disabled = isAtStart;
-			if (nextButton) nextButton.disabled = isAtEnd;
+			synchronizeSortControls(Boolean(stickyHeadingReady));
+			if (hasOverflow) synchronizeScrollbar();
 			setOverflowDescription(hasOverflow);
 			if (hasOverflow) scrollRegion.setAttribute('tabindex', '0');
-			else scrollRegion.removeAttribute('tabindex');
+			else if (document.activeElement !== scrollRegion) scrollRegion.removeAttribute('tabindex');
 			if (stickyHeadingReady && !refreshStickyHeading) synchronizeStickyHeadingPosition();
 		};
 

package/src/components/TopPageMenu.astro

@@ -0,0 +1,47 @@
+---
+import { ChevronDown } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import type { SiteNavigationNode } from '../lib/siteNavigation';
+import type { SiteNode } from '../lib/sitePages';
+import NavigationPageTree from './NavigationPageTree.astro';
+
+interface Props {
+	node: SiteNavigationNode;
+	currentPage?: SiteNode;
+	showSections: boolean;
+	showChildren: boolean;
+}
+const { node, currentPage, showSections, showChildren } = Astro.props;
+const sections = showSections ? node.sections : [];
+const children = showChildren ? node.children : [];
+const pageHref = node.node.kind === 'page'
+	? withBasePath(projectConfig.site.basePath, node.node.pathname)
+	: '';
+const label = `${projectConfig.locale.labels.navigationMenu}: ${node.node.title}`;
+---
+
+{(sections.length > 0 || children.length > 0) && (
+	<details class="top-page-menu">
+		<summary aria-label={label} title={label}>
+			<ChevronDown aria-hidden="true" />
+		</summary>
+		<div class="top-page-panel">
+			{sections.length > 0 && (
+				<nav aria-label={`${projectConfig.locale.labels.pageSections}: ${node.node.title}`}>
+					<ul class="top-page-sections">
+						{sections.map((section) => (
+							<li><a href={`${pageHref}#${section.id}`}>{section.title}</a></li>
+						))}
+					</ul>
+				</nav>
+			)}
+			{children.length > 0 && (
+				<nav class="top-page-children" aria-label={`${projectConfig.locale.labels.navigationChildren}: ${node.node.title}`}>
+					{sections.length > 0 && <p>{projectConfig.locale.labels.navigationChildren}</p>}
+					<NavigationPageTree nodes={children} currentPage={currentPage} variant="submenu" />
+				</nav>
+			)}
+		</div>
+	</details>
+)}

package/src/components/TreeNavigationScript.astro

@@ -62,15 +62,22 @@
 				branch.open,
 			])),
 		});
-		const applyDisclosureState = (state: SharedNavigationState) => {
+		const applyDisclosureState = (
+			state: SharedNavigationState,
+			openCurrentPageOnArrival = false,
+		) => {
 			branches.forEach((branch) => {
 				const pagePath = branch.dataset.pagePath ?? '';
-				branch.open = branch.dataset.currentBranch === 'true'
+				branch.open = (openCurrentPageOnArrival && branch.dataset.currentBranch === 'true')
 					|| state.openPaths.includes(pagePath);
 			});
 			sectionBranches.forEach((branch) => {
 				const pagePath = branch.dataset.pagePath ?? '';
 				const storedOpen = state.sectionOpenByPath[pagePath];
+				if (openCurrentPageOnArrival && branch.dataset.currentPage === 'true') {
+					branch.open = true;
+					return;
+				}
 				branch.open = typeof storedOpen === 'boolean'
 					? storedOpen
 					: branch.dataset.currentPage === 'true';
@@ -96,7 +103,7 @@
 			const storedSharedState = sessionStorage.getItem(sharedStateKey);
 			applyDisclosureState(storedSharedState === null
 				? storedState
-				: parseState(storedSharedState));
+				: parseState(storedSharedState), true);
 			const initialSharedState = mergeSharedState(getDisclosureState());
 			lastSharedState = JSON.stringify(initialSharedState);
 			sessionStorage.setItem(sharedStateKey, lastSharedState);