@widgetic/design-system 0.5.22 → 0.5.23

package/dist/components/modals/BaseModal.svelte

@@ -1,419 +1,422 @@
 <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 { cubicOut } from 'svelte/easing';
+	import { createEventDispatcher, 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 } 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';
+	// 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;
+
+	// 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;
+
+	// 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 no padding) 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;
+
+	// 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();
+		}
+	}
 </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="
+	<Portal
+		class="{className ? className + ' ' : ''}base-modal-portal"
+		target={target || `modal-${modalType || 'default'}`}
+		{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 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="
             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;
           "
-          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={{ 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"
+					>
+						{@render contentSlot()}
+					</WScrollArea>
+				{:else}
+					<div class="modal-content-container" style="height: {contentAvailableHeight}px;">
+						{@render contentSlot()}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</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;
+	}
+
+	/* 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;
+	}
 </style>