@marianmeres/stuic 2.60.0 → 2.62.0

package/dist/components/Modal/Modal.svelte

@@ -1,14 +1,11 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
-	import type { FocusTrapOptions } from "../../actions/focus-trap.js";
 
 	export interface Props {
 		visible?: boolean;
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		/** Classes for the backdrop overlay element */
-		classBackdrop?: string;
 		/** Classes for the inner container (constrains content width) */
 		classInner?: string;
 		class?: string;
@@ -19,34 +16,23 @@
 		labelledby?: string;
 		/** ID reference for aria-describedby */
 		describedby?: string;
-		/** Transition duration in ms (respects prefers-reduced-motion) */
-		transitionDuration?: number;
-		elBackdrop?: HTMLDivElement;
 		el?: HTMLDivElement;
-		/** Enable focus trap, or pass options to customize behavior */
-		focusTrap?: boolean | FocusTrapOptions;
 		/** Called when Escape key is pressed while modal is open */
-		onEscape?: undefined | (() => void);
+		onEscape?: () => void;
 		/** Disable body scroll lock when modal is open */
 		noScrollLock?: boolean;
-		/** Fires when the backdrop is clicked "directly" */
-		onBackdropClick?: undefined | (() => void);
 	}
 </script>
 
 <script lang="ts">
-	import Backdrop from "../Backdrop/Backdrop.svelte";
-	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
+	import ModalDialog from "../ModalDialog/ModalDialog.svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
 
-	const prefersReduced = prefersReducedMotion();
-
 	let {
 		visible = $bindable(false),
 		children,
 		header,
 		footer,
-		classBackdrop,
 		classInner,
 		class: classProp,
 		classHeader,
@@ -54,61 +40,64 @@
 		classFooter,
 		labelledby,
 		describedby,
-		transitionDuration = 100,
-		// transitionEnabled = true,
-		elBackdrop = $bindable(),
 		el = $bindable(),
-		focusTrap = true,
 		onEscape,
 		noScrollLock = false,
-		onBackdropClick,
 	}: Props = $props();
 
-	let backdrop: Backdrop = $state()!;
+	let modalDialog: ModalDialog = $state()!;
 
 	export function close() {
-		backdrop.close();
+		modalDialog.close();
 	}
 
 	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
-		backdrop.open(openerOrEvent);
+		modalDialog.open(openerOrEvent);
+		visible = true;
 	}
 
 	export function setOpener(opener?: null | HTMLElement) {
-		backdrop.setOpener(opener);
+		modalDialog.setOpener(opener);
 	}
 
 	export function visibility() {
-		return backdrop.visibility();
+		return modalDialog.visibility();
+	}
+
+	// Sync visible prop with ModalDialog - when visible becomes true externally, open the dialog
+	$effect(() => {
+		if (visible && !modalDialog?.visibility().visible) {
+			modalDialog?.open();
+		}
+	});
+
+	function handlePreClose() {
+		visible = false;
+		// return undefined to allow close
+	}
+
+	function handlePreEscapeClose() {
+		onEscape?.();
+		// return undefined to allow close (preClose will set visible = false)
 	}
 </script>
 
-<Backdrop
-	bind:this={backdrop}
-	bind:el={elBackdrop}
-	bind:visible
-	class={twMerge(
-		// "justify-center items-center bg-black/25 p-2 sm:p-4 md:p-[10vh] transition-all",
-		"justify-center items-center bg-black/25 transition-all",
-		"md:p-[10vh]",
-		classBackdrop
-	)}
-	{focusTrap}
-	fadeOutDuration={transitionDuration}
-	{onEscape}
+<ModalDialog
+	bind:this={modalDialog}
+	ariaLabelledby={labelledby}
+	ariaDescribedby={describedby}
 	{noScrollLock}
-	{onBackdropClick}
+	preEscapeClose={handlePreEscapeClose}
+	preClose={handlePreClose}
+	class="bg-transparent size-full md:size-auto pointer-events-none"
 >
 	<div
 		bind:this={el}
