@12-apps/ui 6.39.13 → 6.39.15

package/dist/{chunk-3333KCAW.js → chunk-P22W4N5K.js}

@@ -4,7 +4,7 @@ import {
 import {
   Dialog,
   DialogContent
-} from "./chunk-UEROWH53.js";
+} from "./chunk-GAMLBJE6.js";
 import {
   default as default2
 } from "./chunk-WEBEOBN5.js";
@@ -69,4 +69,4 @@ function DeleteViewDialog({
 export {
   DeleteViewDialog
 };
-//# sourceMappingURL=chunk-3333KCAW.js.map
+//# sourceMappingURL=chunk-P22W4N5K.js.map

package/dist/{chunk-IYF246UA.js → chunk-SA65SDOY.js}

@@ -16,7 +16,7 @@ import {
 import {
   Dialog,
   DialogContent
-} from "./chunk-UEROWH53.js";
+} from "./chunk-GAMLBJE6.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -268,4 +268,4 @@ function SaveViewModal({
 export {
   SaveViewModal
 };
-//# sourceMappingURL=chunk-IYF246UA.js.map
+//# sourceMappingURL=chunk-SA65SDOY.js.map

package/dist/{chunk-ZNDDILNQ.js → chunk-UBEAJFMW.js}

@@ -1,6 +1,6 @@
 import {
   DeleteViewDialog
-} from "./chunk-3333KCAW.js";
+} from "./chunk-P22W4N5K.js";
 import {
   DataViewsGrid
 } from "./chunk-5WT4YWXC.js";
@@ -10,7 +10,7 @@ import {
 import {
   ViewDialogs,
   ViewMutationErrorAlert
-} from "./chunk-INMKA5SF.js";
+} from "./chunk-ARDLCGBK.js";
 import {
   useSavedViewsController
 } from "./chunk-HR7YTBR7.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-ZNDDILNQ.js.map
+//# sourceMappingURL=chunk-UBEAJFMW.js.map

package/dist/{chunk-DXZOSP6P.js → chunk-WVJGNIJZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-QXSV7Z57.js";
 import {
   Dialog
-} from "./chunk-UEROWH53.js";
+} from "./chunk-GAMLBJE6.js";
 import {
   Button
 } from "./chunk-HM2JJNUE.js";
@@ -166,4 +166,4 @@ AppHeaderDetails.displayName = "AppHeaderDetails";
 export {
   AppHeaderDetails
 };
-//# sourceMappingURL=chunk-DXZOSP6P.js.map
+//# sourceMappingURL=chunk-WVJGNIJZ.js.map

package/dist/{chunk-ECIHOZPK.js → chunk-WWGD5YVW.js}

@@ -7,7 +7,7 @@ import {
 import {
   Dialog,
   DialogContent
-} from "./chunk-UEROWH53.js";
+} from "./chunk-GAMLBJE6.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-ECIHOZPK.js.map
+//# sourceMappingURL=chunk-WWGD5YVW.js.map

package/dist/{chunk-5OUEKIWQ.js → chunk-ZGWEFOW6.js}

@@ -32,6 +32,7 @@ import Popover from "@mui/material/Popover/index.js";
 import { alpha, styled } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var hasBadge = (badge) => badge !== void 0 && badge !== null && badge !== "" && badge !== 0;
 var StyledListItem = styled(ListItem, {
   shouldForwardProp: (prop) => !["variant", "active", "size", "level"].includes(prop)
 })(
@@ -130,10 +131,11 @@ var MenuItemLabel = ({ item, collapsed, open, hasChildren, size, variant }) => /
       }
     }
   ),
