@widgetic/design-system 0.5.23 → 0.5.25

package/dist/components/CopyableHeader.svelte

@@ -130,9 +130,10 @@
 	}
 </script>
 
-<div class={cn('copyable-header flex w-full flex-col gap-3', className)} {style}>
+<!-- `min-w-0` on the root and on the title row: a `truncate` title has its whole text as min-content, so inside a grid or flex parent (a dialog) the row would push the copy button out of the parent instead of cutting the title. -->
+<div class={cn('copyable-header flex w-full min-w-0 flex-col gap-3', className)} {style}>
 	<!-- Title row: section label + copy control (Figma 32px). -->
-	<div class={cn('flex h-8 items-center justify-between gap-3', headerBackgroundColor)}>
+	<div class={cn('flex h-8 min-w-0 items-center justify-between gap-3', headerBackgroundColor)}>
 		<div class={cn('text-heading-section text-foreground min-w-0 truncate', headerTextClass)}>
 			{headerText}
 		</div>
@@ -262,7 +263,8 @@
 	</div>
 
 	{#if showHelpRow}
-		<div class="flex flex-wrap items-center gap-1">
+		<!-- Figma: the help row is 20 high (the 14/20 link sets it), whatever the size of the link. -->
+		<div class="flex min-h-5 flex-wrap items-center gap-1">
 			{#if helpPrompt}
 				<span class="text-caption text-muted-foreground">{helpPrompt}</span>
 			{/if}

package/dist/components/index.d.ts

@@ -16,7 +16,7 @@ export { Breadcrumbs, type BreadcrumbsProps } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
 export { SearchInput } from './search-input';
 export { ShadEditor, checkShadEditorMessages, type ShadEditorMessageKey, type TipTapEditor, type TipTapEditorLevel } from './shad-editor';
-export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, type ErrorStateMessages, NotificationRow, type NotificationRowProps, SettingsNav, type SettingsNavProps, SettingsDialog, type SettingsDialogProps, Stat, type StatProps, statVariants, Banner, type BannerProps, type BannerTone, bannerVariants, Link, type LinkProps, type LinkSize, linkVariants, type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive, externalLinkAttributes, statHintClass, type StatTone, type SettingsDialogMessages, defaultSettingsDialogMessages } from './shell';
+export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, type ErrorStateMessages, NotificationRow, type NotificationRowProps, SettingsNav, type SettingsNavProps, SettingsDialog, type SettingsDialogProps, Stat, type StatProps, statVariants, Banner, type BannerProps, type BannerTone, bannerVariants, Link, type LinkProps, type LinkSize, linkVariants, type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive, externalLinkAttributes, statHintClass, type StatTone } from './shell';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';

package/dist/components/index.js

@@ -17,7 +17,7 @@ export { Breadcrumbs } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
 export { SearchInput } from './search-input';
 export { ShadEditor, checkShadEditorMessages } from './shad-editor';
-export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, NotificationRow, SettingsNav, SettingsDialog, Stat, statVariants, Banner, bannerVariants, Link, linkVariants, settingsNavItemIsActive, externalLinkAttributes, statHintClass, defaultSettingsDialogMessages } from './shell';
+export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, NotificationRow, SettingsNav, SettingsDialog, Stat, statVariants, Banner, bannerVariants, Link, linkVariants, settingsNavItemIsActive, externalLinkAttributes, statHintClass } from './shell';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';

package/dist/components/modals/BaseModal.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	// Svelte imports
 	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();
 
 	// Design system componentsimports
@@ -10,7 +9,20 @@
 	import { IconX } from '@tabler/icons-svelte';
 
 	// Modal store
-	import { modalState, openModal, closeModal } from './modalStore';
+	import {
+		modalState,
+		openModal,
+		closeModal,
+		registerModalInstance,
+		unregisterModalInstance,
+		isTopModalInstance
+	} from './modalStore';
+	import {
+		overlayBackdropBlurPx,
+		overlayContentScaleStart,
+		overlayTransitionDurationMs,
+		overlayTransitionEasing
+	} from '../../utils/overlayMotion.js';
 
 	/* COMPONENT PROPS */
 	// class and style props
