@fuzdev/fuz_ui 0.200.0 → 0.202.0

package/README.md

@@ -1,4 +1,4 @@
-# Fuz
+# fuz_ui
 
 [<img src="static/logo.svg" alt="a friendly brown spider facing you" align="right" width="192" height="192">](https://ui.fuz.dev/)
 
@@ -6,7 +6,7 @@
 
 fuz_ui is a Svelte UI library with components and helpers for making zippy
 websites. It's built on [fuz_css](https://css.fuz.dev/)
-and provides includes a documentation system built on
+and provides a documentation system built on
 [svelte-docinfo](https://svelte-docinfo.fuz.dev/).
 It's in early alpha with breaking changes ahead.
 

package/dist/ApiDeclarationList.svelte

@@ -24,9 +24,9 @@
 {:else}
 	{#each declarations as declaration (`${declaration.module_path}:${declaration.name}`)}
 		<TomeSection>
-			<!-- `text` drives the slug/anchor (bare name); display shows generics via `display_name` -->
+			<!-- Show the bare name; generic parameters are documented in the detail below (generics/type signature). -->
 			<TomeSectionHeader text={declaration.name}>
-				<div class="word-break:break-all">{declaration.display_name}</div>
+				<div class="word-break:break-all">{declaration.name}</div>
 			</TomeSectionHeader>
 			<article id={declaration.name}>
 				<DeclarationDetail {declaration} />

package/dist/CopyToClipboard.svelte

@@ -4,6 +4,9 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 	import {scale, slide} from 'svelte/transition';
 
+	import {icon_checkmark, icon_copy} from './icons.js';
+	import Svg from './Svg.svelte';
+
 	// TODO @many should this have the Button suffix?
 
 	// TODO add docs entry, see also PasteFromClipboard.svelte
@@ -73,8 +76,8 @@
 	{#if children}
 		{@render children(copied, failed)}
 	{:else if copied}
-		<div in:scale={{duration: 200}}>✓</div>
+		<div in:scale={{duration: 200}}><Svg data={icon_checkmark} /></div>
 	{:else}
-		<div in:slide>⧉</div>
+		<div in:slide><Svg data={icon_copy} /></div>
 	{/if}
 </button>

package/dist/CopyToClipboard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/CopyToClipboard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGvD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACvD,CAAC;AA+DH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CopyToClipboard.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/CopyToClipboard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAMvD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACvD,CAAC;AAkEH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/DeclarationDetail.svelte

@@ -62,6 +62,16 @@ including parameters, props, members, overloads, intersects, and more.
 	</section>
 {/snippet}
 
+<!-- A compact parameter row: name (with optional marker) and type, for snippet params and overloads. -->
+{#snippet param_row(param: ParameterJsonInput)}
+	<div class="row gap_md">
+		<code
+			>{param.name}{#if param.optional}?{/if}</code
+		>
+		<TypeLink type={param.type} />
+	</div>
+{/snippet}
+
 <!-- Compact prose metadata for props and members (deprecated, since, examples, see also, throws). -->
 {#snippet doc_extras(item: DocExtras)}
 	<!-- eslint-disable-next-line @typescript-eslint/no-deprecated -->
@@ -104,6 +114,12 @@ including parameters, props, members, overloads, intersects, and more.
 	{/if}
 {/snippet}
 
+<!-- A comma-separated inline list of type links (extends, implements, intersects are rarely more than one). -->
+{#snippet type_list(types: Array<string>)}
+	{#each types as type, i (type)}{#if i > 0},
+		{/if}<TypeLink {type} />{/each}
+{/snippet}
+
 <!-- Metadata -->
 <p class="row justify-content:space-between">
 	<ModuleLink module_path={declaration.module_path} />
@@ -211,12 +227,7 @@ including parameters, props, members, overloads, intersects, and more.
 					<section>
 						<h5>snippet parameters</h5>
 						{#each prop.parameters as param (param)}
-							<div class="row gap_md">
-								<code
-									>{param.name}{#if param.optional}?{/if}</code
-								>
-								<TypeLink type={param.type} />
-							</div>
+							{@render param_row(param)}
 						{/each}
 					</section>
 				{/if}
@@ -238,12 +249,7 @@ including parameters, props, members, overloads, intersects, and more.
 				{/if}
 				{#if overload.parameters?.length}
 					{#each overload.parameters as param (param)}
-						<div class="row gap_md">
-							<code
-								>{param.name}{#if param.optional}?{/if}</code
-							>
-							<TypeLink type={param.type} />
-						</div>
+						{@render param_row(param)}
 					{/each}
 				{/if}
 				{#if overload.returnType}
@@ -264,11 +270,9 @@ including parameters, props, members, overloads, intersects, and more.
 {#if declaration.intersects?.length}
 	<section>
 		<h4>intersects</h4>
-		<ul>
-			{#each declaration.intersects as type (type)}
-				<li><TypeLink {type} /></li>
-			{/each}
-		</ul>
+		<div class="row gap_md flex-wrap:wrap">
+			{@render type_list(declaration.intersects)}
+		</div>
 	</section>
 {/if}
 
@@ -286,10 +290,13 @@ including parameters, props, members, overloads, intersects, and more.
 <!-- generics -->
 {#if declaration.generic_params.length}
 	<section>
-		<h4>generics</h4>
+		<div class="row gap_md">
+			<h4>generics</h4>
+			<TypeLink type={declaration.display_name} />
+		</div>
 		{#each declaration.generic_params as generic (generic)}
 			<section>
-				<h4><code>{generic.name}</code></h4>
+				<h5><code>{generic.name}</code></h5>
 				{#if generic.constraint}
 					<div class="row gap_md">
 						<strong>constraint</strong>
@@ -312,27 +319,19 @@ including parameters, props, members, overloads, intersects, and more.
 	<section>
 		<h4>inheritance</h4>
 		{#if declaration.extends_type}
-			<div>
+			<div class="row gap_md flex-wrap:wrap">
 				<strong>extends:</strong>
-				{#if Array.isArray(declaration.extends_type)}
-					<ul>
-						{#each declaration.extends_type as ext (ext)}
-							<li><TypeLink type={ext} /></li>
-						{/each}
-					</ul>
-				{:else}
-					<TypeLink type={declaration.extends_type} />
-				{/if}
+				{@render type_list(
+					Array.isArray(declaration.extends_type)
+						? declaration.extends_type
+						: [declaration.extends_type],
+				)}
 			</div>
 		{/if}
 		{#if declaration.implements_types?.length}
-			<div>
+			<div class="row gap_md flex-wrap:wrap">
 				<strong>implements:</strong>
-				<ul>
-					{#each declaration.implements_types as impl (impl)}
-						<li><TypeLink type={impl} /></li>
-					{/each}
-				</ul>
+				{@render type_list(declaration.implements_types)}
 			</div>
 		{/if}
 	</section>
@@ -465,3 +464,9 @@ including parameters, props, members, overloads, intersects, and more.
 		{/each}
 	</section>
 {/if}
+
+<style>
+	section section:not(:last-child) {
+		margin-bottom: var(--space_xl4);
+	}
+</style>

package/dist/DeclarationDetail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeclarationDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DeclarationDetail.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAiBxD,KAAK,gBAAgB,GAAI;IAAC,WAAW,EAAE,WAAW,CAAA;CAAC,CAAC;AAmbrD;;;;;;;;GAQG;AACH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"DeclarationDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DeclarationDetail.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAiBxD,KAAK,gBAAgB,GAAI;IAAC,WAAW,EAAE,WAAW,CAAA;CAAC,CAAC;AAqbrD;;;;;;;;GAQG;AACH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/Dialog.svelte

@@ -1,167 +1,177 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte';
-	import {is_editable, swallow} from '@fuzdev/fuz_util/dom.js';
-	import {wait} from '@fuzdev/fuz_util/async.js';
-
-	import Teleport from './Teleport.svelte';
-	import type {DialogLayout} from './dialog.js';
-
-	// TODO use `<dialog>` here instead of `Teleport`
-	// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
-
-	/*
-
-	This component is a singleton that mounts to a #dialog container element added to the body,
-	using a `Teleport` component to avoid ancestor-caused style issues like overflow and z-index.
-	It adds `.dialog` to the body when mounted to fix scrolling behavior,
-	and adds padding to the body to adjust for any scrollbars.
-	It uses a CSS custom property for this to avoid the high complexity of trying to
-	correctly revert any preexisting values for overflow and padding on the body.
-	We don't want to add restrictions to what users can do to the body on their own!
-
-	*/
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import {SvelteSet} from 'svelte/reactivity';
+	import {swallow} from '@fuzdev/fuz_util/dom.js';
+
+	import {dialog_context, type DialogContext, type DialogAlign} from './dialog.js';
+
+	/**
+	 * This component renders a native `<dialog>` opened with `showModal()`, which
+	 * puts it in the top layer. The top layer escapes ancestor stacking/overflow
+	 * contexts (so no `Teleport` is needed), traps focus, makes the rest of the page
+	 * inert, closes on Escape, and restores focus to the previously focused element
+	 * on close -- all natively. The dim background is the native `::backdrop`.
+	 *
+	 * We render a full-viewport overlay inside the dialog rather than a content-sized
+	 * box, to preserve the scrolling and `align="top"` behaviors. The content
+	 * surface itself is the consumer's -- pair this with `DialogContent` for the
+	 * default `.pane` card and gutter, or render your own surface in `children`.
+	 *
+	 * @module
+	 */
 
 	const {
-		container,
-		layout = 'centered',
-		index = 0,
-		active = true,
+		show = true,
+		align = 'center',
+		dismissable = true,
 		content_selector = '.pane',
+		onbeforeclose,
 		onclose,
 		children,
-	}: {
-		// TODO maybe change this API away from an element to a selector? or remove the API completely?
-		container?: HTMLElement;
+		...rest
+	}: Omit<SvelteHTMLElements['dialog'], 'children' | 'onclose'> & {
 		/**
-		 * @default 'centered'
+		 * Whether the dialog is shown. When the `<dialog>` mounts it opens via
+		 * `showModal()`; when it unmounts it closes.
+		 * Defaults to `true` so the `{#if opened}<Dialog>...</Dialog>{/if}` pattern
+		 * works without passing `show` -- mounting the component opens the dialog.
+		 * Pass `show={opened}` to skip the outer `{#if}` and let the component manage
+		 * its own conditional rendering.
+		 * @default true
 		 */
-		layout?: DialogLayout;
+		show?: boolean;
 		/**
-		 * index 0 is under 1 is under 2 etc -- the topmost dialog is the last in the array
-		 * @default 0
+		 * How the content is aligned in the viewport. `center` vertically centers it;
+		 * `top` aligns it to the top and grows downward, which avoids jank when the
+		 * content's height changes.
+		 * @default 'center'
 		 */
-		index?: number;
+		align?: DialogAlign;
 		/**
+		 * Whether clicking outside the content (see `content_selector`) closes the
+		 * dialog. `Escape` closes it regardless of this.
 		 * @default true
 		 */
-		active?: boolean;
+		dismissable?: boolean;
 		/**
-		 * If provided, prevents clicks that would close the dialog
-		 * from bubbling past any elements matching this selector.
+		 * Fallback selector for a content surface you render in `children` yourself
+		 * (rather than via `DialogContent`, which self-registers).
+		 * When `dismissable`, a press that isn't inside a registered surface (e.g.
+		 * `DialogContent`, which self-registers) and doesn't match this selector
+		 * closes the dialog. Defaults to the fuz_css `.pane` card; set it to match
+		 * your surface's outermost element -- with no registered surface and no
+		 * match, presses anywhere close the dialog.
 		 * @default '.pane'
 		 */
-		content_selector?: string | null;
+		content_selector?: string;
+		/**
+		 * Called before a user-initiated close (`Escape`, click-outside, or `close`).
+		 * Return `false` to veto and keep the dialog open -- e.g. to confirm
+		 * discarding unsaved changes. Programmatic close via `show={false}` bypasses
+		 * this.
+		 */
+		onbeforeclose?: () => boolean | void;
+		/**
+		 * Called when the dialog closes -- via `Escape`, click-outside, or `close`.
+		 * Use it to sync your own open state, e.g. `onclose={() => (opened = false)}`.
+		 * Like `onbeforeclose`, programmatic close via `show={false}` bypasses this.
+		 */
 		onclose?: () => void;
-		children: Snippet<[close: (e?: Event) => void]>;
+		/**
+		 * Rendered inside the dialog overlay. Receives the `DialogContext` (e.g.
+		 * `{close}`); pair with `DialogContent` or render your own surface.
+		 */
+		children: Snippet<[dialog: DialogContext]>;
 	} = $props();
 
-	const ROOT_SELECTOR = 'body'; // TODO make configurable
-	const CONTAINER_ID = 'fuz_dialog';
-
-	let container_el: HTMLElement | undefined = $state.raw();
-	$effect(() => {
-		update_container_el(container);
-	});
-
-	const update_container_el = (container: HTMLElement | undefined): void => {
-		if (container) {
-			container_el = container;
-		} else {
-			const found = document.getElementById(CONTAINER_ID);
-			if (found) {
-				container_el = found;
-			} else {
-				const root_el = document.querySelector(ROOT_SELECTOR);
-				if (!root_el) {
-					throw Error(`Cannot find dialog root element with selector '${ROOT_SELECTOR}'`);
-				}
-				container_el = document.createElement('div');
-				container_el.id = CONTAINER_ID;
-				container_el.style.display = 'contents';
-				root_el.appendChild(container_el);
-			}
-		}
+	let dialog_el: HTMLDialogElement | undefined;
+
+	// Guards against a single dismissal firing `onclose` twice. Reset on mount.
+	let closing = false;
+
+	// Closes the native dialog (which restores focus to the trigger) and notifies
+	// the consumer to unmount us. Closing here, while still mounted and connected,
+	// is what makes focus restoration work -- closing on unmount would run on a
+	// detached node, which doesn't restore focus.
+	const request_close = () => {
+		if (closing) return;
+		// let the consumer veto a user-initiated dismissal (e.g. confirm unsaved changes)
+		if (onbeforeclose?.() === false) return;
+		closing = true;
+		dialog_el?.close();
+		onclose?.();
 	};
 
-	let dialog_el: HTMLElement | undefined = $state.raw();
-	let content_el: HTMLElement | undefined = $state.raw();
-
+	// The `close` passed to children also swallows the triggering event.
 	const close = (e?: Event) => {
 		if (e) swallow(e);
-		onclose?.();
+		request_close();
 	};
 
-	// TODO hook into a ui input system
-	const on_window_keydown = (e: KeyboardEvent) => {
-		if (e.key === 'Escape' && !is_editable(e.target)) {
-			// apply hotkey only for the top-most dialog
-			const parent_el = dialog_el?.parentElement;
-			const parents = parent_el?.parentElement?.children;
-			const index = Array.prototype.indexOf.call(parents, parent_el);
-			if (!parents || index === parents.length - 1 || index === -1) {
-				close(e);
-			}
-		}
+	// Content surfaces (e.g. `DialogContent`) register here so a press inside one
+	// isn't an outside-dismiss. Identity-based, so it works regardless of classes;
+	// `content_selector` stays the fallback for surfaces rendered in `children`.
+	const surfaces = new SvelteSet<Element>();
+	const register_surface = (element: Element): (() => void) => {
+		surfaces.add(element);
+		return () => {
+			surfaces.delete(element);
+		};
 	};
 
-	// The dialog isn't "ready" until the teleport moves it.
-	// Rendering the the dialog's children only once it's ready fixes things like `autofocus`.
-	let ready = $state.raw(false);
+	// The context is both passed to `children` and set for descendants (e.g.
+	// `DialogContent`), so either path can close the dialog.
+	const context: DialogContext = {close, register_surface};
+	dialog_context.set(context);
+
+	const setup_dialog = (el: HTMLDialogElement) => {
+		dialog_el = el;
+		closing = false;
+		// Esc (and any platform close request) fires `cancel`. We swallow it and
+		// close the dialog ourselves (above, while connected) so focus is restored,
+		// and so the consumer's state stays in sync and we unmount.
+		const oncancel = (e: Event) => {
+			swallow(e);
+			request_close();
+		};
+		el.addEventListener('cancel', oncancel);
+		if (!el.open) el.showModal();
+		return () => {
+			el.removeEventListener('cancel', oncancel);
+			dialog_el = undefined;
+			// fallback for programmatic unmount (e.g. `show` set false directly)
+			if (el.open) el.close();
+		};
+	};
 </script>
 
-<svelte:window onkeydown={active ? on_window_keydown : undefined} />
-
-<!--
-	The `tabindex` and `el.focus()` fix scrolling with the keyboard,
-	needed because SvelteKit puts `tabindex` on the body,
-	but there's more that needs to be done for accessibility, like focus capture.
-	For more see: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
-	and https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
--->
-<Teleport
-	to={container_el}
-	onmove={async () => {
-		await wait(); // TODO this is a hack to get animations working, `Teleport` now mounts synchronously?!
-		ready = true;
-		dialog_el?.focus(); // TODO make this more declarative? probably want to focus only after moving though, not on mount, which makes an action trickier
-	}}
->
-	<div
-		class="dialog"
-		class:ready
-		class:layout-page={layout === 'page'}
-		role="dialog"
-		aria-modal="true"
-		bind:this={dialog_el}
-		tabindex="-1"
-		style:z-index={100 + index}
+{#if show}
+	<dialog
+		{...rest}
+		class="dialog {rest.class}"
+		class:align-top={align === 'top'}
+		{@attach setup_dialog}
 	>
-		<div class="dialog-layout">
-			<div
-				class="dialog-wrapper"
-				role="none"
-				onmousedown={(e) => {
-					// Close if clicking outside `content_el` but inside the wrapper
-					const target = e.target as Element;
-					if (
-						content_el &&
-						(content_el === target ||
-							!content_el.contains(target) ||
-							(content_selector && !target.closest(content_selector)))
-					) {
-						close(e);
-					}
-				}}
-			>
-				<div class="dialog-bg" aria-hidden="true"></div>
-				<div class="dialog-content" bind:this={content_el}>
-					<!-- mount the content only after teleporting to avoid issues -->
-					{#if ready}{@render children(close)}{/if}
-				</div>
-			</div>
+		<div
+			class="dialog-wrapper"
+			role="none"
+			onmousedown={(e) => {
+				if (!dismissable) return;
+				const target = e.target as Element;
+				// inside a registered surface (e.g. DialogContent) -> not an outside dismiss
+				for (const surface of surfaces) {
+					if (surface.contains(target)) return;
+				}
+				// fallback for surfaces rendered in `children`: match `content_selector`
+				if (content_selector && target.closest(content_selector)) return;
+				close(e);
+			}}
+		>
+			{@render children(context)}
 		</div>
-	</div>
-</Teleport>
+	</dialog>
+{/if}
 
 <style>
 	.dialog {
@@ -171,51 +181,50 @@
 				var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_70),
 				transparent
 			);
+		/* reset the user-agent dialog styles; we render a full-viewport overlay */
+		max-width: none;
+		max-height: none;
+		/* width/height are needed despite `inset: 0` to make the dialog element fill the viewport */
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: inherit;
 		position: fixed;
 		inset: 0;
 		overflow: auto;
-		/* this simplifies the code a lot but doesn't prevent scrolling
-		the underlying content when the dialog doesn't overflow, even when `overflow: scroll`
-		TODO check if this behaves as desired after switching to use the `dialog` element */
 		overscroll-behavior: contain;
 	}
+	/* the native backdrop is the dim background; fade it in on open */
+	.dialog::backdrop {
+		background-color: var(--dialog_bg, var(--darken_60));
+		transition: background-color var(--duration_2) ease;
+	}
+	@starting-style {
+		.dialog::backdrop {
+			background-color: transparent;
+		}
+	}
 
+	/* Lock background scroll while a modal dialog is open. `scrollbar-gutter`
+	reserves the scrollbar space so toggling the lock doesn't shift the layout. */
+	:global(html:has(dialog.dialog[open])) {
+		overflow: hidden;
+		scrollbar-gutter: stable;
+	}
+
+	/* `min-height: 100%` (not `height`) makes tall content overflow downward only: the
+	wrapper grows to its content, so the centered top stays reachable in the dialog's
+	scroll. A fixed-height centering box would strand the top above the scroll origin. */
 	.dialog-wrapper {
-		position: relative; /* for the surface */
 		min-height: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
-	.layout-page .dialog-wrapper {
+	.align-top .dialog-wrapper {
 		align-items: start;
 	}
-
-	.dialog-bg {
-		position: absolute;
-		inset: 0;
-		z-index: 0;
-		opacity: 0;
-		transition: opacity var(--duration_3) ease;
-		background-color: var(--dialog_bg, var(--darken_60));
-	}
-	.ready .dialog-bg {
-		opacity: 1;
-	}
-
-	.dialog-layout {
-		height: 100%;
-		/* makes the content overflow downwards instead of upwards+downwards because it's centered */
-		max-height: 100%;
-	}
-
-	.dialog-content {
-		width: 100%;
-		transform: scale(0.99);
-		transition: transform var(--duration_1) ease;
-		padding: 40px;
-	}
-	.ready .dialog-content {
-		transform: scale(1);
-	}
 </style>