-		role="dialog"
-		aria-modal="true"
-		aria-labelledby={labelledby}
-		aria-describedby={describedby}
 		class={twMerge(
 			"overflow-x-hidden overflow-y-hidden flex flex-col",
-			"w-full max-w-3xl",
-			"h-dvh md:h-full",
+			"w-full md:w-3xl md:max-w-[calc(100vw-2rem)]",
+			"h-full md:h-auto md:min-h-48 md:max-h-[80dvh]",
+			"pointer-events-auto",
 			classInner
 		)}
 	>
@@ -117,7 +106,7 @@
 				"bg-white dark:bg-neutral-800",
 				"flex flex-col overflow-hidden",
 				"rounded-none md:rounded-md",
-				"w-full flex-1 md:max-h-2/3",
+				"w-full flex-1",
 				classProp
 			)}
 		>
@@ -136,7 +125,7 @@
 			{/if}
 		</div>
 	</div>
-</Backdrop>
+</ModalDialog>
 
 <style>
 	.main {

package/dist/components/Modal/Modal.svelte.d.ts

@@ -1,12 +1,9 @@
 import type { Snippet } from "svelte";
-import type { FocusTrapOptions } from "../../actions/focus-trap.js";
 export interface Props {
     visible?: boolean;
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
-    /** Classes for the backdrop overlay element */
-    classBackdrop?: string;
     /** Classes for the inner container (constrains content width) */
     classInner?: string;
     class?: string;
@@ -17,26 +14,19 @@ export interface Props {
     labelledby?: string;
     /** ID reference for aria-describedby */
     describedby?: string;
-    /** Transition duration in ms (respects prefers-reduced-motion) */
-    transitionDuration?: number;
-    elBackdrop?: HTMLDivElement;
     el?: HTMLDivElement;
-    /** Enable focus trap, or pass options to customize behavior */
-    focusTrap?: boolean | FocusTrapOptions;
     /** Called when Escape key is pressed while modal is open */
-    onEscape?: undefined | (() => void);
+    onEscape?: () => void;
     /** Disable body scroll lock when modal is open */
     noScrollLock?: boolean;
-    /** Fires when the backdrop is clicked "directly" */
-    onBackdropClick?: undefined | (() => void);
 }
 declare const Modal: import("svelte").Component<Props, {
     close: () => void;
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
     setOpener: (opener?: null | HTMLElement) => void;
     visibility: () => {
-        readonly visible: boolean;
+        readonly visible: boolean | undefined;
     };
-}, "el" | "visible" | "elBackdrop">;
+}, "el" | "visible">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/components/Modal/README.md

@@ -1,17 +1,14 @@
 # Modal
 
-A centered modal dialog with optional header and footer sections. Built on top of `Backdrop` with focus trap and scroll locking.
+A styled modal dialog with optional header and footer sections. Built on top of `ModalDialog` (native `<dialog>` element) with focus trap and scroll locking.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `visible` | `boolean` | `false` | Controls visibility (bindable) |
-| `focusTrap` | `boolean \| FocusTrapOptions` | `true` | Enable focus trapping |
-| `transitionDuration` | `number` | `100` | Fade transition duration (ms) |
 | `onEscape` | `() => void` | - | Callback on Escape key |
 | `noScrollLock` | `boolean` | `false` | Disable body scroll lock |
-| `classBackdrop` | `string` | - | CSS for backdrop overlay |
 | `classInner` | `string` | - | CSS for inner width container |
 | `class` | `string` | - | CSS for modal box |
 | `classHeader` | `string` | - | CSS for header section |
@@ -20,7 +17,6 @@ A centered modal dialog with optional header and footer sections. Built on top o
 | `labelledby` | `string` | - | ARIA labelledby ID |
 | `describedby` | `string` | - | ARIA describedby ID |
 | `el` | `HTMLDivElement` | - | Modal element reference (bindable) |
-| `elBackdrop` | `HTMLDivElement` | - | Backdrop element reference (bindable) |
 
 ## Snippets
 
@@ -109,9 +105,24 @@ A centered modal dialog with optional header and footer sections. Built on top o
 ```svelte
 <Modal
   bind:this={modal}
-  classInner="max-w-lg"
+  classInner="md:w-lg"
   class="rounded-lg"
 >
   <div class="p-6">Smaller modal</div>
 </Modal>
 ```
+
+## Responsive Behavior
+
+By default, Modal is:
+- **Mobile**: Full screen with 1rem margins from viewport edges
+- **Desktop (md+)**: Centered, max-width 768px, auto height with max 80vh
+
+## Relationship to ModalDialog
+
+Modal is a higher-level component built on `ModalDialog`. It provides:
+- Pre-styled header/main/footer layout
+- Responsive sizing (fullscreen mobile, centered desktop)
+- Conventional styling (background, rounded corners, etc.)
+
+Use `ModalDialog` directly when you need full control over the content layout.

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -13,6 +13,12 @@
 		preEscapeClose?: () => any;
 		/** Pre-close hook. Return false to prevent close. */
 		preClose?: () => any;
+		/** ID reference for aria-labelledby */
+		ariaLabelledby?: string;
+		/** ID reference for aria-describedby */
+		ariaDescribedby?: string;
+		/** Disable body scroll lock when dialog is open */
+		noScrollLock?: boolean;
 	}
 </script>
 
