@almadar/ui 3.5.0 → 3.5.2

package/dist/components/index.js

@@ -6353,38 +6353,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,
@@ -37113,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,
@@ -37154,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,
@@ -37186,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",
@@ -37199,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,
@@ -37206,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({
@@ -37327,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,
@@ -37344,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,
@@ -37355,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,
@@ -37366,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,
@@ -37389,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":
@@ -37399,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;
@@ -37412,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",
@@ -37431,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/components/organisms/ComponentPatterns.d.ts

@@ -9,7 +9,8 @@
  * @packageDocumentation
  */
 import React from 'react';
-import { type ButtonVariant, type ButtonSize } from '../atoms/Button';
+import type { EventKey, EventPayload } from '@almadar/core';
+import { type ButtonProps } from '../atoms/Button';
 import { type BadgeVariant } from '../atoms/Badge';
 import { type AlertVariant } from '../molecules/Alert';
 import { type MapViewProps } from '../molecules/MapView';
@@ -22,36 +23,54 @@ interface ClosedCircuitProps {
     error?: Error | null;
     entity?: string;
 }
-export interface ButtonPatternProps extends ClosedCircuitProps {
-    label: string;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    disabled?: boolean;
-    onClick?: string;
-    event?: string;
-    icon?: string;
+/**
+ * Props for {@link ButtonPattern}. A thin pass-through over the Button
+ * atom: accepts every Button prop plus wrapper-level aliases for the
+ * `.orb` schema convention (`action`/`event`/`onClick` as string
+ * event names, `iconPosition` for left/right icon placement).
+ *
+ * Anything not explicitly named is forwarded to `<Button>` via rest-spread,
+ * so a future Button prop lands automatically without needing a wrapper
+ * edit. This is the contract that fixes VG17: `action: EventKey` flows
+ * through to Button, which owns both `UI:{action}` emit AND the
+ * `data-testid="action-{NAME}"` attribute the verifier selects on.
+ */
+export interface ButtonPatternProps extends Omit<ButtonProps, 'onClick'>, ClosedCircuitProps {
+    /** Legacy alias for {@link ButtonProps.action} (string event name). */
+    onClick?: EventKey;
+    /** Legacy alias for {@link ButtonProps.action}. */
+    event?: EventKey;
+    /** Icon placement — maps to Button's `icon` (left) or `iconRight` (right). */
     iconPosition?: 'left' | 'right';
-    className?: string;
 }
 /**
- * Button pattern that emits events via the event bus.
+ * Button pattern — thin pass-through to the Button atom.
+ *
+ * Prior to VG17 this wrapper owned a local event-bus emit and
+ * hand-enumerated only a narrow slice of props, silently dropping
+ * every prop outside that list (including the Pre-Phase `action:
+ * EventKey`). The atom already handles emit + data-testid via its
+ * `action` prop, so the wrapper simply forwards everything.
  */
-export declare function ButtonPattern({ label, variant, size, disabled, onClick, event, icon, iconPosition, className, }: ButtonPatternProps): React.ReactElement;
+export declare function ButtonPattern({ action, onClick, event, icon, iconPosition, ...rest }: ButtonPatternProps): React.ReactElement;
 export declare namespace ButtonPattern {
     var displayName: string;
 }
-export interface IconButtonPatternProps extends ClosedCircuitProps {
+export interface IconButtonPatternProps extends Omit<ButtonProps, 'onClick'>, ClosedCircuitProps {
     icon: string;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    onClick?: string;
     ariaLabel?: string;
-    className?: string;
+    /** Legacy alias for {@link ButtonProps.action}. */
+    onClick?: EventKey;
+    /** Legacy alias for {@link ButtonProps.action}. */
+    event?: EventKey;
 }
 /**
- * Icon-only button pattern.
+ * Icon-only button pattern — pass-through to the Button atom with a
+ * mandatory icon and optional aria-label. Same VG17 fix as
+ * {@link ButtonPattern}: `action` forwards to the atom, which owns the
+ * emit + data-testid.
  */
-export declare function IconButtonPattern({ icon, variant, size, onClick, ariaLabel, className, }: IconButtonPatternProps): React.ReactElement;
+export declare function IconButtonPattern({ action, onClick, event, icon, ariaLabel, variant, ...rest }: IconButtonPatternProps): React.ReactElement;
 export declare namespace IconButtonPattern {
     var displayName: string;
 }
@@ -59,13 +78,24 @@ export interface LinkPatternProps extends ClosedCircuitProps {
     label: string;
     href?: string;
     external?: boolean;
-    onClick?: string;
+    /** Event key emitted on click (intercepts native navigation when set). */
+    action?: EventKey;
+    /** Legacy alias for action. */
+    onClick?: EventKey;
+    /** Legacy alias for action. */
+    event?: EventKey;
+    /** Payload for the dispatched event. */
+    actionPayload?: EventPayload;
     className?: string;
 }
 /**
- * Link pattern for navigation.
+ * Link pattern for navigation. When an event key is provided via
+ * `action` / `onClick` / `event`, intercepts the native `<a>`
+ * navigation and emits `UI:{action}` with the `href` in the payload.
+ * Sets `data-testid="action-{NAME}"` so the verifier's click-path
+ * gate can select it symmetrically with Button.
  */
-export declare function LinkPattern({ label, href, external, onClick, className, }: LinkPatternProps): React.ReactElement;
+export declare function LinkPattern({ label, href, external, action, onClick, event, actionPayload, className, }: LinkPatternProps): React.ReactElement;
 export declare namespace LinkPattern {
     var displayName: string;
 }

package/dist/providers/index.cjs

@@ -8029,38 +8029,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,
@@ -37667,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,
@@ -37708,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,
@@ -37740,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",
@@ -37753,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,
@@ -37760,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({
@@ -37881,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,
@@ -37898,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,
@@ -37909,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,
@@ -37920,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,
@@ -37943,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":
@@ -37953,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;
@@ -37966,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",
@@ -37985,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);
 }