@almadar/ui 3.5.1 → 3.5.2

package/dist/avl/index.cjs

@@ -46172,11 +46172,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -46213,6 +46215,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46245,7 +46248,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46258,6 +46261,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46265,9 +46269,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -46386,12 +46390,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46403,6 +46409,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46414,6 +46421,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46425,6 +46433,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46448,6 +46457,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -46458,7 +46469,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -46471,12 +46482,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46490,17 +46501,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
   return reactDom.createPortal(wrapper, portalRoot);
 }

package/dist/avl/index.js

@@ -46126,11 +46126,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -46167,6 +46169,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46199,7 +46202,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46212,6 +46215,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46219,9 +46223,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -46340,12 +46344,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46357,6 +46363,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46368,6 +46375,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46379,6 +46387,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46402,6 +46411,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -46412,7 +46423,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -46425,12 +46436,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46444,17 +46455,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
   return createPortal(wrapper, portalRoot);
 }

package/dist/components/index.cjs

@@ -37136,11 +37136,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -37177,6 +37179,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37209,7 +37212,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37222,6 +37225,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37229,9 +37233,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -37350,12 +37354,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37367,6 +37373,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37378,6 +37385,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37389,6 +37397,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37412,6 +37421,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -37422,7 +37433,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -37435,12 +37446,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37454,17 +37465,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent });
   }
   return reactDom.createPortal(wrapper, portalRoot);
 }

package/dist/components/index.js

@@ -37091,11 +37091,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -37132,6 +37134,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37164,7 +37167,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37177,6 +37180,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37184,9 +37188,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -37305,12 +37309,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37322,6 +37328,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37333,6 +37340,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37344,6 +37352,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37367,6 +37376,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -37377,7 +37388,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -37390,12 +37401,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37409,17 +37420,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
   return createPortal(wrapper, portalRoot);
 }

package/dist/providers/index.cjs

@@ -37645,11 +37645,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -37686,6 +37688,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37718,7 +37721,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37731,6 +37734,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37738,9 +37742,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -37859,12 +37863,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37876,6 +37882,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37887,6 +37894,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37898,6 +37906,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37921,6 +37930,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -37931,7 +37942,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -37944,12 +37955,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37963,17 +37974,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
   return reactDom.createPortal(wrapper, portalRoot);
 }

package/dist/providers/index.js

@@ -37600,11 +37600,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -37641,6 +37643,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37673,7 +37676,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37686,6 +37689,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37693,9 +37697,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -37814,12 +37818,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37831,6 +37837,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37842,6 +37849,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37853,6 +37861,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37876,6 +37885,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -37886,7 +37897,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -37899,12 +37910,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37918,17 +37929,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
   return createPortal(wrapper, portalRoot);
 }

package/dist/runtime/index.cjs

@@ -37217,11 +37217,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -37258,6 +37260,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37290,7 +37293,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37303,6 +37306,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37310,9 +37314,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -37431,12 +37435,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37448,6 +37454,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37459,6 +37466,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37470,6 +37478,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37493,6 +37502,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -37503,7 +37514,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -37516,12 +37527,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37535,17 +37546,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
   return reactDom.createPortal(wrapper, portalRoot);
 }

package/dist/runtime/index.js

@@ -37172,11 +37172,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -37213,6 +37215,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37245,7 +37248,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37258,6 +37261,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37265,9 +37269,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -37386,12 +37390,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37403,6 +37409,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37414,6 +37421,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37425,6 +37433,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37448,6 +37457,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -37458,7 +37469,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -37471,12 +37482,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37490,17 +37501,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
   return createPortal(wrapper, portalRoot);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",