@@ -37,6 +43,9 @@
 		noEscapeClose,
 		preEscapeClose,
 		preClose,
+		ariaLabelledby,
+		ariaDescribedby,
+		noScrollLock,
 	}: Props = $props();
 
 	// important to start as undefined (because of scroll save/restore)
@@ -45,30 +54,42 @@
 	let dialog = $state<HTMLDialogElement>()!;
 	let box = $state<HTMLDivElement>()!;
 	let _opener: undefined | null | HTMLElement = $state();
+	let _isClosing = false;
 
 	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
+		if (visible) return; // Already open
 		visible = true;
 		setOpener(
-			(openerOrEvent as any)?.currentTarget ?? openerOrEvent ?? document.activeElement
+			openerOrEvent instanceof MouseEvent
+				? (openerOrEvent.currentTarget as HTMLElement)
+				: openerOrEvent ?? (document.activeElement as HTMLElement)
 		);
-		// clog("will showModal");
 		// dialog must be rendered in the DOM before it can be opened...
 		waitForNextRepaint().then(() => {
-			// clog("dialog.showModal()");
-			dialog.showModal();
+			try {
+				dialog?.showModal();
+			} catch (e) {
+				console.error("ModalDialog: Failed to open dialog:", e);
+				visible = false;
+			}
 		});
 	}
 
 	export function close() {
+		if (_isClosing || !visible) return;
+		_isClosing = true;
 		(async () => {
-			const allowed = await preClose?.();
-			// explicit false prevents close
-			if (allowed !== false) {
-				// clog("dialog.close()");
-				dialog?.close();
-				visible = false;
-				_opener?.focus();
-				_opener = null;
+			try {
+				const allowed = await preClose?.();
+				// explicit false prevents close
+				if (allowed !== false) {
+					dialog?.close();
+					visible = false;
+					_opener?.focus();
+					_opener = null;
+				}
+			} finally {
+				_isClosing = false;
 			}
 		})();
 	}
@@ -77,6 +98,14 @@
 		_opener = opener;
 	}
 
+	export function visibility() {
+		return {
+			get visible() {
+				return visible;
+			},
+		};
+	}
+
 	onClickOutside(
 		() => box,
 		() => !noClickOutsideClose && close()
@@ -84,7 +113,7 @@
 
 	$effect(() => {
 		// noop if we're undefined ($effect runs immediately as onMount)
-		if (visible === undefined) return;
+		if (visible === undefined || noScrollLock) return;
 		visible ? BodyScroll.lock() : BodyScroll.unlock();
 	});
 
@@ -101,6 +130,8 @@
 		bind:this={dialog}
 		use:focusTrap
 		data-type={type}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby}
 		class={twMerge(
 			"stuic-modal-dialog",
 			"fixed inset-4 m-auto size-auto",
@@ -109,6 +140,12 @@
 			"bg-transparent backdrop:bg-black/40",
 			classDialog
 		)}
