@versini/ui-dialog 9.0.0 → 10.0.0

package/dist/index.js

@@ -1,16 +1,14 @@
 /*!
-  @versini/ui-dialog v9.0.0
-  © 2025 gizmette.com
+  @versini/ui-dialog v10.0.0
+  © 2026 gizmette.com
 */
 
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import clsx from "clsx";
-import { createPortal } from "react-dom";
 
-;// CONCATENATED MODULE: ./src/common/constants.ts
 const MESSAGEBOX_CLASSNAME = "av-messagebox";
-const PANEL_CLASSNAME = "av-panel";
+const DIALOG_CLASSNAME = "av-dialog";
 const TYPE_PANEL = "panel";
 const TYPE_MESSAGEBOX = "messagebox";
 const ANIMATION_SLIDE = "slide";
@@ -20,543 +18,131 @@ const MEDIUM = "medium";
 const LARGE = "large";
 const NONE = "none";
 
-;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "react-dom"
-
-;// CONCATENATED MODULE: ./src/components/Panel/dialogStackManager.ts
-/**
- * Dialog Stack Manager
- *
- * Implements the W3C WAI-ARIA APG pattern for managing nested modal dialogs.
- * This module maintains a stack of open dialogs and coordinates focus event
- * listeners between them.
- *
- * Key features:
- * - Only the topmost dialog has active focus listeners
- * - When a nested dialog opens, parent listeners are suspended
- * - When a dialog closes, parent listeners are restored
- * - Programmatic focus changes are flagged to prevent event interference
- *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
- */ /**
- * Stack of currently open dialogs. The last item is the topmost dialog.
- */ const openDialogStack = [];
-/**
- * Flag to ignore focus changes during programmatic focus operations.
- * When true, focus event handlers should return early to prevent interference.
- *
- * This is critical for nested dialogs: when a child dialog closes and
- * programmatically returns focus to its trigger element inside the parent,
- * we don't want the parent's focusin handler to interfere.
- */ let ignoreFocusChanges = false;
-/**
- * Get whether focus changes should be ignored.
- * Focus event handlers should check this and return early if true.
- */ function shouldIgnoreFocusChanges() {
-    return ignoreFocusChanges;
-}
-/**
- * Execute a function while ignoring focus change events.
- * Use this when programmatically moving focus to prevent event handlers
- * from interfering.
- *
- * @param fn - Function to execute (typically contains focus() calls)
- */ function withIgnoredFocusChanges(fn) {
-    ignoreFocusChanges = true;
-    try {
-        fn();
-    } finally{
-        // Use setTimeout to ensure the flag stays true through any
-        // microtasks that might fire focus events
-        setTimeout(()=>{
-            ignoreFocusChanges = false;
-        }, 0);
-    }
-}
 /**
- * Register a dialog in the stack when it opens.
- * If there's a parent dialog, its listeners are suspended.
- *
- * @param entry - The dialog entry to register
- */ function registerDialog(entry) {
-    // If there's already a dialog open, suspend its listeners
-    if (openDialogStack.length > 0) {
-        const currentTop = openDialogStack[openDialogStack.length - 1];
-        currentTop.removeListeners();
-    }
-    // Add the new dialog to the stack and activate its listeners
-    openDialogStack.push(entry);
-    entry.addListeners();
-}
+ * Reference-counted scroll lock for document.documentElement.
+ * Supports nested dialogs: overflow is only restored when the last lock is released.
+ */ let scrollLockCount = 0;
+let previousOverflow = "";
 /**
- * Unregister a dialog from the stack when it closes.
- * If there's a parent dialog, its listeners are restored.
- *
- * @param dialogRef - Reference to the dialog element being closed
- */ function unregisterDialog(dialogRef) {
-    const index = openDialogStack.findIndex((entry)=>entry.dialogRef === dialogRef);
-    /* c8 ignore next 3 - defensive check */ if (index === -1) {
-        return;
-    }
-    // Remove listeners from the dialog being closed
-    const [removedEntry] = openDialogStack.splice(index, 1);
-    removedEntry.removeListeners();
-    // If there's a parent dialog, restore its listeners
-    if (openDialogStack.length > 0) {
-        const newTop = openDialogStack[openDialogStack.length - 1];
-        newTop.addListeners();
+ * Acquire a scroll lock. Call the returned function to release.
+ * Multiple calls stack; overflow is restored only when all locks are released.
+ */ function acquireScrollLock() {
+    scrollLockCount += 1;
+    if (scrollLockCount === 1) {
+        previousOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = "hidden";
     }
-}
-/**
- * Get the current number of open dialogs.
- * Useful for debugging and testing.
- */ function getOpenDialogCount() {
-    return openDialogStack.length;
-}
-/**
- * Check if a given dialog is the topmost (current) dialog.
- *
- * @param dialogRef - Reference to the dialog element to check
- */ function isTopmostDialog(dialogRef) {
-    if (openDialogStack.length === 0) {
-        return false;
-    }
-    return openDialogStack[openDialogStack.length - 1].dialogRef === dialogRef;
-}
-/**
- * Reset the stack (for testing purposes only).
- * @internal
- */ function _resetStackForTesting() {
-    while(openDialogStack.length > 0){
-        openDialogStack.pop();
-    }
-    ignoreFocusChanges = false;
-}
-
-;// CONCATENATED MODULE: ./src/components/Panel/PanelPortal.tsx
-
-
-
-
-
-
-/**
- * Selector for all focusable elements within a container. Based on W3C WAI-ARIA
- * practices for dialog focus management.
- */ const FOCUSABLE_SELECTOR = [
-    'a[href]:not([disabled]):not([tabindex="-1"])',
-    'button:not([disabled]):not([tabindex="-1"])',
-    'textarea:not([disabled]):not([tabindex="-1"])',
-    'input:not([disabled]):not([tabindex="-1"])',
-    'select:not([disabled]):not([tabindex="-1"])',
-    '[tabindex]:not([tabindex="-1"]):not([disabled])',
-    'audio[controls]:not([tabindex="-1"])',
-    'video[controls]:not([tabindex="-1"])',
-    'details:not([tabindex="-1"])'
-].join(", ");
-/**
- * Portal component for rendering the Panel as a modal dialog using the native
- * HTML <dialog> element with showModal(). This provides:
- * - Native focus trapping (works correctly on iPad with physical keyboard)
- * - Native ESC key handling via cancel event
- * - Native backdrop via ::backdrop pseudo-element
- * - Native inert background (no need for manual scroll lock)
- * - Top layer rendering (no need for createPortal)
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
- *
- */ function PanelPortal({ open, onClose, children, className, style, title, initialFocus = 0, kind = /* inlined export .TYPE_PANEL */ ("panel") }) {
-    const labelId = useId();
-    const descriptionId = useId();
-    const dialogRef = useRef(null);
-    const previouslyFocusedRef = useRef(null);
-    /**
-	 * Get all focusable elements within the dialog. Excludes focus sentinel
-	 * elements used for circular focus trapping.
-	 */ const getFocusableElements = useCallback(()=>{
-        /* v8 ignore start - defensive check, dialogRef is always set when open */ if (!dialogRef.current) {
-            return [];
-        }
-        /* v8 ignore stop */ const elements = dialogRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
-        return Array.from(elements).filter((el)=>el.offsetParent !== null && // Filter out hidden elements
-            !el.hasAttribute("data-focus-sentinel"));
-    }, []);
-    /**
-	 * Focus a specific element by index, or the element referenced by a ref.
-	 */ /* v8 ignore start - focus element logic with multiple branches */ const focusElement = useCallback((target)=>{
-        if (typeof target === "number") {
-            if (target === -1) {
-                // -1 means don't focus anything.
-                return;
-            }
-            const focusableElements = getFocusableElements();
-            if (focusableElements.length > 0) {
-                const index = Math.min(target, focusableElements.length - 1);
-                focusableElements[index]?.focus();
-            }
-        } else if (target?.current) {
-            target.current.focus();
-        }
-    }, [
-        getFocusableElements
-    ]);
-    /* v8 ignore stop */ /**
-	 * Handle the native cancel event (fired when ESC is pressed). This replaces
-	 * the custom keydown handler since the native dialog handles ESC
-	 * automatically.
-	 */ const handleCancel = useCallback((event)=>{
-        // Prevent the default close behavior so we can control it via onClose.
-        event.preventDefault();
-        onClose();
-    }, [
-        onClose
-    ]);
-    /**
-	 * Handle Tab key to implement circular focus trapping. Native dialog focus
-	 * trapping may not be circular in all browsers, so we manually wrap focus from
-	 * last to first element (and vice versa). Uses document-level event listener
-	 * for better iPad physical keyboard support.
-	 *
-	 * IMPORTANT: On iPad Safari with a physical keyboard, the Tab key does not
-	 * automatically navigate between focusable elements. We must manually handle
-	 * ALL Tab key presses, not just wrapping cases.
-	 *
-	 */ const handleKeyDown = useCallback((event)=>{
-        if (event.key !== "Tab" || !dialogRef.current) {
-            return;
-        }
-        const focusableElements = getFocusableElements();
-        /* v8 ignore start - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
-            event.preventDefault();
-            return;
-        }
-        /* v8 ignore stop */ const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-        const activeElement = document.activeElement;
-        // Find the current index of the focused element.
-        const currentIndex = focusableElements.indexOf(activeElement);
-        /**
-			 * Always prevent default and manually handle focus navigation. This is
-			 * required for iPad Safari with physical keyboard, where Tab key doesn't
-			 * automatically navigate between focusable elements.
-			 */ event.preventDefault();
-        if (event.shiftKey) {
-            // Shift+Tab: move to previous element, wrap to last if on first.
-            if (activeElement === firstElement || currentIndex <= 0) {
-                lastElement?.focus();
-            } else {
-                focusableElements[currentIndex - 1]?.focus();
-            }
-        } else {
-            // Tab: move to next element, wrap to first if on last.
-            if (activeElement === lastElement || currentIndex >= focusableElements.length - 1) {
-                firstElement?.focus();
-            } else {
-                focusableElements[currentIndex + 1]?.focus();
-            }
-        }
-    }, [
-        getFocusableElements
-    ]);
-    /**
-	 * Handle focus events to ensure focus stays within the dialog. This catches
-	 * focus that escapes via Tab key on iPad Safari or other means.
-	 *
-	 * Uses the dialog stack manager's ignore flag to prevent interference during
-	 * programmatic focus operations (e.g., when a nested dialog closes and returns
-	 * focus to its trigger element).
-	 *
-	 */ /* v8 ignore start - focus escape handling for iPad Safari, hard to test in jsdom */ const handleFocusIn = useCallback((event)=>{
-        // Ignore focus changes triggered by programmatic focus operations.
-        if (shouldIgnoreFocusChanges()) {
-            return;
-        }
-        if (!dialogRef.current || dialogRef.current.contains(event.target)) {
-            return;
-        }
-        // Focus escaped the dialog, bring it back.
-        const focusableElements = getFocusableElements();
-        if (focusableElements.length > 0) {
-            focusableElements[0]?.focus();
-        }
-    }, [
-        getFocusableElements
-    ]);
-    /* v8 ignore stop */ /**
-	 * Handle clicks on the backdrop (the area outside the dialog content). Native
-	 * dialog doesn't provide backdrop click handling, so we use the dialog
-	 * element's click event and check if the click target is the dialog itself
-	 * (not a child element).
-	 */ /* v8 ignore start - backdrop clicks are disabled by design in current implementation */ const handleDialogClick = useCallback((_event)=>{
-    /**
-			 * If the click is directly on the dialog element (the backdrop area), not on
-			 * any child element, then close the dialog. Currently disabled -
-			 * outsidePress is false by design. if (_event.target === dialogRef.current)
-			 * { onClose(); }
-			 */ }, []);
-    /* v8 ignore stop */ /**
-	 * Focus sentinel handler - when a sentinel element receives focus, redirect
-	 * focus to the appropriate element inside the dialog. This handles iPad
-	 * Safari's Tab key behavior which can bypass event listeners.
-	 */ const handleSentinelFocus = useCallback((position)=>{
-        const focusableElements = getFocusableElements();
-        /* v8 ignore start - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
-            return;
+    return ()=>{
+        scrollLockCount -= 1;
+        if (scrollLockCount === 0) {
+            document.documentElement.style.overflow = previousOverflow;
         }
-        /* v8 ignore stop */ if (position === "start") {
-            // Focus came from the end, wrap to last element.
-            focusableElements[focusableElements.length - 1]?.focus();
-        } else {
-            // Focus came from the start, wrap to first element.
-            focusableElements[0]?.focus();
-        }
-    }, [
-        getFocusableElements
-    ]);
-    /**
-	 * Effect to show/hide the dialog and manage focus. Uses the dialog stack
-	 * manager to coordinate listeners between nested dialogs.
-	 */ /* v8 ignore start - complex dialog lifecycle management */ useEffect(()=>{
-        const dialog = dialogRef.current;
-        /* v8 ignore start - defensive check */ if (!dialog) {
-            return;
-        }
-        /* v8 ignore stop */ // Store the currently focused element to restore later.
-        previouslyFocusedRef.current = document.activeElement;
-        // Show the dialog as a modal.
-        if (!dialog.open) {
-            dialog.showModal();
-        }
-        /**
-		 * Add cancel event listener for ESC key (always needed, not managed by
-		 * stack).
-		 */ dialog.addEventListener("cancel", handleCancel);
-        /**
-		 * Define listener management functions for the stack manager. These will be
-		 * called when this dialog becomes/stops being the topmost dialog.
-		 */ const addListeners = ()=>{
-            document.addEventListener("keydown", handleKeyDown);
-            document.addEventListener("focusin", handleFocusIn);
-        };
-        const removeListeners = ()=>{
-            document.removeEventListener("keydown", handleKeyDown);
-            document.removeEventListener("focusin", handleFocusIn);
-        };
-        /**
-		 * Register this dialog with the stack manager. This will suspend parent
-		 * dialog listeners if any exist.
-		 */ registerDialog({
-            dialogRef: dialog,
-            addListeners,
-            removeListeners
-        });
-        /**
-		 * Set initial focus after a small delay to ensure the DOM is ready. This
-		 * works around React's autoFocus prop not working with native dialog.
-		 */ const focusTimer = setTimeout(()=>{
-            focusElement(initialFocus);
-        }, 0);
-        // Capture the previously focused element for restoration in cleanup.
-        const previouslyFocused = previouslyFocusedRef.current;
-        return ()=>{
-            clearTimeout(focusTimer);
-            dialog.removeEventListener("cancel", handleCancel);
-            /**
-			 * Unregister from the stack manager. This will restore parent dialog
-			 * listeners if any exist.
-			 */ unregisterDialog(dialog);
-            // Close the dialog if it's still open.
-            if (dialog.open) {
-                dialog.close();
-            }
-            /**
-			 * Restore focus to the previously focused element if it's still in the DOM.
-			 * Use withIgnoredFocusChanges to prevent parent dialog's handleFocusIn from
-			 * interfering with focus restoration.
-			 */ if (previouslyFocused?.isConnected) {
-                withIgnoredFocusChanges(()=>{
-                    if (previouslyFocused.isConnected) {
-                        previouslyFocused.focus();
-                    }
-                });
-            }
-        };
-    }, [
-        handleCancel,
-        handleKeyDown,
-        handleFocusIn,
-        initialFocus,
-        focusElement
-    ]);
-    /* v8 ignore stop */ /* v8 ignore start - early return when panel is closed */ if (!open) {
-        return null;
-    }
-    /* v8 ignore stop */ const isMessageBox = kind === TYPE_MESSAGEBOX;
-    const dialogClass = clsx(/**
-		 * Center the dialog on screen with fixed positioning. Native dialog uses
-		 * position: fixed by default.
-		 * - Panel on mobile: inset-0 + no margin for full screen.
-		 * - Panel on desktop: inset-x-0 + top/bottom auto for vertical centering.
-		 * - MessageBox: Always centered (both mobile and desktop) since it doesn't
-		 *   take full screen.
-		 */ "fixed max-h-none max-w-none p-0", {
-        // Panel: full screen on mobile, centered on desktop
-        "inset-0 m-0 sm:inset-auto sm:inset-x-0 sm:top-1/2 sm:-translate-y-1/2 sm:mx-auto": !isMessageBox,
-        // MessageBox: always centered at all breakpoints
-        "inset-auto inset-x-0 top-1/2 -translate-y-1/2 mx-auto z-100": isMessageBox
-    }, /**
-		 * Backdrop styling via Tailwind's backdrop: variant for ::backdrop
-		 * pseudo-element. Full black on mobile, 80% opacity on desktop (matches
-		 * original overlay).
-		 */ "backdrop:bg-black sm:backdrop:bg-black/80", className);
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs("dialog", {
-        ref: dialogRef,
-        "aria-labelledby": labelId,
-        "aria-describedby": descriptionId,
-        className: dialogClass,
-        style: style,
-        onClick: handleDialogClick,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                tabIndex: 0,
-                onFocus: ()=>handleSentinelFocus("start"),
-                "data-focus-sentinel": "start",
-                style: {
-                    position: "absolute",
-                    width: 1,
-                    height: 1,
-                    padding: 0,
-                    margin: -1,
-                    overflow: "hidden",
-                    clip: "rect(0, 0, 0, 0)",
-                    whiteSpace: "nowrap",
-                    border: 0
-                },
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ jsx("span", {
-                id: labelId,
-                className: "sr-only",
-                children: title
-            }),
-            children,
-            /*#__PURE__*/ jsx("span", {
-                tabIndex: 0,
-                onFocus: ()=>handleSentinelFocus("end"),
-                "data-focus-sentinel": "end",
-                style: {
-                    position: "absolute",
-                    width: 1,
-                    height: 1,
-                    padding: 0,
-                    margin: -1,
-                    overflow: "hidden",
-                    clip: "rect(0, 0, 0, 0)",
-                    whiteSpace: "nowrap",
-                    border: 0
-                },
-                "aria-hidden": "true"
-            })
-        ]
-    }), document.body);
+    };
 }
 