-  item.badge && /* @__PURE__ */ jsx(
+  hasBadge(item.badge) && /* @__PURE__ */ jsx(
     Box,
     {
       component: "span",
+      "data-testid": `navigation-menu-badge-${item.id}`,
       sx: {
         flexShrink: 0,
         display: "inline-flex",
@@ -311,4 +313,4 @@ var renderMenuItem = (item, variant = "vertical", size = "md", collapsed = false
 export {
   renderMenuItem
 };
-//# sourceMappingURL=chunk-5OUEKIWQ.js.map
+//# sourceMappingURL=chunk-ZGWEFOW6.js.map

package/dist/chunk-ZGWEFOW6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationMenuItem.tsx"],"sourcesContent":["import ChevronRight from '@mui/icons-material/ChevronRight';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Grow from '@mui/material/Grow/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React, {  } from 'react';\n\nimport { useMenuItemState } from './NavigationMenuItem.hooks';\nimport { navItemButtonStyles, pulseGlow } from './NavigationMenu.styles';\nimport type { NavigationMenuItem } from './NavigationMenu.types';\nimport { onMedia, shadowInk, uiInk } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n// A numeric or empty-string zero is treated the way the package's own Badge\n// treats a zero count by default (`Badge.helpers.ts`'s `showZero: false`):\n// hidden. `badge && …` prints a bare \"0\" text node for `badge: 0`, because\n// `0 && …` evaluates to the falsy `0` itself rather than `false`. A caller\n// who wants a visible zero passes the string `'0'`, which is truthy here.\nconst hasBadge = (badge: NavigationMenuItem['badge']): boolean =>\n  badge !== undefined && badge !== null && badge !== '' && badge !== 0;\n\nconst StyledListItem = styled(ListItem, {\n  shouldForwardProp: (prop) => !['variant', 'active', 'size', 'level'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; level?: number }>(\n  ({ theme, variant, level = 0 }) => ({\n    padding: 0,\n    ...(variant === 'horizontal' && {\n      width: 'auto' }),\n    ...(level > 0 && {\n      paddingLeft: theme.spacing(2 * level) }) }),\n);\n\nconst StyledListItemButton = styled(ListItemButton, {\n  shouldForwardProp: (prop) => !['variant', 'active', 'size', 'collapsed', 'minimal'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; collapsed?: boolean; minimal?: boolean }>(\n  ({ theme, variant, active, size, collapsed, minimal }) => ({\n    ...navItemButtonStyles({ theme, variant, active, size, collapsed, minimal }) }),\n);\n\ninterface MenuItemRendererProps {\n  item: NavigationMenuItem;\n  variant: string;\n  size: string;\n  collapsed: boolean;\n  minimal: boolean;\n  level: number;\n  onItemClick?: (item: NavigationMenuItem) => void;\n}\n\n// Hover intent and open/anchor state live in NavigationMenuItem.hooks.\n\n// The flyout a horizontal menu opens on hover.\nconst MenuItemPopover: React.FC<{\n  anchorEl: HTMLElement | null;\n  item: NavigationMenuItem;\n  size?: string;\n  minimal?: boolean;\n  onClose: () => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n  onItemClick?: (item: NavigationMenuItem) => void;\n}> = ({ anchorEl, item, size, minimal, onClose, onMouseEnter, onMouseLeave, onItemClick }) => (\n  <Popover\n    open={Boolean(anchorEl)}\n    anchorEl={anchorEl}\n    onClose={onClose}\n    anchorOrigin={{\n      vertical: 'bottom',\n      horizontal: 'left' }}\n    transformOrigin={{\n      vertical: 'top',\n      horizontal: 'left' }}\n    disableRestoreFocus\n    sx={{\n      pointerEvents: 'none' }}\n    slotProps={{\n      paper: {\n        onMouseEnter,\n        onMouseLeave,\n        sx: {\n          pointerEvents: 'auto',\n          mt: 0.5,\n          borderRadius: 2,\n          boxShadow: (theme) => `0 ${rems(theme, 12, 40)} ${shadowInk(theme, 0.15)}`,\n          border: (theme) => `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n          background: (theme) =>\n            `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,\n          backdropFilter: (theme) => `blur(${rem(theme, 10)})`,\n          minWidth: sxRem(200) } } }}\n  >\n    <List sx={{ p: 1 }}>\n      {item.children?.map((child) => {\n        const childHasChildren = child.children && child.children.length > 0;\n\n        // Only close popover when clicking leaf nodes (items without children)\n        if (childHasChildren) {\n          return renderMenuItem(child, 'vertical', size, false, minimal, 0, onItemClick);\n        }\n\n        // For leaf nodes, wrap with onClick to close the popover\n        return (\n          <Box\n            key={child.id}\n            onClick={onClose}\n          >\n            {renderMenuItem(child, 'vertical', size, false, minimal, 0, onItemClick)}\n          </Box>\n        );\n      })}\n    </List>\n  </Popover>\n);\n\n// Label, badge/chip and the expand chevron, faded out when the rail collapses.\nconst MenuItemLabel: React.FC<{\n  item: NavigationMenuItem;\n  collapsed?: boolean;\n  minimal?: boolean;\n  open: boolean;\n  hasChildren?: boolean;\n  size?: string;\n  variant?: string;\n}> = ({ item, collapsed, open, hasChildren, size, variant }) => (\n  <Fade in={!collapsed} timeout={400}>\n    <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', gap: 1 }}>\n      <ListItemText\n        primary={item.label}\n        secondary={item.description}\n        sx={{\n          flex: 1,\n          minWidth: 0, // Allows text truncation if needed\n        }}\n        slotProps={{\n          primary: {\n            variant: size === 'sm' ? 'body2' : size === 'lg' ? 'h6' : 'body1',\n            sx: {\n              fontWeight: item.active ? 600 : 400,\n              transition: 'all 0.3s ease' } },\n          secondary: {\n            sx: {\n              opacity: 0.7,\n              transition: 'all 0.3s ease' } } }}\n      />\n      {hasBadge(item.badge) && (\n        <Box\n          component=\"span\"\n          data-testid={`navigation-menu-badge-${item.id}`}\n          sx={{\n            flexShrink: 0,\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            minWidth: sxRem(20),\n            height: sxRem(20),\n            px: 0.75,\n            borderRadius: sxRem(10),\n            fontSize: sxRem(12),\n            fontWeight: 600,\n            color: (theme) => onMedia(theme),\n            background: (theme) =>\n              `linear-gradient(135deg, ${uiInk(theme).attention.from} 0%, ${uiInk(theme).attention.to} 100%)`,\n            boxShadow: (theme) => `0 ${rems(theme, 2, 8)} ${alpha(uiInk(theme).attention.glow, 0.4)}`,\n            animation: (theme) =>\n              typeof item.badge === 'number' && item.badge > 0\n                ? `${pulseGlow(theme)} 2s infinite`\n                : 'none' }}\n        >\n          {item.badge}\n        </Box>\n      )}\n      {hasChildren && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            flexShrink: 0, // Prevents expand icon from shrinking\n            transition: 'transform 0.3s ease',\n            transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}\n        >\n          {variant === 'horizontal' ? <ChevronRight fontSize=\"small\" /> : <ExpandMore />}\n        </Box>\n      )}\n    </Box>\n  </Fade>\n);\n\n// The row itself: icon, label, badge and the expand chevron.\nconst MenuItemContent: React.FC<{\n  item: NavigationMenuItem;\n  variant?: string;\n  size?: string;\n  active?: boolean;\n  collapsed?: boolean;\n  minimal?: boolean;\n  level: number;\n  open: boolean;\n  hasChildren?: boolean;\n  onClick: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n}> = ({\n  item,\n  variant,\n  size,\n  active: _active,\n  collapsed,\n  minimal,\n  level,\n  open,\n  hasChildren,\n  onClick,\n  onMouseEnter,\n  onMouseLeave }) => (\n<StyledListItem key={item.id} variant={variant} active={item.active} size={size} level={level}>\n      <StyledListItemButton\n        variant={variant}\n        active={item.active}\n        size={size}\n        collapsed={collapsed}\n        minimal={minimal}\n        disabled={item.disabled}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...(item.href && !hasChildren\n          ? {\n              component: 'a' as React.ElementType,\n              href: item.href,\n              target: item.target }\n          : {})}\n      >\n        {item.icon && (\n          <ListItemIcon\n            sx={{\n              minWidth: collapsed ? 0 : sxRem(40),\n              justifyContent: 'center',\n              transition: 'all 0.3s ease',\n              '& svg': {\n                filter: (theme) => (item.active ? `drop-shadow(0 ${rems(theme, 2, 8)} ${shadowInk(theme, 0.15)})` : 'none'),\n                transition: 'all 0.3s ease' } }}\n          >\n            <Grow in={true} timeout={600}>\n              <Box>{item.icon}</Box>\n            </Grow>\n          </ListItemIcon>\n        )}\n        {!collapsed && (\n          <MenuItemLabel\n            item={item}\n            collapsed={collapsed}\n            minimal={minimal}\n            open={open}\n            hasChildren={hasChildren}\n            size={size}\n            variant={variant}\n          />\n        )}\n      </StyledListItemButton>\n    </StyledListItem>\n);\n\nconst MenuItemRenderer: React.FC<MenuItemRendererProps> = ({\n  item,\n  variant,\n  size,\n  collapsed,\n  minimal,\n  level,\n  onItemClick }) => {\n  const {\n    open,\n    anchorEl,\n    hasChildren,\n    handleClick,\n    handleMouseEnter,\n    handleMouseLeave,\n    handlePopoverMouseEnter,\n    handlePopoverMouseLeave,\n    closePopover } = useMenuItemState({ item, variant, onItemClick });\n\n  const itemContent = (\n    <MenuItemContent\n      item={item}\n      variant={variant}\n      size={size}\n      active={item.active}\n      collapsed={collapsed}\n      minimal={minimal}\n      level={level}\n      open={open}\n      hasChildren={hasChildren}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    />\n  );\n\n  // Horizontal variant with children - use Popover\n  if (hasChildren && variant === 'horizontal') {\n    return (\n      <React.Fragment key={item.id}>\n        {itemContent}\n        <MenuItemPopover\n          anchorEl={anchorEl}\n          item={item}\n          size={size}\n          minimal={minimal}\n          onClose={closePopover}\n          onMouseEnter={handlePopoverMouseEnter}\n          onMouseLeave={handlePopoverMouseLeave}\n          onItemClick={onItemClick}\n        />\n      </React.Fragment>\n    );\n  }\n\n  // Vertical variant with children - use Collapse\n  if (hasChildren && variant !== 'horizontal') {\n    return (\n      <React.Fragment key={item.id}>\n        {itemContent}\n        {!collapsed && (\n          <Collapse in={open} timeout=\"auto\" unmountOnExit>\n            <List component=\"div\" disablePadding>\n              {item.children?.map((child) =>\n                renderMenuItem(child, variant, size, collapsed, minimal, level + 1, onItemClick),\n              )}\n            </List>\n          </Collapse>\n        )}\n      </React.Fragment>\n    );\n  }\n\n  return itemContent;\n};\n\nexport const renderMenuItem = (\n  item: NavigationMenuItem,\n  variant: string = 'vertical',\n  size: string = 'md',\n  collapsed: boolean = false,\n  minimal: boolean = false,\n  level: number = 0,\n  onItemClick?: (item: NavigationMenuItem) => void,\n): React.ReactNode => (\n    <MenuItemRenderer\n      key={item.id}\n      item={item}\n      variant={variant}\n      size={size}\n      collapsed={collapsed}\n      minimal={minimal}\n      level={level}\n      onItemClick={onItemClick}\n    />\n  );\n"],"mappings":"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","names":[]}

package/dist/{chunk-Y5UTYBZW.js → chunk-ZUME25DS.js}

@@ -1,9 +1,9 @@
 import {
   NavigationMegaSection
-} from "./chunk-YHGOPZXW.js";
+} from "./chunk-FY6PONLA.js";
 import {
   NavigationStandardBody
-} from "./chunk-VPRNKJHP.js";
+} from "./chunk-FBUCXTA4.js";
 import {
   LogoBar,
   NavigationShell
@@ -173,4 +173,4 @@ NavigationMenu.displayName = "NavigationMenu";
 export {
   NavigationMenu
 };
-//# sourceMappingURL=chunk-Y5UTYBZW.js.map
+//# sourceMappingURL=chunk-ZUME25DS.js.map

package/dist/data-display/DataViews.js

@@ -3,8 +3,8 @@ import {
 } from "../chunk-I5T5PQQW.js";
 import {
   DataViewsTableBase
-} from "../chunk-ZNDDILNQ.js";
-import "../chunk-3333KCAW.js";
+} from "../chunk-UBEAJFMW.js";
+import "../chunk-P22W4N5K.js";
 import {
   DataViewsGrid
 } from "../chunk-5WT4YWXC.js";
@@ -68,9 +68,9 @@ import {
   cardScaleForZoom
 } from "../chunk-XZJM6EPC.js";
 import "../chunk-M4KVKQRN.js";
-import "../chunk-INMKA5SF.js";
-import "../chunk-IYF246UA.js";
-import "../chunk-ECIHOZPK.js";
+import "../chunk-ARDLCGBK.js";
+import "../chunk-SA65SDOY.js";
+import "../chunk-WWGD5YVW.js";
 import "../chunk-5M4TYFR3.js";
 import "../chunk-HR7YTBR7.js";
 import "../chunk-DZEC6RFM.js";
@@ -164,9 +164,9 @@ import "../chunk-FWPFCK4D.js";
 import "../chunk-BJZOBG24.js";
 import "../chunk-EMYESBIT.js";
 import "../chunk-KFJKOVDD.js";
-import "../chunk-UEROWH53.js";
+import "../chunk-GAMLBJE6.js";
 import "../chunk-2WU52FLP.js";
-import "../chunk-Y4O4DITI.js";
+import "../chunk-5HW37NSW.js";
 import "../chunk-GVGJMH77.js";
 import "../chunk-GYXUCS37.js";
 import "../chunk-CN46HGXE.js";

package/dist/feedback/Dialog.js

@@ -4,9 +4,9 @@ import {
   DialogActions,
   DialogContent,
   DialogHeader
-} from "../chunk-UEROWH53.js";
+} from "../chunk-GAMLBJE6.js";
 import "../chunk-2WU52FLP.js";
-import "../chunk-Y4O4DITI.js";
+import "../chunk-5HW37NSW.js";
 import "../chunk-GVGJMH77.js";
 import "../chunk-GYXUCS37.js";
 import "../chunk-TYJR4GOF.js";

package/dist/navigation/AppHeader.js

@@ -17,7 +17,7 @@ import {
 } from "../chunk-IQU4HKND.js";
 import {
   AppHeaderDetails
-} from "../chunk-DXZOSP6P.js";
+} from "../chunk-WVJGNIJZ.js";
 import "../chunk-QXSV7Z57.js";
 import "../chunk-3U3H3BZM.js";
 import "../chunk-EJYJLVPK.js";
@@ -25,9 +25,9 @@ import "../chunk-FPVYD7BO.js";
 import "../chunk-LYVTJLCF.js";
 import "../chunk-CRN4KKNI.js";
 import "../chunk-IM4DMKH4.js";
-import "../chunk-UEROWH53.js";
+import "../chunk-GAMLBJE6.js";
 import "../chunk-2WU52FLP.js";
-import "../chunk-Y4O4DITI.js";
+import "../chunk-5HW37NSW.js";
 import "../chunk-GVGJMH77.js";
 import "../chunk-GYXUCS37.js";
 import "../chunk-HM2JJNUE.js";

package/dist/navigation/NavigationMenu.js

@@ -1,11 +1,11 @@
 import "../chunk-I53WONUS.js";
 import {
   NavigationMenu
-} from "../chunk-Y5UTYBZW.js";
-import "../chunk-YHGOPZXW.js";
-import "../chunk-VPRNKJHP.js";
+} from "../chunk-ZUME25DS.js";
+import "../chunk-FY6PONLA.js";
+import "../chunk-FBUCXTA4.js";
 import "../chunk-L5RQIQIP.js";