+		onclick={(e) => {
+			// Close when clicking directly on the dialog (backdrop area), not its children
+			if (e.target === dialog && !noClickOutsideClose) {
+				close();
+			}
+		}}
 		onkeydown={async (e) => {
 			if (e.key === "Escape" && visible) {
 				// clog("on Escape keydown, preventing default and stopping propagation");

package/dist/components/ModalDialog/ModalDialog.svelte.d.ts

@@ -11,11 +11,20 @@ export interface Props {
     preEscapeClose?: () => any;
     /** Pre-close hook. Return false to prevent close. */
     preClose?: () => any;
+    /** ID reference for aria-labelledby */
+    ariaLabelledby?: string;
+    /** ID reference for aria-describedby */
+    ariaDescribedby?: string;
+    /** Disable body scroll lock when dialog is open */
+    noScrollLock?: boolean;
 }
 declare const ModalDialog: import("svelte").Component<Props, {
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
     close: () => void;
     setOpener: (opener?: null | HTMLElement) => void;
+    visibility: () => {
+        readonly visible: boolean | undefined;
+    };
 }, "">;
 type ModalDialog = ReturnType<typeof ModalDialog>;
 export default ModalDialog;

package/dist/components/ModalDialog/README.md

@@ -8,11 +8,14 @@ A modal component using the native HTML `<dialog>` element with `showModal()`. P
 |------|------|---------|-------------|
 | `noClickOutsideClose` | `boolean` | `false` | Disable close on outside click |
 | `noEscapeClose` | `boolean` | `false` | Disable close on Escape key |
+| `noScrollLock` | `boolean` | `false` | Disable body scroll lock |
 | `preEscapeClose` | `() => any` | - | Hook before Escape close (return `false` to prevent) |
 | `preClose` | `() => any` | - | Hook before any close (return `false` to prevent) |
 | `type` | `string` | - | Optional UI hint (added as `data-type` attribute) |
 | `class` | `string` | - | CSS for content box |
 | `classDialog` | `string` | - | CSS for dialog element |
+| `ariaLabelledby` | `string` | - | ID reference for aria-labelledby |
+| `ariaDescribedby` | `string` | - | ID reference for aria-describedby |
 
 ## Methods
 
@@ -21,6 +24,7 @@ A modal component using the native HTML `<dialog>` element with `showModal()`. P
 | `open(opener?)` | Open modal with `showModal()`, optionally track opener |
 | `close()` | Close modal |
 | `setOpener(el)` | Set element to refocus when closed |
+| `visibility()` | Returns object with `visible` getter |
 
 ## Usage
 
@@ -92,12 +96,27 @@ A modal component using the native HTML `<dialog>` element with `showModal()`. P
 </ModalDialog>
 ```
 
-## Differences from Modal
+### Check Visibility State
 
-| Feature | Modal | ModalDialog |
-|---------|-------|-------------|
-| Implementation | Custom backdrop | Native `<dialog>` |
-| Backdrop | Via `Backdrop` component | Native `::backdrop` |
-| Browser support | All modern | Requires `<dialog>` support |
-| Stacking | Manual z-index | Top layer (always on top) |
-| Accessibility | Manual ARIA | Built-in |
+```svelte
+<script lang="ts">
+  let dialog: ModalDialog;
+
+  function logVisibility() {
+    console.log('Is visible:', dialog.visibility().visible);
+  }
+</script>
+```
+
+## Relationship to Modal
+
+`Modal` is a higher-level component built on top of `ModalDialog`.
+
+| Feature | ModalDialog | Modal |
+|---------|-------------|-------|
+| Layout | Raw content | Header/main/footer structure |
+| Styling | Minimal | Pre-styled box with backgrounds |
+| Sizing | Manual | Responsive (fullscreen mobile, centered desktop) |
+| Use case | Full control | Quick conventional modals |
+
+Use `ModalDialog` when you need complete control over the modal content and styling. Use `Modal` for conventional modal dialogs with header/footer sections.