@almadar/ui 3.5.0 → 3.5.2

package/dist/avl/index.cjs

@@ -11041,38 +11041,16 @@ var init_MapView = __esm({
   }
 });
 function ButtonPattern({
-  label,
-  variant = "primary",
-  size = "md",
-  disabled = false,
+  action,
   onClick,
   event,
   icon,
-  iconPosition = "left",
-  className
+  iconPosition,
+  ...rest
 }) {
-  const { emit } = useEventBus();
-  const eventName = onClick ?? event;
-  const handleClick = () => {
-    if (eventName && !disabled) {
-      emit(`UI:${eventName}`, {});
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Button,
-    {
-      variant,
-      size,
-      disabled,
-      onClick: handleClick,
-      className,
-      children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm" }),
-        label,
-        icon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm" })
-      ]
-    }
-  );
+  const resolvedAction = action ?? onClick ?? event;
+  const iconProps = iconPosition === "right" ? { iconRight: icon } : { icon };
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { ...rest, action: resolvedAction, ...iconProps });
 }
 function TextPattern({
   content,
@@ -46194,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,
@@ -46235,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,
@@ -46267,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",
@@ -46280,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,
@@ -46287,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({
@@ -46408,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,
@@ -46425,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,
@@ -46436,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,
@@ -46447,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,
@@ -46470,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":
@@ -46480,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;
@@ -46493,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",
@@ -46512,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

@@ -10995,38 +10995,16 @@ var init_MapView = __esm({
   }
 });
 function ButtonPattern({
-  label,
-  variant = "primary",
-  size = "md",
-  disabled = false,
+  action,
   onClick,
   event,
   icon,
-  iconPosition = "left",
-  className
+  iconPosition,
+  ...rest
 }) {
-  const { emit } = useEventBus();
-  const eventName = onClick ?? event;
-  const handleClick = () => {
-    if (eventName && !disabled) {
-      emit(`UI:${eventName}`, {});
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant,
-      size,
-      disabled,
-      onClick: handleClick,
-      className,
-      children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }),
-        label,
-        icon && iconPosition === "right" && /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" })
-      ]
-    }
-  );
+  const resolvedAction = action ?? onClick ?? event;
+  const iconProps = iconPosition === "right" ? { iconRight: icon } : { icon };
+  return /* @__PURE__ */ jsx(Button, { ...rest, action: resolvedAction, ...iconProps });
 }
 function TextPattern({
   content,
@@ -46148,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,
@@ -46189,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,
@@ -46221,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",
@@ -46234,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,
@@ -46241,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({
@@ -46362,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,
@@ -46379,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,
@@ -46390,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,
@@ -46401,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,
@@ -46424,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":
@@ -46434,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;
@@ -46447,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",
@@ -46466,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

@@ -6398,38 +6398,16 @@ var init_MapView = __esm({
   }
 });
 function ButtonPattern({
-  label,
-  variant = "primary",
-  size = "md",
-  disabled = false,
+  action,
   onClick,
   event,
   icon,
-  iconPosition = "left",
-  className
+  iconPosition,
+  ...rest
 }) {
-  const { emit } = useEventBus();
-  const eventName = onClick ?? event;
-  const handleClick = () => {
-    if (eventName && !disabled) {
-      emit(`UI:${eventName}`, {});
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    exports.Button,
-    {
-      variant,
-      size,
-      disabled,
-      onClick: handleClick,
-      className,
-      children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon, size: "sm" }),
-        label,
-        icon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon, size: "sm" })
-      ]
-    }
-  );
+  const resolvedAction = action ?? onClick ?? event;
+  const iconProps = iconPosition === "right" ? { iconRight: icon } : { icon };
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { ...rest, action: resolvedAction, ...iconProps });
 }
 function TextPattern({
   content,
@@ -37158,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,
@@ -37199,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,
@@ -37231,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",
@@ -37244,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,
@@ -37251,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({
@@ -37372,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,
@@ -37389,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,
@@ -37400,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,
@@ -37411,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,
@@ -37434,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":
@@ -37444,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;
@@ -37457,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",
@@ -37476,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);
 }