-;// CONCATENATED MODULE: ./src/components/Panel/utilities.ts
+
 
 
 const getFooterAndHeaderCommonClasses = ({ blurEffect })=>{
     return clsx("absolute left-0 right-0 z-20 backdrop-brightness-50", {
-        "backdrop-blur-sm": blurEffect === /* inlined export .SMALL */ ("small"),
-        "backdrop-blur-md": blurEffect === /* inlined export .MEDIUM */ ("medium"),
-        "backdrop-blur-lg": blurEffect === /* inlined export .LARGE */ ("large"),
-        "bg-surface-darker": blurEffect === /* inlined export .NONE */ ("none")
+        "backdrop-blur-sm": blurEffect === (/* inlined export .SMALL */"small"),
+        "backdrop-blur-md": blurEffect === (/* inlined export .MEDIUM */"medium"),
+        "backdrop-blur-lg": blurEffect === (/* inlined export .LARGE */"large"),
+        "bg-surface-darker": blurEffect === (/* inlined export .NONE */"none")
     });
 };
-const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none"), hasFooter })=>{
-    const effectiveMaxHeight = maxHeight ?? (kind === /* inlined export .TYPE_PANEL */ ("panel") ? /* inlined export .LARGE */ ("large") : /* inlined export .SMALL */ ("small"));
+const getDialogClassName = ({ className, kind, borderMode, animation, maxWidth = (/* inlined export .MEDIUM */"medium"), maxHeight, blurEffect = (/* inlined export .NONE */"none"), hasFooter })=>{
+    const effectiveMaxHeight = maxHeight ?? (kind === (/* inlined export .TYPE_PANEL */"panel") ? (/* inlined export .LARGE */"large") : (/* inlined export .SMALL */"small"));
     return {
-        outerWrapper: clsx("prose prose-lighter flex flex-col bg-surface-dark overflow-hidden", {
+        outerWrapper: clsx("plume plume-lighter flex flex-col bg-surface-dark overflow-hidden", "p-0", {
             "duration-200 ease-out": animation,
             /**
 				 * Panel styles
-				 */ [`${PANEL_CLASSNAME} sm:rounded-3xl sm:border`]: kind === /* inlined export .TYPE_PANEL */ ("panel"),
+				 * border-0 resets the native <dialog> border on mobile;
+				 * sm:border restores it on desktop.
+				 */ [`${DIALOG_CLASSNAME} border-0 sm:rounded-3xl sm:border m-auto! sm:h-fit backdrop:bg-surface-darkest/80`]: kind === (/* inlined export .TYPE_PANEL */"panel"),
             /**
-				 * Widths and max widths for Panel when no className is provided
-				 */ ["w-full sm:w-[95%] md:max-w-2xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && !className && maxWidth === /* inlined export .SMALL */ ("small"),
-            ["w-full sm:w-[95%] md:max-w-3xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && !className && maxWidth === /* inlined export .MEDIUM */ ("medium"),
-            ["w-full sm:w-[95%] md:max-w-4xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && !className && maxWidth === /* inlined export .LARGE */ ("large"),
+				 * Widths and max widths for Panel
+				 */ ["w-full sm:w-[95%] md:max-w-2xl"]: kind === (/* inlined export .TYPE_PANEL */"panel") && maxWidth === (/* inlined export .SMALL */"small"),
+            ["w-full sm:w-[95%] md:max-w-3xl"]: kind === (/* inlined export .TYPE_PANEL */"panel") && maxWidth === (/* inlined export .MEDIUM */"medium"),
+            ["w-full sm:w-[95%] md:max-w-4xl"]: kind === (/* inlined export .TYPE_PANEL */"panel") && maxWidth === (/* inlined export .LARGE */"large"),
             /**
 				 * Heights and max heights for Panel
-				 * Mobile: full height (h-full works with inset-0), Desktop: shrink-to-fit with max-height constraint
-				 */ "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[40vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
-            "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[60vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
-            "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[95vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
+				 * Mobile: full viewport height
+				 * Desktop: h-auto (overridden to fit-content by the injected
+				 * stylesheet in Dialog.tsx, required for native <dialog> with
+				 * position:fixed + inset:0 + margin:auto), clamped by max-height.
+				 */ "h-dvh sm:h-auto min-h-40 sm:max-h-[40dvh]": kind === (/* inlined export .TYPE_PANEL */"panel") && effectiveMaxHeight === (/* inlined export .SMALL */"small"),
+            "h-dvh sm:h-auto min-h-40 sm:max-h-[60dvh]": kind === (/* inlined export .TYPE_PANEL */"panel") && effectiveMaxHeight === (/* inlined export .MEDIUM */"medium"),
+            "h-dvh sm:h-auto min-h-40 sm:max-h-[95dvh]": kind === (/* inlined export .TYPE_PANEL */"panel") && effectiveMaxHeight === (/* inlined export .LARGE */"large"),
             /**
 				 * Panel border colors
-				 */ "sm:border-border-dark": borderMode === "dark" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
-            "sm:border-border-accent": borderMode === "light" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
+				 */ "sm:border-border-dark": borderMode === "dark" && kind === (/* inlined export .TYPE_PANEL */"panel"),
+            "sm:border-border-accent": borderMode === "light" && kind === (/* inlined export .TYPE_PANEL */"panel"),
+            "sm:border-border-medium": borderMode === "medium" && kind === (/* inlined export .TYPE_PANEL */"panel"),
             /**
 				 * Messagebox styles
-				 */ [`${MESSAGEBOX_CLASSNAME} rounded-3xl border`]: kind === TYPE_MESSAGEBOX,
+				 */ [`${MESSAGEBOX_CLASSNAME} rounded-3xl border m-auto! backdrop:bg-surface-darkest/80`]: kind === TYPE_MESSAGEBOX,
             /**
-				 * Widths and max widths for Messagebox when no className is provided
-				 */ ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX && !className,
+				 * Widths and max widths for Messagebox
+				 */ ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX,
             /**
 				 * Heights and max heights for Messagebox
-				 */ "h-64": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
-            "h-80": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
-            "h-96": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
+				 */ "h-64": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === (/* inlined export .SMALL */"small"),
+            "h-80": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === (/* inlined export .MEDIUM */"medium"),
+            "h-96": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === (/* inlined export .LARGE */"large"),
             /**
 				 * Messagebox border colors
 				 */ "border-border-dark": borderMode === "dark" && kind === TYPE_MESSAGEBOX,
             "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
-            [`${className}`]: !!className
-        }),
-        innerWrapper: "content flex flex-col rounded-[inherit] relative min-h-full isolate",
+            "border-border-medium": borderMode === "medium" && kind === TYPE_MESSAGEBOX
+        }, className),
+        innerWrapper: "content flex flex-col rounded-[inherit] relative flex-1 min-h-0",
         scrollableContent: clsx("flex-1 overflow-y-auto overflow-x-hidden", "pt-12", {
-            "pb-12": hasFooter
+            "pb-14": hasFooter
         }),
         footer: clsx(getFooterAndHeaderCommonClasses({
             blurEffect
-        }), "p-2 bottom-0", "sm:min-h-auto h-12", {
-            "min-h-20": hasFooter && kind === /* inlined export .TYPE_PANEL */ ("panel"),
-            "sm:rounded-b-3xl": kind === /* inlined export .TYPE_PANEL */ ("panel"),
+        }), "bottom-0", "sm:min-h-auto h-12", {
+            "px-2 pt-4 pb-8 sm:pt-2 sm:pb-2": kind === (/* inlined export .TYPE_PANEL */"panel"),
+            "p-2": kind === TYPE_MESSAGEBOX,
+            "min-h-20": hasFooter && kind === (/* inlined export .TYPE_PANEL */"panel"),
+            "sm:rounded-b-3xl": kind === (/* inlined export .TYPE_PANEL */"panel"),
             "rounded-b-3xl": kind === TYPE_MESSAGEBOX
         }),
         header: clsx("flex flex-row-reverse items-center justify-between h-12", getFooterAndHeaderCommonClasses({
             blurEffect
         }), "top-0", {
-            "sm:rounded-t-3xl": kind === /* inlined export .TYPE_PANEL */ ("panel"),
+            "sm:rounded-t-3xl": kind === (/* inlined export .TYPE_PANEL */"panel"),
             "rounded-t-3xl": kind === TYPE_MESSAGEBOX
         }),
         title: "mb-0 pt-2 pl-4 pr-2 pb-2",
         closeWrapper: "pr-[18px]",
-        closeButton: clsx("flex items-center justify-center", "size-3", "p-1", "rounded-full", "border", "border-transparent", "text-[rgba(255,96,92,1)]", "bg-[rgba(255,96,92,1)]", "shadow-[0_0_0_0.5px_red]", "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-light", "hover:text-copy-dark", "focus:text-copy-dark", "active:bg-[#ba504a]", // Extended touch target using pseudo-element
+        closeButton: clsx("flex items-center justify-center", "size-3", "p-1", "rounded-full", "border", "border-transparent", "cursor-pointer", "text-[rgba(255,96,92,1)]", "bg-[rgba(255,96,92,1)]", "shadow-[0_0_0_0.5px_red]", "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-light", "hover:text-copy-dark", "focus:text-copy-dark", "active:bg-[#ba504a]", // Extended touch target using pseudo-element
         "relative", "before:content-['']", "before:absolute", "before:-top-4", "before:-right-4", "before:-bottom-4", "before:-left-4"),
         content: "p-4 rounded-3xl"
     };
 };
 
-;// CONCATENATED MODULE: ./src/components/Panel/Panel.tsx
 
 
 
 
 
-const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = /* inlined export .TYPE_PANEL */ ("panel"), className, animation = false, animationType = /* inlined export .ANIMATION_SLIDE */ ("slide"), maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none"), initialFocus })=>{
+const TABBABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const Dialog = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = (/* inlined export .TYPE_PANEL */"panel"), className, animation = false, animationType = (/* inlined export .ANIMATION_SLIDE */"slide"), maxWidth = (/* inlined export .MEDIUM */"medium"), maxHeight, blurEffect = (/* inlined export .NONE */"none"), initialFocus })=>{
+    const dialogRef = useRef(null);
     const originalTitleRef = useRef("");
-    /* v8 ignore start */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
+    const titleId = useId();
+    const descriptionId = useId();
+    /* v8 ignore start */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === (/* inlined export .ANIMATION_FADE */"fade") ? {
         opacity: 0
     } : {
         transform: "translateY(-100vh)"
     });
-    /* v8 ignore stop */ const panelClassName = getPanelClassName({
+    /* v8 ignore stop */ const dialogClassName = getDialogClassName({
         className,
         kind,
         borderMode,
@@ -566,16 +152,14 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         blurEffect,
         hasFooter: Boolean(footer)
     });
-    /**
-	 * Handle close button click.
-	 */ const handleClose = useCallback(()=>{
+    const handleClose = useCallback(()=>{
         onOpenChange(false);
     }, [
         onOpenChange
     ]);
     /**
-	 * If the panel is opened, set the document title to the panel's title. If it's
-	 * closed, restore the original document.title.
+	 * If the dialog is opened, set the document title to the dialog's title.
+	 * If it's closed, restore the original document.title.
 	 */ /* v8 ignore start - document title manipulation */ useEffect(()=>{
         if (open) {
             originalTitleRef.current = document.title;
@@ -597,16 +181,16 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
             return;
         }
         if (open) {
-            setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
+            setAnimationStyles(!animation ? {} : animationType === (/* inlined export .ANIMATION_FADE */"fade") ? {
                 opacity: 0
             } : {
-                transform: "translateY(-666vh)"
+                transform: "translateY(-100vh)"
             });
             /**
 			 * Small delay to ensure the opening state is applied after the component is
 			 * rendered.
 			 */ const timer = setTimeout(()=>{
-                setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
+                setAnimationStyles(!animation ? {} : animationType === (/* inlined export .ANIMATION_FADE */"fade") ? {
                     opacity: 1
                 } : {
                     transform: "translateY(0)"
@@ -619,75 +203,167 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         animation,
         animationType
     ]);
-    /* v8 ignore stop */ return /*#__PURE__*/ jsx(PanelPortal, {
-        open: open,
-        onClose: handleClose,
-        className: panelClassName.outerWrapper,
-        style: animationStyles,
-        title: title,
-        initialFocus: initialFocus,
-        kind: kind,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: panelClassName.innerWrapper,
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: panelClassName.header,
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            className: panelClassName.closeWrapper,
-                            children: /*#__PURE__*/ jsx("button", {
-                                className: panelClassName.closeButton,
-                                type: "button",
-                                "aria-label": "Close",
-                                onClick: handleClose,
-                                children: /*#__PURE__*/ jsx("span", {
-                                    children: /*#__PURE__*/ jsx("svg", {
-                                        xmlns: "http://www.w3.org/2000/svg",
-                                        className: "size-3",
-                                        viewBox: "0 0 384 512",
-                                        fill: "currentColor",
-                                        role: "img",
-                                        "aria-hidden": "true",
-                                        focusable: "false",
-                                        children: /*#__PURE__*/ jsx("path", {
-                                            d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
-                                            opacity: "1"
+    /* v8 ignore stop */ /**
+	 * Show/close the native dialog and manage body scroll locking.
+	 *
+	 * Uses a reference-counted scroll lock so nested dialogs work correctly:
+	 * overflow is only restored when the last open dialog closes.
+	 *
+	 * The `open` dependency is required because the Dialog component stays
+	 * mounted while the `<dialog>` element is conditionally rendered via
+	 * `{open && <dialog>}`. When `open` is false the ref is null and this
+	 * effect is a no-op. When `open` becomes true, the `<dialog>` element
+	 * is added to the DOM, the ref is populated, and this effect re-runs
+	 * to call `showModal()`.
+	 */ // biome-ignore lint/correctness/useExhaustiveDependencies: open triggers re-evaluation when <dialog> mounts/unmounts
+    useEffect(()=>{
+        const dialog = dialogRef.current;
+        /* v8 ignore start - ref is null when open is false */ if (!dialog) {
+            return;
+        }
+        /* v8 ignore stop */ /* v8 ignore start */ if (typeof dialog.showModal === "function") {
+            try {
+                dialog.showModal();
+            } catch  {
+            /* showModal can throw if already open */ }
+        }
+        const releaseScrollLock = acquireScrollLock();
+        /* v8 ignore stop */ return ()=>{
+            /* v8 ignore start */ releaseScrollLock();
+            if (dialog.open) {
+                dialog.close();
+            }
+        /* v8 ignore stop */ };
+    }, [
+        open
+    ]);
+    /**
+	 * Handle ESC key via the `cancel` event. The native `<dialog>` fires
+	 * `cancel` before closing when ESC is pressed. We prevent the default
+	 * behavior (which would natively close the dialog and cause a race
+	 * condition with React's conditional rendering) and instead let React
+	 * control the close by calling onOpenChange(false).
+	 */ // biome-ignore lint/correctness/useExhaustiveDependencies: open triggers re-evaluation when <dialog> mounts/unmounts
+    useEffect(()=>{
+        const dialog = dialogRef.current;
+        /* v8 ignore start - ref is null when open is false */ if (!dialog) {
+            return;
+        }
+        /* v8 ignore stop */ const handleCancel = (e)=>{
+            e.preventDefault();
+            handleClose();
+        };
+        dialog.addEventListener("cancel", handleCancel);
+        return ()=>{
+            dialog.removeEventListener("cancel", handleCancel);
+        };
+    }, [
+        open,
+        handleClose
+    ]);
+    /**
+	 * Manage initial focus when the dialog opens.
+	 */ // biome-ignore lint/correctness/useExhaustiveDependencies: open triggers re-evaluation when <dialog> mounts/unmounts
+    useEffect(()=>{
+        const dialog = dialogRef.current;
+        /* v8 ignore start - ref is null when open is false */ if (!dialog) {
+            return;
+        }
+        /* v8 ignore stop */ const frameId = requestAnimationFrame(()=>{
+            if (initialFocus === -1) {
+                dialog.focus();
+                return;
+            }
+            if (initialFocus !== undefined && typeof initialFocus !== "number") {
+                initialFocus.current?.focus();
+                return;
+            }
+            const focusIndex = initialFocus ?? 0;
+            const tabbable = dialog.querySelectorAll(TABBABLE_SELECTOR);
+            const target = tabbable[focusIndex];
+            if (target) {
+                target.focus();
+            }
+        });
+        return ()=>cancelAnimationFrame(frameId);
+    }, [
+        open,
+        initialFocus
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: open && /*#__PURE__*/ jsx("dialog", {
+            ref: dialogRef,
+            className: dialogClassName.outerWrapper,
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            tabIndex: -1,
+            style: {
+                ...animationStyles
+            },
+            children: /*#__PURE__*/ jsxs("div", {
+                className: dialogClassName.innerWrapper,
+                id: descriptionId,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: dialogClassName.header,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: dialogClassName.closeWrapper,
+                                children: /*#__PURE__*/ jsx("button", {
+                                    className: dialogClassName.closeButton,
+                                    type: "button",
+                                    "aria-label": "Close",
+                                    onClick: handleClose,
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        children: /*#__PURE__*/ jsx("svg", {
+                                            xmlns: "http://www.w3.org/2000/svg",
+                                            className: "size-3",
+                                            viewBox: "0 0 384 512",
+                                            fill: "currentColor",
+                                            role: "img",
+                                            "aria-hidden": "true",
+                                            focusable: "false",
+                                            children: /*#__PURE__*/ jsx("path", {
+                                                d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
+                                                opacity: "1"
+                                            })
                                         })
                                     })
                                 })
+                            }),
+                            /*#__PURE__*/ jsx("h1", {
+                                className: dialogClassName.title,
+                                id: titleId,
+                                children: title
                             })
-                        }),
-                        /*#__PURE__*/ jsx("h1", {
-                            className: panelClassName.title,
-                            children: title
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: dialogClassName.scrollableContent,
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: dialogClassName.content,
+                            children: children
                         })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    className: panelClassName.scrollableContent,
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: panelClassName.content,
-                        children: children
+                    }),
+                    footer && /*#__PURE__*/ jsx("div", {
+                        className: dialogClassName.footer,
+                        children: footer
                     })
-                }),
-                footer && /*#__PURE__*/ jsx("div", {
-                    className: panelClassName.footer,
-                    children: footer
-                })
-            ]
+                ]
+            })
         })
     });
 };
 
-;// CONCATENATED MODULE: ./src/components/index.ts
+// @v8-ignore-start
 
 
 
-var __webpack_exports__ANIMATION_FADE = /* inlined export .ANIMATION_FADE */ ("fade");
-var __webpack_exports__ANIMATION_SLIDE = /* inlined export .ANIMATION_SLIDE */ ("slide");
-var __webpack_exports__LARGE = /* inlined export .LARGE */ ("large");
-var __webpack_exports__MEDIUM = /* inlined export .MEDIUM */ ("medium");
-var __webpack_exports__NONE = /* inlined export .NONE */ ("none");
-var __webpack_exports__SMALL = /* inlined export .SMALL */ ("small");
-var __webpack_exports__TYPE_PANEL = /* inlined export .TYPE_PANEL */ ("panel");
-export { MESSAGEBOX_CLASSNAME, PANEL_CLASSNAME, Panel, TYPE_MESSAGEBOX, __webpack_exports__ANIMATION_FADE as ANIMATION_FADE, __webpack_exports__ANIMATION_SLIDE as ANIMATION_SLIDE, __webpack_exports__LARGE as LARGE, __webpack_exports__MEDIUM as MEDIUM, __webpack_exports__NONE as NONE, __webpack_exports__SMALL as SMALL, __webpack_exports__TYPE_PANEL as TYPE_PANEL };
+var components_ANIMATION_FADE = (/* inlined export .ANIMATION_FADE */"fade");
+var components_ANIMATION_SLIDE = (/* inlined export .ANIMATION_SLIDE */"slide");
+var components_LARGE = (/* inlined export .LARGE */"large");
+var components_MEDIUM = (/* inlined export .MEDIUM */"medium");
+var components_NONE = (/* inlined export .NONE */"none");
+var components_SMALL = (/* inlined export .SMALL */"small");
+var components_TYPE_PANEL = (/* inlined export .TYPE_PANEL */"panel");
+export { DIALOG_CLASSNAME, Dialog, MESSAGEBOX_CLASSNAME, TYPE_MESSAGEBOX, components_ANIMATION_FADE as ANIMATION_FADE, components_ANIMATION_SLIDE as ANIMATION_SLIDE, components_LARGE as LARGE, components_MEDIUM as MEDIUM, components_NONE as NONE, components_SMALL as SMALL, components_TYPE_PANEL as TYPE_PANEL };