@@ -42,15 +54,21 @@
 	// A bare modal has no title row, no close button and no padding: its content draws all of it (the File Browser's
 	// search dialog is one: the search field is the top row). Close it with Escape or a click on the backdrop.
 	export let bare: boolean = false;
+	/** When false, clicks and taps on the scrim do not close (destructive confirms can set this). Default matches Figma: scrim dismisses. */
+	export let closeOnBackdropClick = true;
+	/** When false, Escape does not close. Default: Escape dismisses unless a nested control already handled the key. */
+	export let closeOnEscape = true;
 
 	// children prop(svelte 5) to replace the traditional slot(svelte 4)
 	export let children: any;
 
 	/* CONSTANTS */
-	// Modal transition and style variables
-	const transitionDuration = 200;
-	const backdropBlur = '4px';
-	const easing = cubicOut;
+	const transitionDuration = overlayTransitionDurationMs;
+	const backdropBlur = `${overlayBackdropBlurPx}px`;
+	const easing = overlayTransitionEasing;
+	const transitionOpts = { duration: transitionDuration, easing };
+
+	const focusRingGutterPx = 4;
 
 	// Update constants for modal constraints
 	const PADDING = 24; // Consistent padding for sides and bottom
@@ -66,7 +84,7 @@
 	// All Content Container vars
 	const contentPadding = 16;
 	let allContentHeight = 0;
-	// The card draws a 1px border and 24px of padding (a bare modal has no padding) around the title row and the content.
+	// The card draws a 1px border and 24px of padding (a bare modal has none) around the title row and the content.
 	const CARD_BORDER = 1;
 	const CARD_PADDING = 24;
 	$: cardChromeHeight = 2 * CARD_BORDER + (bare ? 0 : 2 * CARD_PADDING);
@@ -83,6 +101,17 @@
 	$: contentAvailableHeight = Math.max(0, modalHeight - cardChromeHeight - titleRowHeight);
 	let updateContentDimInterval: any;
 
+	/** Stays true until exit transitions finish or the instance is destroyed. */
+	let keepPortalMounted = false;
+	/** True while exit `out:` runs after `open` became false (parent `{#if}` or bind). */
+	let exiting = false;
+	let prevOpenForExit = open;
+	/** `openModal` pushed and this instance registered — popped only after outro or destroy. */
+	let storePushed = false;
+	let instanceToken: symbol | undefined;
+
+	let reduceMotion = false;
+
 	// Show logs
 	let showLogs = false;
 
@@ -96,73 +125,67 @@
 		}
 	}
 