-import "../chunk-5OUEKIWQ.js";
+import "../chunk-ZGWEFOW6.js";
 import "../chunk-3L5OZCGA.js";
 import "../chunk-3AIRFAI3.js";
 import "../chunk-FQ6UW7IY.js";

package/dist/types/components/feedback/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACZ,MAAM,gBAAgB,CAAC;AA6ExB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2ExC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqEpD,CAAC;AA0BF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsBpD,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAwIxB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoExC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqEpD,CAAC;AA0BF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsBpD,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAC"}

package/dist/types/components/feedback/Dialog/Dialog.slots.d.ts

@@ -0,0 +1,43 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+/**
+ * A caller's slot props, MERGED over the Dialog's own rather than replacing
+ * them — for the paper (FUT-2613) and the backdrop (FUT-2672).
+ *
+ * MUI reaches each slot through two props, and both used to replace ours
+ * whole: the deprecated `PaperProps`/`BackdropProps` (spread after ours) and
+ * `slotProps.paper`/`slotProps.backdrop` (which MUI itself puts over the
+ * deprecated one). A caller asking for one class, or one `sx` tweak, lost the
+ * variant's radius, width, background and the paper's test id with it — or,
+ * on the backdrop, the scrim and the `glass` blur.
+ *
+ * Only the keys the merge reads are typed here; every other key the caller
+ * passed rides the spread through untouched.
+ */
+interface SlotValue {
+    sx?: SxProps<Theme>;
+    className?: string;
+}
+interface PaperSlotValue extends SlotValue {
+    'data-testid'?: string;
+}
+/** A slot as MUI takes it: an object, or a function of the owner state. */
+type Slot<V, O> = V | ((ownerState: O) => V);
+/**
+ * The paper slot: the variant's `look`, then `PaperProps`, then
+ * `slotProps.paper`.
+ *
+ * `testId` names the paper unless the caller's props name it; the drawer passes
+ * none, because its id already sits on the Drawer root.
+ */
+export declare function mergedPaperSlot<O>(look: SxProps<Theme>, testId: string | undefined, legacy: PaperSlotValue | undefined, slot: Slot<PaperSlotValue, O> | undefined): Slot<PaperSlotValue, O>;
+/**
+ * The backdrop slot: the scrim (`backdropSxOf`), then `BackdropProps`, then
+ * `slotProps.backdrop`. Both renderers need it: MUI's `Dialog` would replace
+ * our backdrop props with a caller's, and MUI's `Drawer` takes
+ * `slotProps.backdrop` INSTEAD of `BackdropProps` whenever it is given — so
+ * once the scrim rides `slotProps.backdrop`, a caller's `BackdropProps` would
+ * silently drop unless it is folded in here.
+ */
+export declare function mergedBackdropSlot<O>(look: SxProps<Theme>, legacy: SlotValue | undefined, slot: Slot<SlotValue, O> | undefined): Slot<SlotValue, O>;
+export {};
+//# sourceMappingURL=Dialog.slots.d.ts.map

