@lavalogic/scoria 0.40.1 → 0.40.2

package/dist/Components/Table/Table.svelte

@@ -1,694 +1,694 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import {
-		ContextMenuContext,
-		type IContextMenuOption,
-	} from '../../Contexts/ContextMenuContext.svelte';
-	import { cssLength, devCatch, refWrapper } from '../../Helpers/Helpers.svelte';
-	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
-	import LoadingOverlay from '../LoadingOverlay.svelte';
-	import TableBody from './Body/TableBody.svelte';
-	import TableHead from './Headers/TableHead.svelte';
-	import TableFooter from './Misc/TableFooter.svelte';
-	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
-	import TableSidebar from './Misc/TableSidebar.svelte';
-	import { TableContext } from './Types/Context/TableContext.svelte';
-	import type { Primitive } from './Types/Context/TableInitOptions.js';
-	import { PaginationType } from './Types/Pagination/PaginationType.js';
-	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
-
-	declare global {
-		interface HTMLElementEventMap {
-			edit: CustomEvent<{
-				selectAll: boolean;
-			}>;
-		}
-	}
-
-	/**
-	 * Top-level orchestrator props. Accepts either:
-	 *
-	 * - `table`: the structured `Table` instance returned by `createTable(...)`.
-	 *   This is the consumer-facing form.
-	 * - `tableContext`: the underlying `TableContext`. Used internally by
-	 *   `NestedTable` which constructs a context directly for each
-	 *   expansion. Not intended for consumer use.
-	 *
-	 * Exactly one of the two must be supplied; a runtime guard inside the
-	 * component throws if both are missing. The reference passed in is
-	 * captured at mount via `setContext` and should not be reassigned
-	 * afterwards.
-	 */
-	export interface TableProps<T extends object, IdType extends Primitive> {
-		readonly table?: { readonly _context: TableContext<T, IdType> };
-		readonly tableContext?: TableContext<T, IdType>;
-		nested?: boolean;
-	}
-
-	/**
-	 * Symbol used to share the currently-open quick-filter select across
-	 * every header in a single Table tree. Stored via `setContext` on
-	 * the same component that hosts the Table tree so multiple
-	 * independent tables on a page each own their own popup state.
-	 */
-	export const quickFilterContextIdentifier: symbol = Symbol();
-
-	const openedQuickFilterSelect = refWrapper<symbol | null>(null);
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,IdType extends Primitive"
->
-	const { nested = false, table, tableContext: tableContextProp }: TableProps<T, IdType> = $props();
-
-	// Resolve the underlying TableContext from whichever prop was passed:
-	// consumers pass `table`; internal `NestedTable` passes `tableContext`
-	// directly. Exactly one must be present — throw cleanly here rather
-	// than letting it surface as a downstream null-deref.
-	const tableContext: TableContext<T, IdType> = (() => {
-		const ctx = table?._context ?? tableContextProp;
-		if (!ctx) {
-			throw new Error(
-				'scoria: <Table /> requires either a `table` prop (the structured instance returned by createTable) or a `tableContext` prop (used internally by NestedTable).'
-			);
-		}
-		return ctx;
-	})();
-
-	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
-	setContext(TableContext.identifier, tableContext);
-
-	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
-		ContextMenuContext.identifier
-	);
-
-	let ref: HTMLDivElement | undefined = $state();
-	let unfocusRef: HTMLDivElement | undefined = $state();
-
-	setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
-
-	// Focus-restore on focusStart change. The DOM work runs inside `untrack`
-	// so a future selector tweak that reads reactive state (e.g.
-	// `document.activeElement`) does not retrigger on every focus change.
-	$effect(() => {
-		void tableContext.focusStart;
-		void ref;
-		untrack(() => {
-			if (tableContext.focusStart && ref) {
-				const { row, column: index } = tableContext.focusStart;
-				// `columnDefs[index]` can be undefined when the focus
-				// coordinate references a slot that no longer exists
-				// (e.g. an inner expand table remounted with a different
-				// column count, or a preset hydration raced column init).
-				// Guard so out-of-range degrades to "no focus restored".
-				const def = tableContext.columnDefs[index];
-				if (!def) {
-					return;
-				}
-				let element = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${def.id}`
-				) as HTMLElement | undefined;
-
-				if (element?.tabIndex == -1) {
-					const td = element;
-					element = td.querySelector('button') as HTMLElement | undefined;
-					if (!element) {
-						element = td.querySelector('input') as HTMLElement | undefined;
-					}
-				}
-
-				element?.focus({ preventScroll: true });
-				// Skip horizontal scroll-into-view for pinned cells (see the
-				// focusEnd effect for the rationale).
-				const startCell = element?.closest('[role="cell"]');
-				const isStartPinned =
-					startCell?.classList.contains('pinned-left') ||
-					startCell?.classList.contains('pinned-right');
-				element?.scrollIntoView({
-					behavior: 'instant',
-					block: 'nearest',
-					inline: isStartPinned ? undefined : 'nearest',
-				});
-			}
-		});
-	});
-
-	// Scroll-into-view on focusEnd change. DOM work wrapped in `untrack` so
-	// reading layout properties never re-establishes a reactive dependency.
-	$effect(() => {
-		void tableContext.focusEnd;
-		void ref;
-		untrack(() => {
-			if (tableContext.focusEnd && ref) {
-				const { row, column: index } = tableContext.focusEnd;
-				const def = tableContext.columnDefs[index];
-				if (!def) {
-					return;
-				}
-				const cell = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${def.id}`
-				) as HTMLElement | undefined;
-
-				// Pinned cells are visually always on screen, but their true
-				// layout position is at their real column track — which for
-				// a right-pinned column in a wider-than-viewport table is
-				// offscreen. Calling `scrollIntoView({inline:'nearest'})`
-				// would then scroll the table sideways to surface the cell's
-				// underlying position, which the user sees as the table
-				// jumping when they click a pinned Actions button. The
-				// vertical (block) axis still scrolls normally because the
-				// row's vertical position is the user's real scroll target.
-				const isPinned =
-					cell?.classList.contains('pinned-left') ||
-					cell?.classList.contains('pinned-right');
-				cell?.scrollIntoView({
-					behavior: 'instant',
-					block: 'nearest',
-					inline: isPinned ? undefined : 'nearest',
-				});
-			}
-		});
-	});
-
-	/**
-	 * Routes a right-click into either a "focus the cell that was
-	 * clicked" path (if the click landed on a cell other than the
-	 * current focus) or a "show copy options" context menu (when the
-	 * Table is configured with `allowCopy` and the platform exposes the
-	 * Clipboard API).
-	 */
-	function openContextMenu(e: MouseEvent) {
-		e.stopPropagation();
-
-		if (
-			(e.target as HTMLElement).tagName === 'INPUT' ||
-			(e.target as HTMLElement).closest('.select-wrapper') != null
-		) {
-			return;
-		}
-
-		const clickedElement = document.activeElement?.id.split('-cell-')[1]?.split('-');
-
-		if (clickedElement) {
-			const [rowString, columnId] = clickedElement;
-			const row = parseInt(rowString);
-
-			if (
-				!tableContext.focusedColumnIds.has(columnId) ||
-				!tableContext.focusedRowIndices.has(row)
-			) {
-				const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
-
-				// Use `!= null` rather than a truthy check so a column at
-				// memory index 0 (the leftmost column) is not silently
-				// rejected. The previous truthy check broke right-click
-				// copy on the first column.
-				// `!= null` (not truthy) so an index of 0 (leftmost column) is
-				// not silently rejected.
-				if (columnIndex != null) {
-					tableContext.moveFocus({
-						column: columnIndex,
-						row,
-						id: columnId,
-					});
-				}
-			}
-		}
-
-		// `window.Clipboard` may be absent in non-HTTPS contexts.
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (tableContext.allowCopy && window.Clipboard) {
-			e.preventDefault();
-
-			const options: Array<IContextMenuOption> = [
-				{
-					callback: () => {
-						tableContext.copyDataToClipboard().catch(devCatch);
-					},
-					text: 'Copy Selection',
-				},
-			];
-
-			if (tableContext.hasHighlightedItems) {
-				options.push({
-					callback: () => {
-						tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
-					},
-					text: 'Copy Highlighted Rows',
-				});
-			}
-
-			_openContextMenu(e, options).catch(devCatch);
-		}
-	}
-
-	/**
-	 * Closes the quick-filter popup and the actions-cell popup whenever
-	 * the user clicks somewhere that is not inside either floating UI.
-	 */
-	function handleClickOutside(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (target.isConnected) {
-			// A click inside an open Svelecte dropdown (marked with
-			// `data-scoria-portal-dropdown` by `dropdownPortal.ts`) is a
-			// logical extension of the trigger inside the quick-filter
-			// popup, so it must not close either floating popover.
-			const insidePortalDropdown = target.closest('[data-scoria-portal-dropdown]') != null;
-			if (
-				!insidePortalDropdown &&
-				target.closest('div.floating') == null &&
-				target.closest('div.stick-right') == null
-			) {
-				openedQuickFilterSelect.value = null;
-			}
-
-			if (!insidePortalDropdown && target.closest('div.slot-wrapper') == null) {
-				tableContext.shownActionsPopup = undefined;
-			}
-		}
-	}
-
-	// nested table resizing
-	let isResizing = $state(false);
-	let remPxRatio = $state(0);
-	const minNestedHeight = $derived(20 * remPxRatio);
-
-	let nestedHeight = $state(0);
-	$effect.pre(() => {
-		if (!isResizing) {
-			nestedHeight = minNestedHeight;
-		}
-	});
-
-	let tableRef: HTMLDivElement | undefined = $state();
-	let mousedDownEmptySpace = $state(false);
-
-	onMount(() => {
-		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
-	});
-
-	$effect(() => {
-		if (!isResizing) {
-			return;
-		}
-		const onResize = (e: MouseEvent) => {
-			const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
-			nestedHeight = Math.max(sliderHeight, minNestedHeight);
-		};
-		window.addEventListener('mousemove', onResize);
-		return () => {
-			window.removeEventListener('mousemove', onResize);
-		};
-	});
-
-	function addOverrideResizeHandler() {
-		isResizing = true;
-	}
-
-	function removeOverrideResizeHandler() {
-		isResizing = false;
-	}
-
-	const usesLoading = $derived(
-		tableContext.paginationRepo &&
-			tableContext.paginationRepo.paginationType === PaginationType.Remote
-	);
-
-	const shouldUnfocusRemote = $derived(
-		usesLoading &&
-			tableContext.paginationRepo?.isLoading === false &&
-			tableContext.paginationRepo.paginationState.pageIndex !==
-				tableContext.paginationRepo.previouslyViewedPage
-	);
-
-	const shouldUnfocusLocal = $derived(
-		!usesLoading && tableContext.paginationRepo?.paginationState.pageIndex
-	);
-
-	$effect(() => {
-		if ((shouldUnfocusRemote || shouldUnfocusLocal) && unfocusRef) {
-			const el = unfocusRef;
-			untrack(() => {
-				tableContext.unfocus();
-				el.scrollTop = 0;
-			});
-		} else if (usesLoading && tableContext.paginationRepo?.isLoading === false) {
-			// refocus same element after a reload
-			// this does not break mutifocus
-			untrack(() => {
-				const fs = tableContext.focusStart;
-				if (!fs) {
-					return;
-				}
-				const idToFocusTo = `#${tableContext.tableName}-cell-${fs.row}-${fs.id}`;
-
-				tick()
-					.then(() => {
-						(document.querySelector(idToFocusTo) as HTMLElement | undefined)?.focus();
-					})
-					.catch(devCatch);
-			});
-		}
-	});
-
-	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
-	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
-	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
-
-	// CSS Grid template for the table.
-	//
-	// - First track is the 20px highlight column (always present).
-	// - For each other column, the track depends on its `userResized`
-	//   flag and its declared width/maxWidth:
-	//
-	//   userResized = true                            → `${width}px`
-	//   userResized = false, maxWidth set             → `minmax(width, maxWidth)`
-	//   userResized = false, widthIsFixed             → `${width}px`
-	//   userResized = false, on per-kind default      → `minmax(width, 1fr)`
-	//
-	// This produces "specify widths for the columns you care about; let
-	// the rest fill the gap", matching the legacy `<table>` behaviour.
-	// Pinned and centre columns use the same rule so pinning a column
-	// does not change its width. Sticky-cell offsets read from
-	// `_columnRenderedWidths` (populated by TableHead's ResizeObserver).
-	const colsTemplate = $derived.by(() => {
-		void tableContext.columnSizing;
-		const track = (col: {
-			columnDef: {
-				width: number;
-				maxWidth?: number;
-				userResized: boolean;
-				widthIsFixed: boolean;
-			};
-		}) => {
-			if (col.columnDef.userResized) {
-				return `${col.columnDef.width}px`;
-			}
-			if (col.columnDef.maxWidth != null) {
-				return `minmax(${col.columnDef.width}px, ${col.columnDef.maxWidth}px)`;
-			}
-			if (col.columnDef.widthIsFixed) {
-				return `${col.columnDef.width}px`;
-			}
-			return `minmax(${col.columnDef.width}px, 1fr)`;
-		};
-		const tracks: Array<string> = ['20px'];
-		for (const col of leftColumns) {
-			tracks.push(track(col));
-		}
-		for (const col of centreColumns) {
-			tracks.push(track(col));
-		}
-		for (const col of rightColumns) {
-			tracks.push(track(col));
-		}
-		return tracks.join(' ');
-	});
-
-	// Total rendered width of the pinned-left and pinned-right column
-	// stacks. Driven by `_columnRenderedWidths` so the values track actual
-	// layout rather than the declared `columnDef.width`. Exposed to CSS
-	// as `--pinned-left` / `--pinned-right`; the SCSS uses these in
-	// `scroll-padding-{left,right}` so `scrollIntoView` (called on keyboard
-	// nav and focus restore) keeps the focused cell out from behind the
-	// pinned columns. The 20px highlight column is always pinned-left.
-	const totalPinnedLeftWidth = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		let total = 20;
-		for (const col of leftColumns) {
-			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
-		}
-		return total;
-	});
-	const totalPinnedRightWidth = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		let total = 0;
-		for (const col of rightColumns) {
-			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
-		}
-		return total;
-	});
-
-	// Single scroll listener for the shared scroll container, which is
-	// also the host the row virtualiser registers against. The same
-	// handler updates `hasScrolledPastHeader` / `hasContentBelowFooter`,
-	// which drive the sticky-row drop shadows — shadows appear only when
-	// there is actually content scrolled under the sticky strip.
-	let hasScrolledPastHeader = $state(false);
-	let hasContentBelowFooter = $state(false);
-
-	// Measured rendered height of the sticky strip at the top of
-	// `.datatable` (header row + quick-filter row when active). Drives
-	// `scroll-padding-top` via `--sticky-top-height`, so `scrollIntoView`
-	// (keyboard nav, focus restore) parks the focused cell below the
-	// actual strip — a static `calc(var(--height) + Npx)` left a 1-2px
-	// gap from sub-pixel rounding and borders, clipping the body row.
-	let stickyTopHeight: number = $state(0);
-
-	function recomputeScrollShadows(): void {
-		if (!tableRef) {
-			hasScrolledPastHeader = false;
-			hasContentBelowFooter = false;
-			return;
-		}
-		// `.datatable` has `overflow-x: auto`. Per the CSS spec, when one
-		// overflow axis is non-visible the other axis becomes auto too,
-		// so `.datatable` is itself the vertical scroll container when
-		// the table is constrained inside a fixed-height parent (the
-		// typical app shell). Detect internal scroll directly.
-		const internalScrolledPast = tableRef.scrollTop > 0;
-		const internalContentBelow =
-			tableRef.scrollTop + tableRef.clientHeight < tableRef.scrollHeight - 1;
-		// Fall back to window-relative checks when the table is not
-		// constrained and the page itself is the scroll container.
-		const rect = tableRef.getBoundingClientRect();
-		const windowScrolledPast = rect.top < 0;
-		const windowContentBelow = rect.bottom > window.innerHeight;
-		hasScrolledPastHeader = internalScrolledPast || windowScrolledPast;
-		hasContentBelowFooter = internalContentBelow || windowContentBelow;
-	}
-
-	$effect(() => {
-		void tableRef;
-		void unfocusRef;
-		const handler = (e: Event): void => {
-			const el = e.currentTarget as HTMLElement | null;
-			if (!el) {
-				return;
-			}
-			tableContext._virtualisation.registerScrollPosition(el.scrollTop, el.clientHeight);
-			// Refresh shadow flags on every internal scroll: when the table
-			// is the scroll container, body scroll never reaches the window
-			// listener and the shadow flags would otherwise never flip.
-			recomputeScrollShadows();
-		};
-		const elements: Array<HTMLElement> = [];
-		if (tableRef) {
-			elements.push(tableRef);
-		}
-		if (unfocusRef && unfocusRef !== tableRef) {
-			elements.push(unfocusRef);
-		}
-		for (const el of elements) {
-			el.addEventListener('scroll', handler, { passive: true });
-		}
-		const primary = tableRef ?? unfocusRef;
-		if (primary) {
-			tableContext._virtualisation.registerScrollPosition(primary.scrollTop, primary.clientHeight);
-		}
-
-		// Window scroll + resize cover the unconstrained case where the
-		// page itself scrolls; `recomputeScrollShadows` handles both.
-		const onWindow = (): void => {
-			recomputeScrollShadows();
-		};
-		window.addEventListener('scroll', onWindow, { passive: true });
-		window.addEventListener('resize', onWindow, { passive: true });
-
-		// Content-height changes (row add/remove, pagination, expand
-		// toggled) can flip the shadow flags without any user scroll, so
-		// re-evaluate on any intrinsic-height change of the table.
-		const ro =
-			typeof ResizeObserver === 'undefined'
-				? null
-				: new ResizeObserver(() => {
-						recomputeScrollShadows();
-					});
-		if (ro && tableRef) {
-			ro.observe(tableRef);
-		}
-
-		// Measure the actual rendered height of the sticky strip (header +
-		// quick-filter row when active) so `scroll-padding-top` matches
-		// it to the pixel.
-		const measureStickyTop = (): void => {
-			if (!tableRef) {
-				return;
-			}
-			const headerRow = tableRef.querySelector('.datatable-row.header-row') as HTMLElement | null;
-			const filterRow = tableRef.querySelector(
-				'.datatable-row.quick-filter-row'
-			) as HTMLElement | null;
-			stickyTopHeight = (headerRow?.offsetHeight ?? 0) + (filterRow?.offsetHeight ?? 0);
-		};
-		const stickyRo =
-			typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measureStickyTop);
-		if (stickyRo && tableRef) {
-			// Observe the scroll host so any change inside (mode
-			// toggle, rows added, etc.) re-measures on the next frame.
-			stickyRo.observe(tableRef);
-		}
-		// Initial measurement so the very first focus / arrow-key
-		// navigation lands below the strip without waiting for the
-		// observer's first frame.
-		measureStickyTop();
-
-		recomputeScrollShadows();
-
-		return () => {
-			for (const el of elements) {
-				el.removeEventListener('scroll', handler);
-			}
-			window.removeEventListener('scroll', onWindow);
-			window.removeEventListener('resize', onWindow);
-			ro?.disconnect();
-			stickyRo?.disconnect();
-		};
-	});
-</script>
-
-<svelte:window
-	onmouseup={(e: MouseEvent) => {
-		if (
-			// if it's not a click on an item in the context menu
-			!(e.target as HTMLElement | undefined)?.classList.contains('context-menu-item') &&
-			// if it's outside the table or inside the empty space of the table
-			(e.target === unfocusRef ||
-				((e.target as HTMLElement | undefined)?.closest('.table-wrapper') == null &&
-					mousedDownEmptySpace))
-		) {
-			tableContext.unfocus();
-		}
-		mousedDownEmptySpace = false;
-
-		if (tableContext.isMousingDown) {
-			tableContext.isMousingDown = false;
-		}
-
-		removeOverrideResizeHandler();
-	}}
-	onclick={(e: MouseEvent) => {
-		handleClickOutside(e);
-	}}
-	onmousedown={(e: MouseEvent) => {
-		mousedDownEmptySpace =
-			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
-	}}
-/>
-
-<div
-	class="grid"
-	class:nested
-	style="--show-top-shadow: {hasScrolledPastHeader
-		? 1
-		: 0}; --show-bottom-shadow: {hasContentBelowFooter ? 1 : 0};"
->
-	{#if tableContext.dataRepo.isLoading}
-		<LoadingOverlay
-			absolute
-			borderRadius={cssLength('4px')}
-			message={tableContext.dataRepo.loadingMessage}
-		/>
-	{/if}
-
-	<div
-		class="horizontal-bar"
-		class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
-			<TableHorizontalBar />
-		{/if}
-	</div>
-
-	<div
-		class="sidebar-wrapper sidebar-wrapper-left"
-		class:nested
-		style="--nested-height: {nestedHeight}px;"
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Left}
-			<div class="sidebar toolbar-left">
-				<TableSidebar />
-			</div>
-		{/if}
-	</div>
-	<div
-		class="sidebar-wrapper sidebar-wrapper-right"
-		class:nested
-		style="--nested-height: {nestedHeight}px;"
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Right}
-			<div class="sidebar toolbar-right">
-				<TableSidebar />
-			</div>
-		{/if}
-	</div>
-
-	<div class="footer">
-		{#if tableContext.displayFooter}
-			<TableFooter />
-		{/if}
-	</div>
-
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		bind:this={tableRef}
-		class="datatable"
-		class:nested
-		class:compact={tableContext.isCompact}
-		class:quick-filtering={tableContext.showQuickFiltering}
-		onkeydown={tableContext.handleTdKeydown}
-		style="--pinned-left: {totalPinnedLeftWidth}px; --pinned-right: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
-	>
-		<div
-			class="flex_table"
-			bind:this={ref}
-			class:nested
-		>
-			<div
-				bind:this={unfocusRef}
-				class="table-wrapper"
-				oncontextmenu={openContextMenu}
-			>
-				<div
-					role="table"
-					class="datatable-grid"
-					style="--cols: {colsTemplate};"
-				>
-					<TableHead />
-					<TableBody />
-				</div>
-			</div>
-		</div>
-
-		{#if nested}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class:isResizing
-				class="resizer"
-				onmousedown={(e) => {
-					e.preventDefault();
-					addOverrideResizeHandler();
-				}}
-			></div>
-		{/if}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import {
+		ContextMenuContext,
+		type IContextMenuOption,
+	} from '../../Contexts/ContextMenuContext.svelte';
+	import { cssLength, devCatch, refWrapper } from '../../Helpers/Helpers.svelte';
+	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
+	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import TableBody from './Body/TableBody.svelte';
+	import TableHead from './Headers/TableHead.svelte';
+	import TableFooter from './Misc/TableFooter.svelte';
+	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
+	import TableSidebar from './Misc/TableSidebar.svelte';
+	import { TableContext } from './Types/Context/TableContext.svelte';
+	import type { Primitive } from './Types/Context/TableInitOptions.js';
+	import { PaginationType } from './Types/Pagination/PaginationType.js';
+	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
+
+	declare global {
+		interface HTMLElementEventMap {
+			edit: CustomEvent<{
+				selectAll: boolean;
+			}>;
+		}
+	}
+
+	/**
+	 * Top-level orchestrator props. Accepts either:
+	 *
+	 * - `table`: the structured `Table` instance returned by `createTable(...)`.
+	 *   This is the consumer-facing form.
+	 * - `tableContext`: the underlying `TableContext`. Used internally by
+	 *   `NestedTable` which constructs a context directly for each
+	 *   expansion. Not intended for consumer use.
+	 *
+	 * Exactly one of the two must be supplied; a runtime guard inside the
+	 * component throws if both are missing. The reference passed in is
+	 * captured at mount via `setContext` and should not be reassigned
+	 * afterwards.
+	 */
+	export interface TableProps<T extends object, IdType extends Primitive> {
+		readonly table?: { readonly _context: TableContext<T, IdType> };
+		readonly tableContext?: TableContext<T, IdType>;
+		nested?: boolean;
+	}
+
+	/**
+	 * Symbol used to share the currently-open quick-filter select across
+	 * every header in a single Table tree. Stored via `setContext` on
+	 * the same component that hosts the Table tree so multiple
+	 * independent tables on a page each own their own popup state.
+	 */
+	export const quickFilterContextIdentifier: symbol = Symbol();
+
+	const openedQuickFilterSelect = refWrapper<symbol | null>(null);
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,IdType extends Primitive"
+>
+	const { nested = false, table, tableContext: tableContextProp }: TableProps<T, IdType> = $props();
+
+	// Resolve the underlying TableContext from whichever prop was passed:
+	// consumers pass `table`; internal `NestedTable` passes `tableContext`
+	// directly. Exactly one must be present — throw cleanly here rather
+	// than letting it surface as a downstream null-deref.
+	const tableContext: TableContext<T, IdType> = (() => {
+		const ctx = table?._context ?? tableContextProp;
+		if (!ctx) {
+			throw new Error(
+				'scoria: <Table /> requires either a `table` prop (the structured instance returned by createTable) or a `tableContext` prop (used internally by NestedTable).'
+			);
+		}
+		return ctx;
+	})();
+
+	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
+	setContext(TableContext.identifier, tableContext);
+
+	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
+		ContextMenuContext.identifier
+	);
+
+	let ref: HTMLDivElement | undefined = $state();
+	let unfocusRef: HTMLDivElement | undefined = $state();
+
+	setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
+
+	// Focus-restore on focusStart change. The DOM work runs inside `untrack`
+	// so a future selector tweak that reads reactive state (e.g.
+	// `document.activeElement`) does not retrigger on every focus change.
+	$effect(() => {
+		void tableContext.focusStart;
+		void ref;
+		untrack(() => {
+			if (tableContext.focusStart && ref) {
+				const { row, column: index } = tableContext.focusStart;
+				// `columnDefs[index]` can be undefined when the focus
+				// coordinate references a slot that no longer exists
+				// (e.g. an inner expand table remounted with a different
+				// column count, or a preset hydration raced column init).
+				// Guard so out-of-range degrades to "no focus restored".
+				const def = tableContext.columnDefs[index];
+				if (!def) {
+					return;
+				}
+				let element = ref.querySelector(
+					`#${tableContext.tableName}-cell-${row}-${def.id}`
+				) as HTMLElement | undefined;
+
+				if (element?.tabIndex == -1) {
+					const td = element;
+					element = td.querySelector('button') as HTMLElement | undefined;
+					if (!element) {
+						element = td.querySelector('input') as HTMLElement | undefined;
+					}
+				}
+
+				element?.focus({ preventScroll: true });
+				// Skip horizontal scroll-into-view for pinned cells (see the
+				// focusEnd effect for the rationale).
+				const startCell = element?.closest('[role="cell"]');
+				const isStartPinned =
+					startCell?.classList.contains('pinned-left') ||
+					startCell?.classList.contains('pinned-right');
+				element?.scrollIntoView({
+					behavior: 'instant',
+					block: 'nearest',
+					inline: isStartPinned ? undefined : 'nearest',
+				});
+			}
+		});
+	});
+
+	// Scroll-into-view on focusEnd change. DOM work wrapped in `untrack` so
+	// reading layout properties never re-establishes a reactive dependency.
+	$effect(() => {
+		void tableContext.focusEnd;
+		void ref;
+		untrack(() => {
+			if (tableContext.focusEnd && ref) {
+				const { row, column: index } = tableContext.focusEnd;
+				const def = tableContext.columnDefs[index];
+				if (!def) {
+					return;
+				}
+				const cell = ref.querySelector(
+					`#${tableContext.tableName}-cell-${row}-${def.id}`
+				) as HTMLElement | undefined;
+
+				// Pinned cells are visually always on screen, but their true
+				// layout position is at their real column track — which for
+				// a right-pinned column in a wider-than-viewport table is
+				// offscreen. Calling `scrollIntoView({inline:'nearest'})`
+				// would then scroll the table sideways to surface the cell's
+				// underlying position, which the user sees as the table
+				// jumping when they click a pinned Actions button. The
+				// vertical (block) axis still scrolls normally because the
+				// row's vertical position is the user's real scroll target.
+				const isPinned =
+					cell?.classList.contains('pinned-left') ||
+					cell?.classList.contains('pinned-right');
+				cell?.scrollIntoView({
+					behavior: 'instant',
+					block: 'nearest',
+					inline: isPinned ? undefined : 'nearest',
+				});
+			}
+		});
+	});
+
+	/**
+	 * Routes a right-click into either a "focus the cell that was
+	 * clicked" path (if the click landed on a cell other than the
+	 * current focus) or a "show copy options" context menu (when the
+	 * Table is configured with `allowCopy` and the platform exposes the
+	 * Clipboard API).
+	 */
+	function openContextMenu(e: MouseEvent) {
+		e.stopPropagation();
+
+		if (
+			(e.target as HTMLElement).tagName === 'INPUT' ||
+			(e.target as HTMLElement).closest('.select-wrapper') != null
+		) {
+			return;
+		}
+
+		const clickedElement = document.activeElement?.id.split('-cell-')[1]?.split('-');
+
+		if (clickedElement) {
+			const [rowString, columnId] = clickedElement;
+			const row = parseInt(rowString);
+
+			if (
+				!tableContext.focusedColumnIds.has(columnId) ||
+				!tableContext.focusedRowIndices.has(row)
+			) {
+				const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
+
+				// Use `!= null` rather than a truthy check so a column at
+				// memory index 0 (the leftmost column) is not silently
+				// rejected. The previous truthy check broke right-click
+				// copy on the first column.
+				// `!= null` (not truthy) so an index of 0 (leftmost column) is
+				// not silently rejected.
+				if (columnIndex != null) {
+					tableContext.moveFocus({
+						column: columnIndex,
+						row,
+						id: columnId,
+					});
+				}
+			}
+		}
+
+		// `window.Clipboard` may be absent in non-HTTPS contexts.
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (tableContext.allowCopy && window.Clipboard) {
+			e.preventDefault();
+
+			const options: Array<IContextMenuOption> = [
+				{
+					callback: () => {
+						tableContext.copyDataToClipboard().catch(devCatch);
+					},
+					text: 'Copy Selection',
+				},
+			];
+
+			if (tableContext.hasHighlightedItems) {
+				options.push({
+					callback: () => {
+						tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
+					},
+					text: 'Copy Highlighted Rows',
+				});
+			}
+
+			_openContextMenu(e, options).catch(devCatch);
+		}
+	}
+
+	/**
+	 * Closes the quick-filter popup and the actions-cell popup whenever
+	 * the user clicks somewhere that is not inside either floating UI.
+	 */
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.isConnected) {
+			// A click inside an open Svelecte dropdown (marked with
+			// `data-scoria-portal-dropdown` by `dropdownPortal.ts`) is a
+			// logical extension of the trigger inside the quick-filter
+			// popup, so it must not close either floating popover.
+			const insidePortalDropdown = target.closest('[data-scoria-portal-dropdown]') != null;
+			if (
+				!insidePortalDropdown &&
+				target.closest('div.floating') == null &&
+				target.closest('div.stick-right') == null
+			) {
+				openedQuickFilterSelect.value = null;
+			}
+
+			if (!insidePortalDropdown && target.closest('div.slot-wrapper') == null) {
+				tableContext.shownActionsPopup = undefined;
+			}
+		}
+	}
+
+	// nested table resizing
+	let isResizing = $state(false);
+	let remPxRatio = $state(0);
+	const minNestedHeight = $derived(20 * remPxRatio);
+
+	let nestedHeight = $state(0);
+	$effect.pre(() => {
+		if (!isResizing) {
+			nestedHeight = minNestedHeight;
+		}
+	});
+
+	let tableRef: HTMLDivElement | undefined = $state();
+	let mousedDownEmptySpace = $state(false);
+
+	onMount(() => {
+		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
+	});
+
+	$effect(() => {
+		if (!isResizing) {
+			return;
+		}
+		const onResize = (e: MouseEvent) => {
+			const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
+			nestedHeight = Math.max(sliderHeight, minNestedHeight);
+		};
+		window.addEventListener('mousemove', onResize);
+		return () => {
+			window.removeEventListener('mousemove', onResize);
+		};
+	});
+
+	function addOverrideResizeHandler() {
+		isResizing = true;
+	}
+
+	function removeOverrideResizeHandler() {
+		isResizing = false;
+	}
+
+	const usesLoading = $derived(
+		tableContext.paginationRepo &&
+			tableContext.paginationRepo.paginationType === PaginationType.Remote
+	);
+
+	const shouldUnfocusRemote = $derived(
+		usesLoading &&
+			tableContext.paginationRepo?.isLoading === false &&
+			tableContext.paginationRepo.paginationState.pageIndex !==
+				tableContext.paginationRepo.previouslyViewedPage
+	);
+
+	const shouldUnfocusLocal = $derived(
+		!usesLoading && tableContext.paginationRepo?.paginationState.pageIndex
+	);
+
+	$effect(() => {
+		if ((shouldUnfocusRemote || shouldUnfocusLocal) && unfocusRef) {
+			const el = unfocusRef;
+			untrack(() => {
+				tableContext.unfocus();
+				el.scrollTop = 0;
+			});
+		} else if (usesLoading && tableContext.paginationRepo?.isLoading === false) {
+			// refocus same element after a reload
+			// this does not break mutifocus
+			untrack(() => {
+				const fs = tableContext.focusStart;
+				if (!fs) {
+					return;
+				}
+				const idToFocusTo = `#${tableContext.tableName}-cell-${fs.row}-${fs.id}`;
+
+				tick()
+					.then(() => {
+						(document.querySelector(idToFocusTo) as HTMLElement | undefined)?.focus();
+					})
+					.catch(devCatch);
+			});
+		}
+	});
+
+	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
+	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
+	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
+
+	// CSS Grid template for the table.
+	//
+	// - First track is the 20px highlight column (always present).
+	// - For each other column, the track depends on its `userResized`
+	//   flag and its declared width/maxWidth:
+	//
+	//   userResized = true                            → `${width}px`
+	//   userResized = false, maxWidth set             → `minmax(width, maxWidth)`
+	//   userResized = false, widthIsFixed             → `${width}px`
+	//   userResized = false, on per-kind default      → `minmax(width, 1fr)`
+	//
+	// This produces "specify widths for the columns you care about; let
+	// the rest fill the gap", matching the legacy `<table>` behaviour.
+	// Pinned and centre columns use the same rule so pinning a column
+	// does not change its width. Sticky-cell offsets read from
+	// `_columnRenderedWidths` (populated by TableHead's ResizeObserver).
+	const colsTemplate = $derived.by(() => {
+		void tableContext.columnSizing;
+		const track = (col: {
+			columnDef: {
+				width: number;
+				maxWidth?: number;
+				userResized: boolean;
+				widthIsFixed: boolean;
+			};
+		}) => {
+			if (col.columnDef.userResized) {
+				return `${col.columnDef.width}px`;
+			}
+			if (col.columnDef.maxWidth != null) {
+				return `minmax(${col.columnDef.width}px, ${col.columnDef.maxWidth}px)`;
+			}
+			if (col.columnDef.widthIsFixed) {
+				return `${col.columnDef.width}px`;
+			}
+			return `minmax(${col.columnDef.width}px, 1fr)`;
+		};
+		const tracks: Array<string> = ['20px'];
+		for (const col of leftColumns) {
+			tracks.push(track(col));
+		}
+		for (const col of centreColumns) {
+			tracks.push(track(col));
+		}
+		for (const col of rightColumns) {
+			tracks.push(track(col));
+		}
+		return tracks.join(' ');
+	});
+
+	// Total rendered width of the pinned-left and pinned-right column
+	// stacks. Driven by `_columnRenderedWidths` so the values track actual
+	// layout rather than the declared `columnDef.width`. Exposed to CSS
+	// as `--pinned-left` / `--pinned-right`; the SCSS uses these in
+	// `scroll-padding-{left,right}` so `scrollIntoView` (called on keyboard
+	// nav and focus restore) keeps the focused cell out from behind the
+	// pinned columns. The 20px highlight column is always pinned-left.
+	const totalPinnedLeftWidth = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		let total = 20;
+		for (const col of leftColumns) {
+			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+		}
+		return total;
+	});
+	const totalPinnedRightWidth = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		let total = 0;
+		for (const col of rightColumns) {
+			total += tableContext._columnRenderedWidths.get(col.id) ?? col.columnDef.width;
+		}
+		return total;
+	});
+
+	// Single scroll listener for the shared scroll container, which is
+	// also the host the row virtualiser registers against. The same
+	// handler updates `hasScrolledPastHeader` / `hasContentBelowFooter`,
+	// which drive the sticky-row drop shadows — shadows appear only when
+	// there is actually content scrolled under the sticky strip.
+	let hasScrolledPastHeader = $state(false);
+	let hasContentBelowFooter = $state(false);
+
+	// Measured rendered height of the sticky strip at the top of
+	// `.datatable` (header row + quick-filter row when active). Drives
+	// `scroll-padding-top` via `--sticky-top-height`, so `scrollIntoView`
+	// (keyboard nav, focus restore) parks the focused cell below the
+	// actual strip — a static `calc(var(--height) + Npx)` left a 1-2px
+	// gap from sub-pixel rounding and borders, clipping the body row.
+	let stickyTopHeight: number = $state(0);
+
+	function recomputeScrollShadows(): void {
+		if (!tableRef) {
+			hasScrolledPastHeader = false;
+			hasContentBelowFooter = false;
+			return;
+		}
+		// `.datatable` has `overflow-x: auto`. Per the CSS spec, when one
+		// overflow axis is non-visible the other axis becomes auto too,
+		// so `.datatable` is itself the vertical scroll container when
+		// the table is constrained inside a fixed-height parent (the
+		// typical app shell). Detect internal scroll directly.
+		const internalScrolledPast = tableRef.scrollTop > 0;
+		const internalContentBelow =
+			tableRef.scrollTop + tableRef.clientHeight < tableRef.scrollHeight - 1;
+		// Fall back to window-relative checks when the table is not
+		// constrained and the page itself is the scroll container.
+		const rect = tableRef.getBoundingClientRect();
+		const windowScrolledPast = rect.top < 0;
+		const windowContentBelow = rect.bottom > window.innerHeight;
+		hasScrolledPastHeader = internalScrolledPast || windowScrolledPast;
+		hasContentBelowFooter = internalContentBelow || windowContentBelow;
+	}
+
+	$effect(() => {
+		void tableRef;
+		void unfocusRef;
+		const handler = (e: Event): void => {
+			const el = e.currentTarget as HTMLElement | null;
+			if (!el) {
+				return;
+			}
+			tableContext._virtualisation.registerScrollPosition(el.scrollTop, el.clientHeight);
+			// Refresh shadow flags on every internal scroll: when the table
+			// is the scroll container, body scroll never reaches the window
+			// listener and the shadow flags would otherwise never flip.
+			recomputeScrollShadows();
+		};
+		const elements: Array<HTMLElement> = [];
+		if (tableRef) {
+			elements.push(tableRef);
+		}
+		if (unfocusRef && unfocusRef !== tableRef) {
+			elements.push(unfocusRef);
+		}
+		for (const el of elements) {
+			el.addEventListener('scroll', handler, { passive: true });
+		}
+		const primary = tableRef ?? unfocusRef;
+		if (primary) {
+			tableContext._virtualisation.registerScrollPosition(primary.scrollTop, primary.clientHeight);
+		}
+
+		// Window scroll + resize cover the unconstrained case where the
+		// page itself scrolls; `recomputeScrollShadows` handles both.
+		const onWindow = (): void => {
+			recomputeScrollShadows();
+		};
+		window.addEventListener('scroll', onWindow, { passive: true });
+		window.addEventListener('resize', onWindow, { passive: true });
+
+		// Content-height changes (row add/remove, pagination, expand
+		// toggled) can flip the shadow flags without any user scroll, so
+		// re-evaluate on any intrinsic-height change of the table.
+		const ro =
+			typeof ResizeObserver === 'undefined'
+				? null
+				: new ResizeObserver(() => {
+						recomputeScrollShadows();
+					});
+		if (ro && tableRef) {
+			ro.observe(tableRef);
+		}
+
+		// Measure the actual rendered height of the sticky strip (header +
+		// quick-filter row when active) so `scroll-padding-top` matches
+		// it to the pixel.
+		const measureStickyTop = (): void => {
+			if (!tableRef) {
+				return;
+			}
+			const headerRow = tableRef.querySelector('.datatable-row.header-row') as HTMLElement | null;
+			const filterRow = tableRef.querySelector(
+				'.datatable-row.quick-filter-row'
+			) as HTMLElement | null;
+			stickyTopHeight = (headerRow?.offsetHeight ?? 0) + (filterRow?.offsetHeight ?? 0);
+		};
+		const stickyRo =
+			typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measureStickyTop);
+		if (stickyRo && tableRef) {
+			// Observe the scroll host so any change inside (mode
+			// toggle, rows added, etc.) re-measures on the next frame.
+			stickyRo.observe(tableRef);
+		}
+		// Initial measurement so the very first focus / arrow-key
+		// navigation lands below the strip without waiting for the
+		// observer's first frame.
+		measureStickyTop();
+
+		recomputeScrollShadows();
+
+		return () => {
+			for (const el of elements) {
+				el.removeEventListener('scroll', handler);
+			}
+			window.removeEventListener('scroll', onWindow);
+			window.removeEventListener('resize', onWindow);
+			ro?.disconnect();
+			stickyRo?.disconnect();
+		};
+	});
+</script>
+
+<svelte:window
+	onmouseup={(e: MouseEvent) => {
+		if (
+			// if it's not a click on an item in the context menu
+			!(e.target as HTMLElement | undefined)?.classList.contains('context-menu-item') &&
+			// if it's outside the table or inside the empty space of the table
+			(e.target === unfocusRef ||
+				((e.target as HTMLElement | undefined)?.closest('.table-wrapper') == null &&
+					mousedDownEmptySpace))
+		) {
+			tableContext.unfocus();
+		}
+		mousedDownEmptySpace = false;
+
+		if (tableContext.isMousingDown) {
+			tableContext.isMousingDown = false;
+		}
+
+		removeOverrideResizeHandler();
+	}}
+	onclick={(e: MouseEvent) => {
+		handleClickOutside(e);
+	}}
+	onmousedown={(e: MouseEvent) => {
+		mousedDownEmptySpace =
+			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
+	}}
+/>
+
+<div
+	class="grid"
+	class:nested
+	style="--show-top-shadow: {hasScrolledPastHeader
+		? 1
+		: 0}; --show-bottom-shadow: {hasContentBelowFooter ? 1 : 0};"
+>
+	{#if tableContext.dataRepo.isLoading}
+		<LoadingOverlay
+			absolute
+			borderRadius={cssLength('4px')}
+			message={tableContext.dataRepo.loadingMessage}
+		/>
+	{/if}
+
+	<div
+		class="horizontal-bar"
+		class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
+			<TableHorizontalBar />
+		{/if}
+	</div>
+
+	<div
+		class="sidebar-wrapper sidebar-wrapper-left"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Left}
+			<div class="sidebar toolbar-left">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+	<div
+		class="sidebar-wrapper sidebar-wrapper-right"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Right}
+			<div class="sidebar toolbar-right">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+
+	<div class="footer">
+		{#if tableContext.displayFooter}
+			<TableFooter />
+		{/if}
+	</div>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={tableRef}
+		class="datatable"
+		class:nested
+		class:compact={tableContext.isCompact}
+		class:quick-filtering={tableContext.showQuickFiltering}
+		onkeydown={tableContext.handleTdKeydown}
+		style="--pinned-left: {totalPinnedLeftWidth}px; --pinned-right: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
+	>
+		<div
+			class="flex_table"
+			bind:this={ref}
+			class:nested
+		>
+			<div
+				bind:this={unfocusRef}
+				class="table-wrapper"
+				oncontextmenu={openContextMenu}
+			>
+				<div
+					role="table"
+					class="datatable-grid"
+					style="--cols: {colsTemplate};"
+				>
+					<TableHead />
+					<TableBody />
+				</div>
+			</div>
+		</div>
+
+		{#if nested}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class:isResizing
+				class="resizer"
+				onmousedown={(e) => {
+					e.preventDefault();
+					addOverrideResizeHandler();
+				}}
+			></div>
+		{/if}
+	</div>
+</div>
+
 <style>div.grid {
   border-radius: 4px;
   display: grid;
@@ -840,4 +840,4 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   text-align: left;
   min-width: max-content;
   isolation: isolate;
-}</style>
+}</style>