@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/modals/BaseModal.svelte

@@ -1,419 +1,513 @@
 <script lang="ts">
-  // Svelte imports
-  import { fade, scale } from 'svelte/transition';
-  import { cubicOut } from 'svelte/easing';
-  import { createEventDispatcher, onMount } from 'svelte';
-  const dispatch = createEventDispatcher();
-
-  // Design system componentsimports
-  import { Button, WScrollArea, Portal } from '..';
-  import { IconX } from '@tabler/icons-svelte';
-
-  // Modal store
-  import { modalState, openModal, closeModal } from './modalStore';
-
-  /* COMPONENT PROPS */
-  // class and style props
-  let className = '';
-  export { className as class };
-  export let style: string = '';
-  // modal dimensions
-  export let width: string = '808px';
-  export let height: string = '500px';
-  // modal props
-  export let modalType: string | undefined = undefined;
-  export let modalData: any = undefined;  
-  // portal target
-  export let target: string = '';
-  // title props
-  export let title: string | undefined = undefined;
-  export let titlePadding: 'small' | 'large' = 'large';
-  // modal state props
-  export let open = false;
-  export let enableSpaceKey = false;
-  export let isSelected = false;
-  export let showScroll = false;
-  // An image preview stays hidden until its real size is known, so the card does not open large and then shrink.
-  export let shown = true;
-  // Width and height ease to the content, instead of jumping.
-  export let animateSize = false;
-  // The words a screen reader says for the close button. A page that shows the modal in another language passes its own.
-  export let closeLabel: string = 'Close modal';
-
-  // 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 backdropOpacity = '0.4';
-  const backdropBlur = '4px';
-  const easing = cubicOut;
-
-  // Update constants for modal constraints
-  const PADDING = 24; // Consistent padding for sides and bottom
-
-  /* STATE VARIABLES */
-  // Add viewport dimension state
-  let viewportWidth = 0;
-  let viewportHeight = 0;
-
-  // Modal vars
-  let modalHeight = 0; // Height of the modal including borders that's why binded to offsetHeight
-  
-
-  // All Content Container vars
-  const contentPadding = 16;
-  let allContentHeight = 0;
-  $: allContentHeight = 2 * contentPadding + titleHeight + contentHolderHeight;
-  
-  // Title vars
-  let titleHeight = 0;
-
-  // Content only vars
-  let contentHolderHeight = 0;
-  $: contentAvailableHeight = modalHeight - (2 * contentPadding + titleHeight);
-  let updateContentDimInterval:any;
-
-  // Show logs
-  let showLogs = false;
-
-
-  /* METHODS */
-  function toggleUpdateContentDimensions(flag: boolean = true) {
-    if (!flag) {
-      clearInterval(updateContentDimInterval);
-      updateContentDimInterval = undefined;
-    } else {
-      // updateContentDimInterval = setInterval(() => {updateViewportDimensions()}, 200);
-    }
-  }
-
-  /** 
-   * 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
-      // });
-      
-      // 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);
-      }
-    };
-  });
-
-  // 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);
-  }
-
-  // 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,
-        maxWidth: `calc(100vw - ${2 * PADDING}px)`,
-        maxHeight: `calc(100vh - ${2 * PADDING}px)`,
-        top: '50%',
-        transform: 'translateY(-50%)'
-      };
-    }
-    
-    // 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`,
-      maxWidth: `${maxWidth}px`,
-      maxHeight: `${maxHeight}px`,
-      top: `${centeredTop}px`,
-      transform: 'none'
-    };
-  })();
-
-  function handleKeydown(event: KeyboardEvent) {
-    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);
-    }
-    
-    const target = event.target as HTMLElement;
-    const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-
-    // Let input fields handle their own events
-    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();
-      dispatch('spaceKey');
-    }
-  }
-
-  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);
-    }
-  }
-
-  // Improved backdrop click handler
-  function handleBackdropClick(event: MouseEvent) {
-    // Prevent any propagation
-    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();
-    }
-  }
+	// Svelte imports
+	import { fade, scale } from 'svelte/transition';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	// Design system componentsimports
+	import { IconButton, WScrollArea, Portal } from '..';
+	import { IconX } from '@tabler/icons-svelte';
+
+	// Modal store
+	import {
+		modalState,
+		openModal,
+		closeModal,
+		registerModalInstance,
+		unregisterModalInstance,
+		isTopModalInstance
+	} from './modalStore';
+	import {
+		overlayBackdropBlurPx,
+		overlayContentScaleStart,
+		overlayTransitionDurationMs,
+		overlayTransitionEasing
+	} from '../../utils/overlayMotion.js';
+
+	/* COMPONENT PROPS */
+	// class and style props
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+	// modal dimensions
+	export let width: string = '808px';
+	export let height: string = '500px';
+	// modal props
+	export let modalType: string | undefined = undefined;
+	export let modalData: any = undefined;
+	// portal target
+	export let target: string = '';
+	// title props
+	export let title: string | undefined = undefined;
+	export let titlePadding: 'small' | 'large' = 'large';
+	// modal state props
+	export let open = false;
+	export let enableSpaceKey = false;
+	export let isSelected = false;
+	export let showScroll = false;
+	// An image preview stays hidden until its real size is known, so the card does not open large and then shrink.
+	export let shown = true;
+	// Width and height ease to the content, instead of jumping.
+	export let animateSize = false;
+	// The words a screen reader says for the close button. A page that shows the modal in another language passes its own.
+	export let closeLabel: string = 'Close modal';
+	// 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 */
+	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
+
+	/* STATE VARIABLES */
+	// Add viewport dimension state
+	let viewportWidth = 0;
+	let viewportHeight = 0;
+
+	// Modal vars
+	let modalHeight = 0; // Height of the modal including borders that's why binded to offsetHeight
+
+	// All Content Container vars
+	const contentPadding = 16;
+	let allContentHeight = 0;
+	// 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);
+	// The title row (a bare modal has none) and the gap under it: 8px for a small title padding, 16px for a large one.
+	$: titleRowHeight = bare ? 0 : titleHeight + (titlePadding === 'small' ? 8 : 16);
+	// The card is exactly as tall as its content, the title row and what the card draws around them.
+	$: allContentHeight = cardChromeHeight + titleRowHeight + contentHolderHeight;
+
+	// Title vars
+	let titleHeight = 0;
+
+	// Content only vars
+	let contentHolderHeight = 0;
+	$: 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;
+
+	/* METHODS */
+	function toggleUpdateContentDimensions(flag: boolean = true) {
+		if (!flag) {
+			clearInterval(updateContentDimInterval);
+			updateContentDimInterval = undefined;
+		} else {
+			// updateContentDimInterval = setInterval(() => {updateViewportDimensions()}, 200);
+		}
+	}
+
+	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(() => {
+		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) {
+				open = true;
+				modalData = $modalState.data;
+				dispatch('restore', $modalState.data);
+			}
+		}
+
+		window.addEventListener('keydown', handleKeydown);
+
+		return () => {
+			window.removeEventListener('keydown', handleKeydown);
+			popModalStore();
+			toggleUpdateContentDimensions(false);
+		};
+	});
+
+	onDestroy(() => {
+		popModalStore();
+	});
+
+	// Reactive Statement to Calculate dynamic modal position and dimensions
+	$: modalStyle = (() => {
+		if (viewportWidth === 0 || viewportHeight === 0) {
+			return {
+				width: width,
+				height: height,
+				maxWidth: `calc(100vw - ${2 * PADDING}px)`,
+				maxHeight: `calc(100vh - ${2 * PADDING}px)`,
+				top: '50%',
+				transform: 'translateY(-50%)'
+			};
+		}
+
+		const providedWidth = parseInt(width);
+		const providedHeight = parseInt(height);
+
+		const maxWidth = viewportWidth - 2 * PADDING;
+		const maxHeight = viewportHeight - 2 * PADDING;
+
+		const actualWidth = Math.min(providedWidth, maxWidth);
+		const actualHeight = Math.min(providedHeight, maxHeight);
+
+		const centeredTop = Math.max(PADDING, (viewportHeight - actualHeight) / 2);
+
+		return {
+			width: `${actualWidth}px`,
+			height: `${actualHeight}px`,
+			maxWidth: `${maxWidth}px`,
+			maxHeight: `${maxHeight}px`,
+			top: `${centeredTop}px`,
+			transform: 'none'
+		};
+	})();
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!isTopModal()) return;
+		if (!open) return;
+
+		if (['Backspace', 'Escape', 'Space'].includes(event.key)) {
+			// if(showLogs) console.log('Modal handling key:', event.key, 'Target:', (event.target as HTMLElement).tagName);
+		}
+
+		const target = event.target as HTMLElement;
+		const isInput =
+			target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+		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;
+		}
+
+		if (event.key === 'Backspace') {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+
+		if (enableSpaceKey && open && event.code === 'Space') {
+			event.preventDefault();
+			event.stopPropagation();
+			dispatch('spaceKey');
+		}
+	}
+
+	function handleClose() {
+		open = false;
+		toggleUpdateContentDimensions(false);
+		dispatch('close');
+	}
+
+	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();
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		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();
+	}
+
+	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}
-  <Portal class="{className ? className + ' ' : ''}base-modal-portal" 
-          target={target || `modal-${modalType || 'default'}`}
-          style={style}
-          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 absolute inset-0 pointer-events-auto"
-        style="background-color: rgba(15, 32, 16, {backdropOpacity}); backdrop-filter: blur({backdropBlur}); z-index: 999;"
-        
-        transition:fade={{ duration: transitionDuration, easing }}
-        on:mousedown={handleBackdropClick}
-        on:click={handleBackdropClick}
-      ></div>
-
-      <!-- Close button -->
-      <div class="modal-close-bt-container absolute top-4 end-4 z-1004" transition:fade={{ duration: transitionDuration, easing }}>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <div 
-          class="close-button widgetic-colors p-0 w-10 h-10 bg-[hsl(var(--dark))] hover:bg-[hsl(var(--grey6))] transition-colors duration-200 rounded-full flex items-center justify-center cursor-pointer" 
-          on:click|stopPropagation|preventDefault={handleClose}
-          aria-label={closeLabel}
-          role="button"
-          tabindex="0"
-        >
-          <IconX class="!w-[24px] !h-[24px] text-white" />
-        </div>
-      </div>
-
-      <!-- Modal Main Container -->
-      <div 
-        class="modal-root-container absolute w-full h-full inset-x-0 flex justify-center pointer-events-none items-center"
-        style="z-index: 1000;"
-      >
-        <!-- Modal Content Container -->
-        <div 
-          class="modal-content-inner-container fixed pointer-events-auto mx-6 overflow-hidden
-                 bg-white modal-shadow widgetic-colors rounded-medium widgetic-radius
-                 border select-text {isSelected && modalType === 'filePreview' ? 'border-[hsl(var(--grey1))]' : 'border-[hsl(var(--grey1))]'}"
-          style="
+{#if keepPortalMounted}
+	<Portal
+		class="{className ? className + ' ' : ''}base-modal-portal"
+		target={target || `modal-${modalType || 'default'}`}
+		{style}
+		bind:clientWidth={viewportWidth}
+		bind:clientHeight={viewportHeight}
+	>
+		{#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: {2 * contentPadding + 100}px;
-            min-height: {2 * contentPadding + 50}px;
+            min-width: {bare ? 100 : 2 * contentPadding + 100}px;
+            min-height: {bare ? 50 : 2 * contentPadding + 50}px;
             max-width: {modalStyle.maxWidth};
             max-height: {modalStyle.maxHeight};
             visibility: {viewportWidth === 0 || !shown ? 'hidden' : 'visible'};
             transition: {animateSize ? 'width 200ms ease, height 200ms ease' : 'none'};
-            padding: {contentPadding}px 0;
             user-select: text;
             -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 -->
-                {#if title}
-                  <div bind:clientHeight={titleHeight} 
-                       class="modal-title-container h5 text-[hsl(var(--grey7))] overflow-hidden
-                              text-center px-4 {titlePadding === 'small' ? 'pb-2' : 'pb-4'}">
-                    {title}
-                  </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"
-                >
-                  {@render contentSlot()}                
-                </WScrollArea>
-                {:else}
-                  <div class="modal-content-container" 
-                  style="height: {contentAvailableHeight}px;"
-                  >
-                    {@render contentSlot()}
-                  </div>
-                {/if}
-
-        </div>
-      </div>
-  </Portal>
+						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
+					>
+						{#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>
+				</div>
+			</div>
+		{/if}
+	</Portal>
 {/if}
 
 <style>
-  .modal-content-container {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  /* Add specific styling for the backdrop to ensure it captures all clicks */
-  .modal-backdrop-container {
-    pointer-events: all !important;
-  }
-
-  :global(.ScrollAreaViewport) {
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-  }
-
-  :global(.ScrollAreaScrollbar[data-state='hidden']) {
-    display: none;
-  }
-
-  /* Ensure text selection works in modals */
-  :global(.base-modal-portal),
-  :global(.modal-content-inner-container),
-  :global(.modal-content-root-container) {
-    user-select: text !important;
-    -webkit-user-select: text !important;
-    -moz-user-select: text !important;
-    -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),
-  :global(.base-modal-portal [contenteditable="true"]) {
-    user-select: text !important;
-    -webkit-user-select: text !important;
-    -moz-user-select: text !important;
-    -ms-user-select: text !important;
-    cursor: text !important;
-  }
+	.modal-content-container {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	/* 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: auto;
+	}
+
+	:global(.ScrollAreaViewport) {
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+	}
+
+	:global(.ScrollAreaScrollbar[data-state='hidden']) {
+		display: none;
+	}
+
+	:global(.base-modal-portal),
+	:global(.modal-content-inner-container),
+	:global(.modal-content-root-container) {
+		user-select: text !important;
+		-webkit-user-select: text !important;
+		-moz-user-select: text !important;
+		-ms-user-select: text !important;
+	}
+
+	:global(.base-modal-portal input),
+	:global(.base-modal-portal textarea),
+	:global(.base-modal-portal select),
+	:global(.base-modal-portal [contenteditable='true']) {
+		user-select: text !important;
+		-webkit-user-select: text !important;
+		-moz-user-select: text !important;
+		-ms-user-select: text !important;
+		cursor: text !important;
+	}
 </style>