+	function pushModalStore() {
+		if (!storePushed) {
+			openModal(modalType, modalData);
+			instanceToken = registerModalInstance();
+			storePushed = true;
+		}
+	}
+
+	function popModalStore() {
+		if (storePushed) {
+			closeModal();
+			if (instanceToken !== undefined) {
+				unregisterModalInstance(instanceToken);
+				instanceToken = undefined;
+			}
+			storePushed = false;
+		}
+	}
+
+	function isTopModal(): boolean {
+		return instanceToken !== undefined && isTopModalInstance(instanceToken);
+	}
+
 	/**
 	 * LIFECYCLE HOOKS
 	 * */
 	// Check stored state on mount and reopen if needed
 	onMount(() => {
-		if ($modalState.isOpen && !open) {
-			// if(showLogs) console.log('Checking modal restoration:', {
-			//   currentType: modalType,
-			//   storedType: $modalState.modalType,
-			//   storedData: $modalState.data
-			// });
+		try {
+			reduceMotion =
+				typeof window !== 'undefined' &&
+				window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true;
+		} catch {
+			reduceMotion = false;
+		}
 
+		if ($modalState.isOpen && !open) {
 			// Only reopen if this is the correct modal type
 			if ($modalState.modalType === modalType) {
-				// if(showLogs) console.log('Restoring modal state for:', modalType);
 				open = true;
 				modalData = $modalState.data;
 				dispatch('restore', $modalState.data);
 			}
 		}
 
-		// Initialize update content dimensions
-		// updateViewportDimensions();
-
-		// Add keydown listener
 		window.addEventListener('keydown', handleKeydown);
 
-		// Add resize listener
-		// window.addEventListener('resize', updateViewportDimensions);
-
 		return () => {
-			// window.removeEventListener('resize', updateViewportDimensions);
 			window.removeEventListener('keydown', handleKeydown);
-
-			// Close the modal if it is open
-			if (open) {
-				closeModal();
-				toggleUpdateContentDimensions(false);
-			}
+			popModalStore();
+			toggleUpdateContentDimensions(false);
 		};
 	});
 
-	// Function to update viewport dimensions
-	function updateViewportDimensions() {
-		// not used anymore
-		// read window width and height
-		// viewportWidth = window.innerWidth;
-		// viewportHeight = window.innerHeight;
-
-		// update the conetent holder height
-		// setTimeout(() => {
-		allContentHeight = 2 * contentPadding + titleHeight + contentHolderHeight;
-		// if(showLogs) console.log('Modal current height:', allContentHeight);
-		// let availableHeight = modalHeight - 2 * contentPadding;
-		// if(showLogs) console.log('Modal current height:', allContentHeight, availableHeight);
-		// contentHolderHeight = allContentHeight > availableHeight ? (availableHeight - titleHeight) + 'px' : 'auto';
-		// modalFinalHeight = titleHeight + contentHeight + 2 * PADDING;
-		// if(showLogs) console.log('Modal current height:', modalHeight, modalFinalHeight);
-		// modalFinalHeight = Math.min(modalHeight, contentCurrentHeight);
-		// }, 10);
-		// if(showLogs) console.log('Updating viewport dimensions:', viewportWidth, viewportHeight);
-	}
+	onDestroy(() => {
+		popModalStore();
+	});
 
 	// Reactive Statement to Calculate dynamic modal position and dimensions
 	$: modalStyle = (() => {
 		if (viewportWidth === 0 || viewportHeight === 0) {
-			// Return default styles during SSR
 			return {
 				width: width,
 				height: height,
@@ -173,22 +196,17 @@
 			};
 		}
 
-		// Parse provided dimensions
 		const providedWidth = parseInt(width);
 		const providedHeight = parseInt(height);
 
-		// Calculate maximum dimensions
 		const maxWidth = viewportWidth - 2 * PADDING;
 		const maxHeight = viewportHeight - 2 * PADDING;
 
-		// Calculate actual dimensions
 		const actualWidth = Math.min(providedWidth, maxWidth);
 		const actualHeight = Math.min(providedHeight, maxHeight);
 
-		// If the actual height is less than maxHeight, center it vertically(but ensure it never goes above PADDING
 		const centeredTop = Math.max(PADDING, (viewportHeight - actualHeight) / 2);
 
-		// Return the calculated styles
 		return {
 			width: `${actualWidth}px`,
 			height: `${actualHeight}px`,
@@ -200,9 +218,9 @@
 	})();
 
 	function handleKeydown(event: KeyboardEvent) {
+		if (!isTopModal()) return;
 		if (!open) return;
 
-		// Only log keyboard events that we actually handle
 		if (['Backspace', 'Escape', 'Space'].includes(event.key)) {
 			// if(showLogs) console.log('Modal handling key:', event.key, 'Target:', (event.target as HTMLElement).tagName);
 		}
@@ -211,22 +229,26 @@
 		const isInput =
 			target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
 
-		// Let input fields handle their own events
+		if (event.key === 'Escape' && closeOnEscape) {
+			// Escape: close from inputs too unless a nested listbox/combobox already called preventDefault.
+			if (!event.defaultPrevented) {
+				event.preventDefault();
+				event.stopPropagation();
+				handleClose();
+			}
+			return;
+		}
+
 		if (isInput) {
 			return;
 		}
 
-		// Prevent backspace navigation when not in input
 		if (event.key === 'Backspace') {
 			event.preventDefault();
 			event.stopPropagation();
 			return;
 		}
 
-		if (event.key === 'Escape') {
-			handleClose();
-		}
-
 		if (enableSpaceKey && open && event.code === 'Space') {
 			event.preventDefault();
 			event.stopPropagation();
@@ -235,53 +257,57 @@
 	}
 
 	function handleClose() {
-		// if(showLogs) console.log('handleClose');
-
-		// change the open state to false
 		open = false;
-
-		// Close the modal
-		closeModal();
-
-		// Stop updating the content dimensions
 		toggleUpdateContentDimensions(false);
-
-		// Dispatch close event
 		dispatch('close');
 	}
 
-	// Only update the modal store when the open state actually changes
-	let previousOpen = open;
-	$: if (open !== previousOpen) {
-		previousOpen = open;
-
-		// if(showLogs) console.log('Modal open state changed:', { open, modalType, modalData });
-
-		// Open the modal if the open state is true
-		if (open) {
-			openModal(modalType, modalData);
-			toggleUpdateContentDimensions(true);
-		} else {
-			closeModal();
-			toggleUpdateContentDimensions(false);
-		}
+	function handleBackdropPointerDown(event: PointerEvent) {
+		if (!open || !closeOnBackdropClick || !isTopModal()) return;
+		// Only a press that *starts* on the scrim closes; starting inside the card and releasing outside does not.
+		if (event.target !== event.currentTarget) return;
+		event.preventDefault();
+		event.stopPropagation();
+		handleClose();
 	}
 
-	// Improved backdrop click handler
 	function handleBackdropClick(event: MouseEvent) {
-		// Prevent any propagation
+		if (!open || !closeOnBackdropClick || !isTopModal()) return;
+		// Only a press that *starts* on the scrim closes; starting inside the card and releasing outside does not.
+		if (event.target !== event.currentTarget) return;
 		event.preventDefault();
 		event.stopPropagation();
+	}
 
-		// Only handle clicks directly on the backdrop
-		if (event.target === event.currentTarget) {
-			// if(showLogs) console.log('Modal backdrop clicked!', event.type);
-			handleClose();
+	function handlePanelOutroEnd() {
+		exiting = false;
+		popModalStore();
+		if (!open) {
+			keepPortalMounted = false;
 		}
 	}
+
+	// Only update the modal store when `open` is true (push once per open); closing is handled in outro / destroy.
+	$: if (open) {
+		pushModalStore();
+		keepPortalMounted = true;
+		exiting = false;
+	}
+
+	$: if (prevOpenForExit && !open) {
+		exiting = true;
+		keepPortalMounted = true;
+	}
+	$: prevOpenForExit = open;
+
+	$: if (open) {
+		toggleUpdateContentDimensions(true);
+	} else if (!exiting) {
+		toggleUpdateContentDimensions(false);
+	}
 </script>
 
-{#if open}
+{#if keepPortalMounted}
 	<Portal
 		class="{className ? className + ' ' : ''}base-modal-portal"
 		target={target || `modal-${modalType || 'default'}`}
@@ -289,26 +315,31 @@
 		bind:clientWidth={viewportWidth}
 		bind:clientHeight={viewportHeight}
 	>
-		<!-- Backdrop Container with blur restricted to file browser -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<div
-			class="modal-backdrop-container bg-inverse/40 pointer-events-auto absolute inset-0"
-			style="backdrop-filter: blur({backdropBlur}); z-index: 999;"
-			transition:fade={{ duration: transitionDuration, easing }}
-			on:mousedown={handleBackdropClick}
-			on:click={handleBackdropClick}
-		></div>
-
-		<!-- Modal Main Container -->
-		<div
-			class="modal-root-container pointer-events-none absolute inset-x-0 flex h-full w-full items-center justify-center"
-			style="z-index: 1000;"
-		>
-			<!-- Modal Content Container -->
-			<div
-				class="modal-content-inner-container bg-background border-border rounded-panel pointer-events-auto fixed mx-6 overflow-hidden border select-text {bare ? 'p-0' : 'p-6'}"
-				style="
+		{#if open || exiting}
+			<!-- Host-scoped scrim (absolute fills the portal host, not the viewport). -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="modal-dismiss-layer pointer-events-none absolute inset-0 z-[1000]">
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					role="presentation"
+					data-widgetic-overlay="base-modal-backdrop"
+					class="modal-backdrop-container bg-muted-foreground/80 pointer-events-auto absolute inset-0"
+					style="backdrop-filter: blur({backdropBlur}); z-index: 0;"
+					in:fade|global={reduceMotion ? { duration: 0 } : transitionOpts}
+					out:fade|global={reduceMotion ? { duration: 0 } : transitionOpts}
+					on:pointerdown={handleBackdropPointerDown}
+					on:click={handleBackdropClick}
+				></div>
+				<div
+					class="modal-root-container pointer-events-none absolute inset-0 z-[1] flex items-center justify-center px-6"
+				>
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						data-widgetic-overlay="base-modal-panel"
+						class="modal-content-inner-container bg-background border-border rounded-panel pointer-events-auto relative max-h-[calc(100vh-3rem)] select-text overflow-hidden border {bare
+							? 'p-0'
+							: 'p-6'}"
+						style="
             width: {modalStyle.width};
             height: {allContentHeight}px;
             min-width: {bare ? 100 : 2 * contentPadding + 100}px;
@@ -321,58 +352,111 @@
             -webkit-user-select: text;
             -moz-user-select: text;
             -ms-user-select: text;
-            z-index: 1003;
+            z-index: 2;
           "
-				bind:offsetHeight={modalHeight}
-				in:scale={{ duration: transitionDuration, start: 0.95, opacity: 0, easing }}
-				out:scale={{ duration: transitionDuration, start: 0.95, opacity: 0, easing }}
-				on:click|stopPropagation
-			>
-				<!-- Content Title (a bare modal has none) -->
-				{#if !bare}
-				<div
-					bind:clientHeight={titleHeight}
-					class="modal-title-container flex items-start justify-between gap-2 overflow-hidden {titlePadding ===
-				'small'
-					? 'mb-2'
-					: 'mb-4'}"
-				aria-selected={isSelected}
-				>
-					{#if title}
-						<h2 class="text-heading-page text-foreground min-w-0 flex-1 text-start">{title}</h2>
-					{:else}
-						<div class="min-w-0 flex-1"></div>
-					{/if}
-					<IconButton variant="ghost" label={closeLabel} onclick={handleClose}>
-						<IconX class="size-4 stroke-[1.333]" />
-					</IconButton>
-				</div>
-				{/if}
-
-				<!-- Content Slot Container -->
-				{#snippet contentSlot()}
-					<div class="modal-content-slot-container w-full" bind:clientHeight={contentHolderHeight}>
-						{@render children()}
-					</div>
-				{/snippet}
-
-				<!-- Content with Scroll Area -->
-				{#if showScroll}
-					<WScrollArea
-						class="modal-content-container scroll-container"
-						type="always"
-						scrollOutside={true}
-						style="height: {contentAvailableHeight}px"
+						bind:offsetHeight={modalHeight}
+						in:scale|global={reduceMotion
+							? { duration: 0 }
+							: {
+									duration: transitionDuration,
+									start: overlayContentScaleStart,
+									opacity: 0,
+									easing
+								}}
+						out:scale|global={reduceMotion
+							? { duration: 0 }
+							: {
+									duration: transitionDuration,
+									start: overlayContentScaleStart,
+									opacity: 0,
+									easing
+								}}
+						on:outroend={handlePanelOutroEnd}
+						on:pointerdown|stopPropagation
+						on:click|stopPropagation
 					>
-						{@render contentSlot()}
-					</WScrollArea>
-				{:else}
-					<div class="modal-content-container" style="height: {contentAvailableHeight}px;">
-						{@render contentSlot()}
+						{#if !bare}
+							<div
+								bind:clientHeight={titleHeight}
+								class="modal-title-container flex items-start justify-between gap-2 {titlePadding === 'small'
+									? 'mb-2'
+									: 'mb-4'}"
+								aria-selected={isSelected}
+							>
+								{#if title}
+									<h2 class="text-heading-page text-foreground min-w-0 flex-1 break-words text-start">
+										{title}
+									</h2>
+								{:else}
+									<div class="min-w-0 flex-1"></div>
+								{/if}
+								<IconButton variant="ghost" label={closeLabel} onclick={handleClose}>
+									<IconX class="size-4 stroke-[1.333]" />
+								</IconButton>
+							</div>
+						{/if}
+
+						{#snippet contentSlot()}
+							<div
+								class="modal-content-slot-container w-full"
+								bind:clientHeight={contentHolderHeight}
+							>
+								{@render children()}
+							</div>
+						{/snippet}
+
+						{#if bare}
+							{#if showScroll}
+								<WScrollArea
+									class="modal-content-container scroll-container"
+									type="always"
+									scrollOutside={true}
+									style="height: {contentAvailableHeight}px"
+								>
+									{@render contentSlot()}
+								</WScrollArea>
+							{:else}
+								<div class="modal-content-container" style="height: {contentAvailableHeight}px;">
+									{@render contentSlot()}
+								</div>
+							{/if}
+						{:else}
+							<!--
+								Focus ring gutter: the clip wrapper uses margin -4px / padding +4px so the overflow clip edge sits
+								outside the content box; the inner flow/scroll root keeps the same footprint as before (no inner
+								padding), so layout parity stays 25px from the card border. For showScroll, the scroll root is
+								extended by 8px and an inner wrapper provides the 4px pad for rings without changing measured height.
+							-->
+							<div
+								class="modal-focus-ring-clip min-h-0 overflow-hidden"
+								style="margin: -{focusRingGutterPx}px; padding: {focusRingGutterPx}px; border-radius: inherit;"
+							>
+								{#if showScroll}
+									<WScrollArea
+										class="modal-scroll-gutter-host scroll-container max-h-full min-h-0"
+										type="always"
+										scrollOutside={true}
+										style="margin: -{focusRingGutterPx}px; width: calc(100% + {2 *
+											focusRingGutterPx}px); height: {contentAvailableHeight + 2 * focusRingGutterPx}px;"
+									>
+										<div class="modal-scroll-focus-gutter box-border min-h-0 p-1">
+											{@render contentSlot()}
+										</div>
+									</WScrollArea>
+								{:else}
+									<div
+										class="modal-content-flow max-h-full min-h-0"
+										style="height: {contentAvailableHeight}px;"
+									>
+										{@render contentSlot()}
+									</div>
+								{/if}
+							</div>
+						{/if}
 					</div>
-				{/if}
+				</div>
 			</div>
-		</div>
+		{/if}
 	</Portal>
 {/if}
 
@@ -383,9 +467,18 @@
 		overflow: hidden;
 	}
 
-	/* Add specific styling for the backdrop to ensure it captures all clicks */
+	/* Non-scroll body: no overflow:hidden here — the outer card + clip wrapper handle clipping; avoids cutting focus rings. */
+	.modal-content-flow {
+		width: 100%;
+		overflow: visible;
+	}
+
+	.modal-dismiss-layer {
+		pointer-events: none;
+	}
+
 	.modal-backdrop-container {
-		pointer-events: all !important;
+		pointer-events: auto;
 	}
 
 	:global(.ScrollAreaViewport) {
@@ -398,7 +491,6 @@
 		display: none;
 	}
 
-	/* Ensure text selection works in modals */
 	:global(.base-modal-portal),
 	:global(.modal-content-inner-container),
 	:global(.modal-content-root-container) {
@@ -408,7 +500,6 @@
 		-ms-user-select: text !important;
 	}
 
-	/* Ensure text selection works in input fields */
 	:global(.base-modal-portal input),
 	:global(.base-modal-portal textarea),
 	:global(.base-modal-portal select),

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -29,8 +29,11 @@ declare const BaseModal: $$__sveltets_2_IsomorphicComponent<{
     animateSize?: boolean;
     closeLabel?: string;
     bare?: boolean;
+    /** When false, clicks and taps on the scrim do not close (destructive confirms can set this). Default matches Figma: scrim dismisses. */ closeOnBackdropClick?: boolean;
+    /** When false, Escape does not close. Default: Escape dismisses unless a nested control already handled the key. */ closeOnEscape?: boolean;
     children: any;
 }, {
+    pointerdown: PointerEvent;
     click: PointerEvent;
     restore: CustomEvent<any>;
     spaceKey: CustomEvent<any>;

package/dist/components/modals/NewItemDialog.svelte

@@ -172,14 +172,12 @@
 				aria-invalid={Boolean(currentError)}
 				class={currentError ? 'border-destructive' : ''}
 				onkeydown={(e) => {
-					if (e.key === 'Escape') {
-						handleClose();
-					} else {
+					if (e.key !== 'Escape') {
 						e.stopPropagation();
-						if (e.key === 'Enter') {
-							e.preventDefault();
-							handleSubmit();
-						}
+					}
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						handleSubmit();
 					}
 				}}
 				oninput={(e) => {