@versini/ui-panel 8.0.1 → 8.0.3

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-panel v8.0.1
+  @versini/ui-panel v8.0.3
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_PANEL__) {
     window.__VERSINI_UI_PANEL__ = {
-      version: "8.0.1",
-      buildTime: "12/17/2025 07:04 PM EST",
+      version: "8.0.3",
+      buildTime: "12/18/2025 01:20 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-panel",
       license: "MIT",
     };
@@ -152,6 +152,7 @@ const NONE = "none";
 
 
 
+
 /**
  * Selector for all focusable elements within a container. Based on W3C WAI-ARIA
  * practices for dialog focus management.
@@ -178,7 +179,7 @@ const NONE = "none";
  * @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 }) {
+ */ 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);
@@ -404,12 +405,20 @@ const NONE = "none";
     /* c8 ignore next 3 - early return when panel is closed */ if (!open) {
         return null;
     }
+    const isMessageBox = kind === TYPE_MESSAGEBOX;
     const dialogClass = clsx(/**
 		 * Center the dialog on screen with fixed positioning. Native dialog uses
-		 * position: fixed by default. On mobile: inset-0 + no margin for full screen.
-		 * On desktop: inset-x-0 + top/bottom auto for vertical centering with
-		 * shrink-to-fit.
-		 */ "fixed inset-0 m-0 sm:inset-auto sm:inset-x-0 sm:top-1/2 sm:-translate-y-1/2 sm:mx-auto max-h-none max-w-none p-0", /**
+		 * 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": isMessageBox
+    }, /**
 		 * Backdrop styling via Tailwind's backdrop: variant for ::backdrop
 		 * pseudo-element. Full black on mobile, 80% opacity on desktop (matches
 		 * original overlay).
@@ -517,7 +526,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
             "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
             [`${className}`]: !!className
         }),
-        innerWrapper: "content flex flex-col rounded-[inherit] relative min-h-full",
+        innerWrapper: "content flex flex-col rounded-[inherit] relative min-h-full isolate",
         scrollableContent: clsx("flex-1 overflow-y-auto overflow-x-hidden", "pt-12", {
             "pb-12": hasFooter
         }),
@@ -625,6 +634,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         style: animationStyles,
         title: title,
         initialFocus: initialFocus,
+        kind: kind,
         children: /*#__PURE__*/ jsxs("div", {
             className: panelClassName.innerWrapper,
             children: [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "8.0.1",
+	"version": "8.0.3",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -52,5 +52,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "9fa7c53e84b8f40adefbe63becd4841af772753a"
+	"gitHead": "85dddca8a2963c870561074ab749741649d1d989"
 }