package/dist/types/components/feedback/Dialog/Dialog.slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.slots.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.slots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEpE;;;;;;;;;;;;;GAaG;AACH,UAAU,SAAS;IACjB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,cAAe,SAAQ,SAAS;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,2EAA2E;AAC3E,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAuC7C;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,EACpB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,MAAM,EAAE,cAAc,GAAG,SAAS,EAClC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,GAAG,SAAS,GACxC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAMzB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,EACpB,MAAM,EAAE,SAAS,GAAG,SAAS,EAC7B,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,SAAS,GACnC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAEpB"}

package/dist/types/components/navigation/NavigationMenu/NavigationMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/NavigationMenu/NavigationMenuItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAW,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AA6TjE,eAAO,MAAM,cAAc,GACzB,MAAM,kBAAkB,EACxB,UAAS,MAAmB,EAC5B,OAAM,MAAa,EACnB,YAAW,OAAe,EAC1B,UAAS,OAAe,EACxB,QAAO,MAAU,EACjB,cAAc,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,KAC/C,KAAK,CAAC,SAWN,CAAC"}
+{"version":3,"file":"NavigationMenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/NavigationMenu/NavigationMenuItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAW,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAsUjE,eAAO,MAAM,cAAc,GACzB,MAAM,kBAAkB,EACxB,UAAS,MAAmB,EAC5B,OAAM,MAAa,EACnB,YAAW,OAAe,EAC1B,UAAS,OAAe,EACxB,QAAO,MAAU,EACjB,cAAc,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,KAC/C,KAAK,CAAC,SAWN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.39.13",
+  "version": "6.39.15",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/feedback/Dialog/Dialog.slots.ts

@@ -0,0 +1,100 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+
+/**
+ * A caller's slot props, MERGED over the Dialog's own rather than replacing
+ * them — for the paper (FUT-2613) and the backdrop (FUT-2672).
+ *
+ * MUI reaches each slot through two props, and both used to replace ours
+ * whole: the deprecated `PaperProps`/`BackdropProps` (spread after ours) and
+ * `slotProps.paper`/`slotProps.backdrop` (which MUI itself puts over the
+ * deprecated one). A caller asking for one class, or one `sx` tweak, lost the
+ * variant's radius, width, background and the paper's test id with it — or,
+ * on the backdrop, the scrim and the `glass` blur.
+ *
+ * Only the keys the merge reads are typed here; every other key the caller
+ * passed rides the spread through untouched.
+ */
+interface SlotValue {
+  sx?: SxProps<Theme>;
+  className?: string;
+}
+
+interface PaperSlotValue extends SlotValue {
+  'data-testid'?: string;
+}
+
+/** A slot as MUI takes it: an object, or a function of the owner state. */
+type Slot<V, O> = V | ((ownerState: O) => V);
+
+/** Our look first, then whatever `sx` the caller adds — so the caller's escape hatch still wins. */
+function sxList(caller: SxProps<Theme> | undefined): readonly unknown[] {
+  if (caller === undefined) return [];
+  return Array.isArray(caller) ? caller : [caller];
+}
+
+function mergeOver<V extends SlotValue>(
+  look: SxProps<Theme>,
+  legacy: V | undefined,
+  slot: V | undefined,
+): V {
+  // MUI's own order: `slotProps.<slot>` over the deprecated `<Slot>Props`.
+  return {
+    ...legacy,
+    ...slot,
+    sx: [look, ...sxList(legacy?.sx), ...sxList(slot?.sx)] as SxProps<Theme>,
+  } as V;
+}
+
+/**
+ * The one slot to hand MUI: the Dialog's `look`, then the deprecated prop,
+ * then `slotProps.<slot>`, each value passed through `finish`. A function slot
+ * stays a function, so MUI still calls it with its owner state and its result
+ * merges the same way.
+ */
+function mergedSlot<V extends SlotValue, O>(
+  look: SxProps<Theme>,
+  legacy: V | undefined,
+  slot: Slot<V, O> | undefined,
+  finish: (merged: V) => V = (merged) => merged,
+): Slot<V, O> {
+  if (typeof slot === 'function') {
+    return (ownerState: O) => finish(mergeOver(look, legacy, slot(ownerState)));
+  }
+  return finish(mergeOver(look, legacy, slot));
+}
+
+/**
+ * The paper slot: the variant's `look`, then `PaperProps`, then
+ * `slotProps.paper`.
+ *
+ * `testId` names the paper unless the caller's props name it; the drawer passes
+ * none, because its id already sits on the Drawer root.
+ */
+export function mergedPaperSlot<O>(
+  look: SxProps<Theme>,
+  testId: string | undefined,
+  legacy: PaperSlotValue | undefined,
+  slot: Slot<PaperSlotValue, O> | undefined,
+): Slot<PaperSlotValue, O> {
+  return mergedSlot(look, legacy, slot, (merged) => ({
+    ...merged,
+    // A key the caller set to `undefined` does not erase the dialog's id.
+    'data-testid': merged['data-testid'] ?? testId,
+  }));
+}
+
+/**
+ * The backdrop slot: the scrim (`backdropSxOf`), then `BackdropProps`, then
+ * `slotProps.backdrop`. Both renderers need it: MUI's `Dialog` would replace
+ * our backdrop props with a caller's, and MUI's `Drawer` takes
+ * `slotProps.backdrop` INSTEAD of `BackdropProps` whenever it is given — so
+ * once the scrim rides `slotProps.backdrop`, a caller's `BackdropProps` would
+ * silently drop unless it is folded in here.
+ */
+export function mergedBackdropSlot<O>(
+  look: SxProps<Theme>,
+  legacy: SlotValue | undefined,
+  slot: Slot<SlotValue, O> | undefined,
+): Slot<SlotValue, O> {
+  return mergedSlot(look, legacy, slot);
+}

package/src/components/feedback/Dialog/Dialog.tsx

@@ -1,7 +1,7 @@
 import CloseIcon from '@mui/icons-material/Close';
 import Backdrop from '@mui/material/Backdrop/index.js';
 import Box from '@mui/material/Box/index.js';
-import MuiDialog from '@mui/material/Dialog/index.js';
+import MuiDialog, { type DialogProps as MuiDialogProps } from '@mui/material/Dialog/index.js';
 import MuiDialogActions from '@mui/material/DialogActions/index.js';
 import MuiDialogContent from '@mui/material/DialogContent/index.js';
 import MuiDialogTitle from '@mui/material/DialogTitle/index.js';
@@ -20,7 +20,7 @@ import {
   DIALOG_TITLE,
   DIALOG_TITLED_BODY_PADDING_TOP_UNITS,
 } from './Dialog.metrics';
-import { mergedPaperSlot } from './Dialog.paper';
+import { mergedBackdropSlot, mergedPaperSlot } from './Dialog.slots';
 import { backdropSxOf, variantStylesOf } from './Dialog.styles';
 import { childTestId, resolveTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type {
@@ -75,30 +75,89 @@ function bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {
   return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;
 }
 
+/**
+ * MUI's `onClose` for either renderer: a `persistent` dialog swallows the
+ * backdrop press and Escape, and the caller's `onClose` is called with no
+ * arguments, as `Dialog.base.ts` promises. The drawer used to get the caller's
+ * raw `onClose` — so it closed when `persistent` said it must not, and was
+ * handed MUI's `(event, reason)` (FUT-2673).
+ */
+function closeHandlerOf(persistent: boolean, onClose: (() => void) | undefined) {
+  return (_event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {
+      return;
+    }
+    onClose?.();
+  };
+}
+
+/** The looks the Dialog lays under a caller's paper and backdrop props. */
+interface DialogLooks {
+  paperSx: SxProps<Theme>;
+  backdropSx: SxProps<Theme>;
+  testId: string | undefined;
+}
+
+/** What either renderer below takes: the looks, and the dialog's own children. */
+type RendererProps = DialogLooks & { children: React.ReactNode };
+
+/**
+ * Every variant but the drawer: MUI's `Dialog`. The scrim reaches MUI through
+ * `slotProps.backdrop`, not the deprecated `BackdropProps`, and a caller's
+ * backdrop props from either spelling merge over it rather than replacing it
+ * (FUT-2672) — as their paper props merge over the variant's look (FUT-2613).
+ */
+function ModalDialog({
+  paperSx,
+  backdropSx,
+  testId,
+  dialogProps,
+  children,
+}: RendererProps & { dialogProps: MuiDialogProps }) {
+  const { PaperProps: callerPaper, BackdropProps: callerBackdrop, slotProps, ...rest } = dialogProps;
+  return (
+    <MuiDialog
+      {...rest}
+      slotProps={{
+        ...slotProps,
+        paper: mergedPaperSlot(paperSx, testId, callerPaper, slotProps?.paper),
+        backdrop: mergedBackdropSlot(backdropSx, callerBackdrop, slotProps?.backdrop),
+      }}
+    >
+      {children}
+    </MuiDialog>
+  );
+}
+
 /**
  * The drawer variant: MUI's `Drawer`, with the variant's look on the Drawer's
  * OWN paper — on an inner Box it left the paper 0px wide and clipped the panel —
  * and a caller's paper props merged over it rather than replacing it. The
  * test id stays on the Drawer root, so the paper carries none of its own.
+ *
+ * The scrim rides the drawer's backdrop exactly as it rides the dialog's, so
+ * `glass` blurs it here too; the paper does not frost (FUT-2673). MUI's
+ * `Drawer` does not merge `BackdropProps` into `slotProps.backdrop` — it takes
+ * one or the other — so both are folded into the one slot here.
  */
 function DrawerDialog({
   paperSx,
+  backdropSx,
   testId,
   drawerProps,
   children,
-}: {
-  paperSx: SxProps<Theme>;
-  testId: string | undefined;
-  drawerProps: DrawerProps;
-  children: React.ReactNode;
-}) {
-  const { PaperProps: callerPaper, slotProps, ...rest } = drawerProps;
+}: RendererProps & { drawerProps: DrawerProps }) {
+  const { PaperProps: callerPaper, BackdropProps: callerBackdrop, slotProps, ...rest } = drawerProps;
   return (
     <Drawer
       anchor="right"
       data-testid={testId}
       {...rest}
-      slotProps={{ ...slotProps, paper: mergedPaperSlot(paperSx, undefined, callerPaper, slotProps?.paper) }}
+      slotProps={{
+        ...slotProps,
+        paper: mergedPaperSlot(paperSx, undefined, callerPaper, slotProps?.paper),
+        backdrop: mergedBackdropSlot(backdropSx, callerBackdrop, slotProps?.backdrop),
+      }}
     >
       {children}
     </Drawer>
@@ -130,17 +189,13 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
   // Native's name for it and is not a DOM attribute. The native `Dialog` does
   // the same in reverse.
   const testId = resolveTestId(others, 'dialog');
-  const { PaperProps: callerPaper, slotProps, ...props } = withoutTestIdProps(others);
-  const paperSx = variantStylesOf(theme, {
-    variant, size, borderRadius, glass, gradient, glow, pulse,
-  });
-
-  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
-    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {
-      return;
-    }
-    onClose?.();
+  const props = withoutTestIdProps(others);
+  const looks: DialogLooks = {
+    paperSx: variantStylesOf(theme, { variant, size, borderRadius, glass, gradient, glow, pulse }),
+    backdropSx: backdropSxOf(theme, glass),
+    testId,
   };
+  const handleClose = closeHandlerOf(persistent, onClose);
 
   const header = title ? (
     <DialogHeader
@@ -155,11 +210,7 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
 
   if (variant === 'drawer') {
     return (
-      <DrawerDialog
-        paperSx={paperSx}
-        testId={testId}
-        drawerProps={{ ...props, PaperProps: callerPaper, slotProps, open, onClose }}
-      >
+      <DrawerDialog {...looks} drawerProps={{ ...props, open, onClose: handleClose }}>
         {header}
         {body}
       </DrawerDialog>
@@ -167,18 +218,19 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
   }
 
   return (
-    <MuiDialog
-      open={open}
-      onClose={handleClose}
-      fullScreen={variant === 'fullscreen'}
-      BackdropComponent={backdrop ? Backdrop : undefined}
-      BackdropProps={{ sx: backdropSxOf(theme, glass) }}
-      {...props}
-      slotProps={{ ...slotProps, paper: mergedPaperSlot(paperSx, testId, callerPaper, slotProps?.paper) }}
+    <ModalDialog
+      {...looks}
+      dialogProps={{
+        open,
+        onClose: handleClose,
+        fullScreen: variant === 'fullscreen',
+        BackdropComponent: backdrop ? Backdrop : undefined,
+        ...props,
+      }}
     >
       {header}
       {body}
-    </MuiDialog>
+    </ModalDialog>
   );
 };
 

package/src/components/navigation/NavigationMenu/NavigationMenu.md

@@ -44,7 +44,7 @@ A flexible and feature-rich navigation menu component that supports horizontal,
 | active       | `boolean`                                    | false     | Whether the item is currently active         |
 | disabled     | `boolean`                                    | false     | Whether the item is disabled                 |
 | onClick      | `(event: React.MouseEvent) => void`         | undefined | Click handler for the menu item              |
-| badge        | `number \| string`                          | undefined | Badge/notification count                     |
+| badge        | `number \| string`                          | undefined | Badge/notification count. A numeric or empty-string `0` renders nothing — pass the string `'0'` for a visible zero. |
 | children     | `NavigationMenuItem[]`                      | undefined | Nested items for submenu                     |
 | description  | `string`                                     | undefined | Description text for the item                |
 | showChevron  | `boolean`                                    | false     | Whether to show a chevron for submenu        |
@@ -392,6 +392,8 @@ const itemsWithBadges = [
 - Supports both numeric and string badges
 - Animated pulse effect for numeric badges
 - Gradient background with shadow for visual prominence
+- A zero count is hidden, the same way `Badge`'s `showZero: false` default hides
+  it: `badge: 0` renders no pill. Pass the string `'0'` to show a literal zero.
 
 ### Icon Hover Animations