@almadar/ui 5.159.0 → 5.160.0

package/dist/avl/index.cjs

@@ -28888,8 +28888,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -29317,7 +29317,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -29348,11 +29352,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -29371,7 +29383,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -29381,7 +29393,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -44901,16 +44919,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }

package/dist/avl/index.js

@@ -28812,8 +28812,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -29241,7 +29241,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -29272,11 +29276,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -29295,7 +29307,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -29305,7 +29317,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -44825,16 +44843,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }

package/dist/components/index.cjs

@@ -24301,8 +24301,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -24730,7 +24730,11 @@ function DataList({
           exports.Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -24761,11 +24765,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      exports.Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -24784,7 +24796,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -24794,7 +24806,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -44299,16 +44317,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        exports.Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, document.body);
     };
     exports.DetailPanel.displayName = "DetailPanel";
   }

package/dist/components/index.js

@@ -24226,8 +24226,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -24655,7 +24655,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -24686,11 +24690,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -24709,7 +24721,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -24719,7 +24731,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -44224,16 +44242,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }

package/dist/providers/index.cjs

@@ -26614,8 +26614,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -27043,7 +27043,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -27074,11 +27078,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -27097,7 +27109,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -27107,7 +27119,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -43036,16 +43054,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }

package/dist/providers/index.js

@@ -26540,8 +26540,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -26969,7 +26969,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -27000,11 +27004,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -27023,7 +27035,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -27033,7 +27045,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -42962,16 +42980,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }

package/dist/runtime/index.cjs

@@ -26179,8 +26179,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -26608,7 +26608,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -26639,11 +26643,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -26662,7 +26674,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -26672,7 +26684,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -42399,16 +42417,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }

package/dist/runtime/index.js

@@ -26105,8 +26105,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -26534,7 +26534,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -26565,11 +26569,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -26588,7 +26600,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -26598,7 +26610,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -42325,16 +42343,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.159.0",
+  "version": "5.160.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.69.0",
+    "@almadar/core": "^10.70.0",
     "@almadar/evaluator": "^2.42.0",
     "@almadar/logger": "^1.11.0",
-    "@almadar/runtime": "^6.60.0",
-    "@almadar/std": "^16.185.0",
+    "@almadar/runtime": "^6.61.0",
+    "@almadar/std": "^16.188.0",
     "@almadar/syntax": "^1.15.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",