@camunda/camunda-composite-components 0.23.0 → 0.23.2

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.23.0",
+    "version": "0.23.2",
     "description": "Camunda Composite Components",
     "bugs": {
         "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"

package/lib/esm/src/components/c3-navigation/c3-navigation-appbar/c3-navigation-appbar.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * under one or more contributor license agreements. Licensed under a commercial license.
  * You may not use this file except in compliance with the commercial license.
  */
-import { FormLabel, HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, Modal, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from '@carbon/react';
+import { FormLabel, HeaderGlobalAction as HeaderGlobalActionBase, HeaderMenuItem, HeaderSideNavItems, Modal, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from '@carbon/react';
 import { Close } from '@carbon/react/icons/index.esm.js';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
@@ -17,6 +17,12 @@ import { useC3UserConfiguration } from '../../c3-user-configuration/c3-user-conf
 import { ActiveOrgName } from '../c3-org-sidebar/components.js';
 import { useOnClickOutside } from '../helpers.js';
 import { NavWrapper, SideNav } from './components.js';
+/**
+ * Carbon's `HeaderGlobalAction` is typed as `React.FC` and omits both `ref`
+ * (the component uses `forwardRef` internally) and `leaveDelayMs`. Both work
+ * at runtime, so we widen the type at the import site.
+ */
+const HeaderGlobalAction = HeaderGlobalActionBase;
 const getOrgLink = (app, orgId, domain) => {
     switch (app) {
         case 'console': {
@@ -137,8 +143,8 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
                                 optimize: status?.optimizeUrl,
                                 console: '',
                                 modeler: '',
-                                identity: '',
-                                admin: '',
+                                identity: status?.identityUrl ?? '',
+                                admin: status?.identityUrl ?? '',
                             };
                             const expectedStatus = {
                                 tasklist: status?.tasklistStatus,
@@ -148,7 +154,7 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
                                 modeler: '',
                                 identity: '',
                                 admin: '',
-                                zeebe: '',
+                                zeebe: status?.zeebeStatus ?? '',
                             };
                             const affectedCluster = {
                                 uuid: clusterDto.uuid,
@@ -346,9 +352,7 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
     const orgName = activeOrg?.name || navbar.orgName;
     return (_jsxs(_Fragment, { children: [_jsx(HeaderGlobalAction, { ref: iconRef, "aria-label": 'Camunda components', isActive: appBar.isOpen, onClick: () => {
                     toggleAppbar(!appBar.isOpen);
-                }, tooltipAlignment: 'start', 
-                // @ts-expect-error
-                leaveDelayMs: 100, children: appBar.isOpen ? _jsx(Close, { size: 20 }) : _jsx(C3AppMenuIcon, { size: 20 }) }), _jsx(OrgPickerModal, { activeOrg: activeOrg, appToNavigateTo: appToNavigateTo, isOpen: isOrgPickerModalOpen, orgs: clustersByOrgId, onCancel: () => {
+                }, tooltipAlignment: 'start', leaveDelayMs: 100, children: appBar.isOpen ? _jsx(Close, { size: 20 }) : _jsx(C3AppMenuIcon, { size: 20 }) }), _jsx(OrgPickerModal, { activeOrg: activeOrg, appToNavigateTo: appToNavigateTo, isOpen: isOrgPickerModalOpen, orgs: clustersByOrgId, onCancel: () => {
                     setIsOrgPickerModalOpen(false);
                 }, loadingStatus: loadingStatus, domain: domain }), _jsx(NavWrapper, { children: _jsx(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || 'Side Navigation', expanded: appBar.isOpen, isPersistent: false, children: _jsxs(SideNavItems, { children: [orgName && (_jsx("li", { children: _jsxs(OrgNameWrapper, { children: [_jsx(FormLabel, { children: "Organization" }), _jsx(ActiveOrgName, { className: 'textPrimary', title: orgName, children: orgName })] }) })), _jsx("li", { children: navbar.elements.length > 0 && (_jsx(HeaderSideNavItems, { hasDivider: true, children: navbar.elements.map((element) => (_jsx(HeaderMenuItem, { as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
                                             if (element.routeProps.onClick) {

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.js

@@ -4,12 +4,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * under one or more contributor license agreements. Licensed under a commercial license.
  * You may not use this file except in compliance with the commercial license.
  */
-import { Button, HeaderPanel as CarbonHeaderPanel, HeaderGlobalAction, Stack, SwitcherDivider, } from '@carbon/react';
+import { Button, HeaderPanel as CarbonHeaderPanel, HeaderGlobalAction as HeaderGlobalActionBase, Stack, SwitcherDivider, } from '@carbon/react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 import { useOnClickOutside } from '../helpers.js';
 import C3NavigationSidebarElement from './c3-navigation-sidebar-element.js';
 import { useSidebarState } from './c3-sidebar-state-provider.js';
+/**
+ * Carbon's `HeaderGlobalAction` is typed as `React.FC` and omits both `ref`
+ * (the component uses `forwardRef` internally) and `leaveDelayMs`. Both work
+ * at runtime, so we widen the type at the import site.
+ */
+const HeaderGlobalAction = HeaderGlobalActionBase;
 const Wrapper = styled.div `
   .cds--popover * {
     z-index: 9000;
@@ -67,9 +73,7 @@ const C3NavigationSideBar = (props) => {
     }, [isOpen]);
     return (_jsxs(Wrapper, { children: [_jsx(HeaderGlobalAction, { ref: setIconRef, "aria-label": sideBar.tooltip ?? `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
                     setIsOpen(!isOpen);
-                }, isActive: isOpen, tooltipAlignment: sideBar.type === 'user' ? 'end' : 'center', 
-                /* @ts-expect-error */
-                leaveDelayMs: 100, children: icon }), _jsxs(HeaderPanel, { ref: setPanelRef, expanded: isOpen, "data-floating-menu-container": true, children: [_jsxs(Stack, { children: [children, sideBar.elements &&
+                }, isActive: isOpen, tooltipAlignment: sideBar.type === 'user' ? 'end' : 'center', leaveDelayMs: 100, children: icon }), _jsxs(HeaderPanel, { ref: setPanelRef, expanded: isOpen, "data-floating-menu-container": true, children: [_jsxs(Stack, { children: [children, sideBar.elements &&
                                 sideBar.elements.length > 0 &&
                                 'customElements' in sideBar &&
                                 sideBar.customElements &&

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-container.d.ts

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import type { FC } from 'react';
 import type { Notification as NotificationProps } from '../../../api/notifications';
 export declare const NotificationTitle: any;
 export declare const NotificationDescription: any;

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-container.js

@@ -6,14 +6,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Button, Link, Tile } from '@carbon/react';
 import { Close } from '@carbon/react/icons/index.esm.js';
-import { useState } from 'react';
 import styled from 'styled-components';
+const CloseButtonWrapper = styled.div `
+  position: absolute;
+  top: var(--cds-spacing-02);
+  right: var(--cds-spacing-02);
+  opacity: 0;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;
 const NotificationTile = styled(Tile) `
+  position: relative;
   box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
-`;
-const CloseButton = styled(Button) `
-  margin-right: -1rem;
-  visibility: ${({ $show }) => ($show ? 'visible' : 'hidden')};
+
+  &:hover ${CloseButtonWrapper} {
+    opacity: 1;
+  }
 `;
 const UnreadNotificationHeader = styled.div `
   display: flex;
@@ -78,7 +88,6 @@ const getReadableTimestamp = (timestamp) => {
     return date.toDateString();
 };
 const C3NotificationContainer = ({ description, state, timestamp, title, onDismiss, meta, onLinkClick, originalOnLinkClick, unread = false, }) => {
-    const [isHovering, setIsHovering] = useState(false);
     const dismissNotification = (e) => {
         e.stopPropagation();
         onDismiss();
@@ -91,10 +100,6 @@ const C3NotificationContainer = ({ description, state, timestamp, title, onDismi
         }
         return true;
     };
-    return (_jsxs(NotificationTile, { onMouseEnter: () => {
-            setIsHovering(true);
-        }, onMouseLeave: () => {
-            setIsHovering(false);
-        }, children: [_jsxs(UnreadNotificationHeader, { children: [(state === 'new' || unread) && _jsx(Dot, {}), _jsxs(NotificationHeader, { children: [_jsx(Timestamp, { children: getReadableTimestamp(timestamp) }), _jsx(CloseButton, { kind: 'ghost', hasIconOnly: true, iconDescription: 'Dismiss', align: 'bottom-right', renderIcon: Close, onClick: dismissNotification, size: 'sm', "$show": isHovering })] })] }), _jsx(NotificationTitle, { children: title }), _jsx(NotificationDescription, { children: description }), meta && (_jsx(LinkContainer, { children: _jsx(Link, { href: meta.href, onClick: handleLinkClick, visited: true, style: { fontSize: 'var(--cds-helper-text-01-font-size)' }, children: meta.label }) }))] }));
+    return (_jsxs(NotificationTile, { children: [_jsxs(UnreadNotificationHeader, { children: [(state === 'new' || unread) && _jsx(Dot, {}), _jsx(NotificationHeader, { children: _jsx(Timestamp, { children: getReadableTimestamp(timestamp) }) })] }), _jsx(NotificationTitle, { children: title }), _jsx(NotificationDescription, { children: description }), meta && (_jsx(LinkContainer, { children: _jsx(Link, { href: meta.href, onClick: handleLinkClick, visited: true, style: { fontSize: 'var(--cds-helper-text-01-font-size)' }, children: meta.label }) })), _jsx(CloseButtonWrapper, { children: _jsx(Button, { kind: 'ghost', hasIconOnly: true, iconDescription: 'Dismiss', tooltipPosition: 'top', tooltipAlignment: 'end', renderIcon: Close, onClick: dismissNotification, size: 'sm' }) })] }));
 };
 export default C3NotificationContainer;

package/lib/esm/src/components/c3-navigation-v2/c3-breadcrumb-bar.js

@@ -17,8 +17,8 @@ const SegmentWrapper = styled.div `
 const SegmentButton = styled.button `
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
+  gap: var(--cds-spacing-03);
+  padding: var(--cds-spacing-02) var(--cds-spacing-03);
   background: transparent;
   border: none;
   border-radius: 4px;
@@ -45,7 +45,7 @@ const ChevronButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
+  padding: var(--cds-spacing-02);
   background: ${(p) => (p.$isOpen ? 'var(--cds-layer-01)' : 'transparent')};
   border: none;
   border-radius: 4px;
@@ -71,7 +71,7 @@ const ActionMenuButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
+  padding: var(--cds-spacing-02);
   background: ${(p) => (p.$isOpen ? 'var(--cds-layer-01)' : 'transparent')};
   border: none;
   border-radius: 4px;
@@ -92,7 +92,7 @@ const ActionMenuItem = styled.button `
   width: 100%;
   display: flex;
   align-items: center;
-  padding: 0.625rem 1rem;
+  padding: 0.625rem var(--cds-spacing-05);
   background: transparent;
   border: none;
   border-top: ${(p) => (p.$hasDivider ? '1px solid var(--cds-border-subtle)' : 'none')};
@@ -133,8 +133,8 @@ const DropdownItem = styled.button `
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 1rem;
+  gap: var(--cds-spacing-04);
+  padding: 0.625rem var(--cds-spacing-05);
   background: ${(p) => (p.$isSelected ? 'var(--cds-layer-selected)' : 'transparent')};
   border: none;
   cursor: pointer;
@@ -163,7 +163,7 @@ const DropdownItemLabel = styled.span `
 const Separator = styled.span `
   display: flex;
   align-items: center;
-  padding: 0 0.25rem;
+  padding: 0 var(--cds-spacing-02);
   color: var(--cds-text-secondary);
   font-size: 0.875rem;
   user-select: none;
@@ -181,7 +181,7 @@ const DropdownEntry = ({ item, onSelect, linkComponent, }) => {
                 : undefined, ...(item.linkProps ?? {}), "$isSelected": !!item.isSelected, onClick: () => onSelect(item), role: 'option', tabIndex: -1, "aria-selected": !!item.isSelected, children: [Icon && (_jsx(Icon, { size: 16, style: { color: 'var(--cds-icon-secondary)', flexShrink: 0 } })), _jsx(DropdownItemLabel, { children: item.label }), item.trailingElement, item.isSelected && (_jsx(Checkmark, { size: 16, style: { color: 'var(--cds-icon-primary)', flexShrink: 0 } }))] }));
 };
 const DropdownTitle = styled.div `
-  padding: 0.75rem 1rem 0.5rem;
+  padding: var(--cds-spacing-04) var(--cds-spacing-05) var(--cds-spacing-03);
   font-size: 0.6875rem;
   font-weight: 600;
   color: var(--cds-text-secondary);
@@ -366,6 +366,6 @@ const BreadcrumbBarWrapper = styled.div `
   flex: 1;
   min-width: 0;
   overflow-x: auto;
-  padding-left: 0.5rem;
+  padding-left: var(--cds-spacing-03);
 `;
 export const C3BreadcrumbBar = ({ segments, linkComponent, }) => (_jsx(BreadcrumbBarWrapper, { role: 'navigation', "aria-label": 'Breadcrumb', children: segments.map((segment, index) => (_jsx(BreadcrumbSegmentComponent, { segment: segment, isLast: index === segments.length - 1, linkComponent: linkComponent }, segment.key))) }));

package/lib/esm/src/components/c3-navigation-v2/c3-navigation-v2.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * You may not use this file except in compliance with the commercial license.
  */
 import { Header, HeaderGlobalAction, HeaderGlobalBar, SkipToContent, } from '@carbon/react';
-import { useEffect } from 'react';
+import { Fragment, useEffect } from 'react';
 import styled from 'styled-components';
 import { CamundaLogo } from '../../assets/c3-icons.js';
 import { C3BreadcrumbBar } from './c3-breadcrumb-bar.js';
@@ -23,7 +23,7 @@ const LogoSection = styled.a `
   justify-content: center;
   width: 3rem;
   flex-shrink: 0;
-  gap: 0.5rem;
+  gap: var(--cds-spacing-03);
   border-right: 1px solid var(--cds-border-subtle);
   height: 100%;
   text-decoration: none;
@@ -60,13 +60,17 @@ export const C3NavigationV2 = ({ app, skipToContentTargetId, skipToContentLabel
     return (_jsxs(_Fragment, { children: [_jsxs(StyledHeader, { "aria-label": ariaLabel, children: [_jsx(SkipToContent, { href: `#${skipToContentTargetId}`, children: skipToContentLabel }), _jsxs(LogoSection, { as: app.linkProps ? LinkEl : 'div', ...(app.linkProps ?? {}), children: [_jsx(CamundaLogo, { "aria-label": 'Camunda' }), app.name && _jsx("span", { children: app.name })] }), breadcrumbs && breadcrumbs.length > 0 && (_jsx(C3BreadcrumbBar, { segments: breadcrumbs, linkComponent: LinkEl })), _jsxs(HeaderGlobalBar, { children: [headerTrailingContent && (_jsx("span", { style: {
                                     display: 'flex',
                                     alignItems: 'center',
-                                    padding: '0 0.5rem',
-                                }, children: headerTrailingContent })), tools && tools.length > 0 && (_jsx(C3ToolsArea, { tools: tools, activeToolKey: activeToolKey, onActiveToolChange: onActiveToolChange })), globalActions?.map((action, index) => {
+                                    padding: '0 var(--cds-spacing-03)',
+                                }, children: headerTrailingContent })), tools && tools.length > 0 && (_jsx(C3ToolsArea, { tools: tools, activeToolKey: activeToolKey, onActiveToolChange: onActiveToolChange })), globalActions
+                                ?.filter((action) => action.element || action.icon)
+                                .map((action, index, arr) => {
                                 if (action.element) {
-                                    return _jsx("span", { children: action.element }, action.key);
+                                    // Direct flex child of HeaderGlobalBar (no wrapper); preserves
+                                    // the layout context custom elements like C4Search rely on.
+                                    return _jsx(Fragment, { children: action.element }, action.key);
                                 }
                                 const Icon = action.icon;
-                                const isLast = index === (globalActions?.length ?? 0) - 1;
+                                const isLast = index === arr.length - 1;
                                 return (_jsx(HeaderGlobalAction, { "aria-label": action.label, onClick: action.onClick, tooltipAlignment: isLast ? 'end' : undefined, children: _jsx(Icon, { size: 20 }) }, action.key));
                             })] })] }), sidebar && _jsx(C3Sidebar, { ...sidebar })] }));
 };

package/lib/esm/src/components/c3-navigation-v2/c3-navigation-v2.types.d.ts

@@ -74,7 +74,11 @@ export interface BreadcrumbSegment {
 export interface GlobalActionButton {
     key: string;
     label: string;
-    icon: React.ComponentType<{
+    /**
+     * Required when `element` is omitted. Ignored when `element` is supplied
+     * (the custom element renders instead of the default icon button).
+     */
+    icon?: React.ComponentType<{
         size?: number;
     }>;
     onClick?: () => void;

package/lib/esm/src/components/c3-navigation-v2/c3-sidebar.js

@@ -27,20 +27,22 @@ const ScrollArea = styled.div `
   flex-direction: column;
   overflow-y: ${(p) => (p.$sidebarExpanded ? 'auto' : 'visible')};
   overflow-x: ${(p) => (p.$sidebarExpanded ? 'hidden' : 'visible')};
-  padding-top: 0.5rem;
-  padding-bottom: 1rem;
+  padding-top: var(--cds-spacing-03);
+  padding-bottom: var(--cds-spacing-05);
 `;
 const NavButton = styled.button `
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 0.75rem;
+  gap: var(--cds-spacing-04);
   width: 100%;
   min-height: 2.5rem;
   padding: ${(p) => {
     if (p.$depth > 0)
-        return `0.625rem 1rem 0.625rem ${0.75 + p.$depth * 1.75}rem`;
-    return p.$isExpanded ? '0.75rem 1rem' : '0.75rem';
+        return `0.625rem var(--cds-spacing-05) 0.625rem ${0.75 + p.$depth * 1.75}rem`;
+    return p.$isExpanded
+        ? 'var(--cds-spacing-04) var(--cds-spacing-05)'
+        : 'var(--cds-spacing-04)';
 }};
   justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
   background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'transparent')};
@@ -68,6 +70,8 @@ const NavButton = styled.button `
   }
 `;
 const NavLabel = styled.span `
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -91,10 +95,11 @@ const GroupLabelButton = styled.button `
   display: flex;
   align-items: center;
   flex: 1;
+  min-width: 0;
   padding: ${(p) => {
     if (p.$depth > 0)
-        return `0.75rem 0 0.75rem ${0.75 + p.$depth * 1.75}rem`;
-    return '0.75rem 0 0.75rem 1rem';
+        return `var(--cds-spacing-04) 0 var(--cds-spacing-04) ${0.75 + p.$depth * 1.75}rem`;
+    return 'var(--cds-spacing-04) 0 var(--cds-spacing-04) var(--cds-spacing-05)';
 }};
   background: transparent;
   border: none;
@@ -105,7 +110,7 @@ const GroupLabelButton = styled.button `
   text-align: left;
   text-decoration: none;
   transition: color 0.15s;
-  gap: 0.75rem;
+  gap: var(--cds-spacing-04);
 
   &:hover {
     color: var(--cds-text-primary);
@@ -121,8 +126,8 @@ const ExpandButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
-  margin-right: 0.75rem;
+  padding: var(--cds-spacing-02);
+  margin-right: var(--cds-spacing-04);
   background: transparent;
   border: none;
   border-radius: 4px;
@@ -152,12 +157,13 @@ const PlainGroupLabel = styled.span `
   display: flex;
   align-items: center;
   flex: 1;
+  min-width: 0;
   padding: ${(p) => {
     if (p.$depth > 0)
-        return `0.75rem 0 0.75rem ${0.75 + p.$depth * 1.75}rem`;
-    return '0.75rem 0 0.75rem 1rem';
+        return `var(--cds-spacing-04) 0 var(--cds-spacing-04) ${0.75 + p.$depth * 1.75}rem`;
+    return 'var(--cds-spacing-04) 0 var(--cds-spacing-04) var(--cds-spacing-05)';
 }};
-  gap: 0.75rem;
+  gap: var(--cds-spacing-04);
   color: var(--cds-text-secondary);
   font-size: 0.875rem;
   font-weight: 400;
@@ -166,8 +172,8 @@ const PlainGroupExpandButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
-  margin-right: 0.75rem;
+  padding: var(--cds-spacing-02);
+  margin-right: var(--cds-spacing-04);
   background: transparent;
   border: none;
   border-radius: 4px;
@@ -189,7 +195,7 @@ const StyledPopover = styled(Popover) `
 
   .cds--popover-content {
     pointer-events: none;
-    padding: 0.1875rem 0.5rem;
+    padding: 0.1875rem var(--cds-spacing-03);
     font-size: var(--cds-body-compact-01-font-size);
     white-space: nowrap;
   }
@@ -214,18 +220,18 @@ const CollapsedItemTooltip = ({ label, children, }) => {
     return (_jsxs(StyledPopover, { open: open, align: 'right', highContrast: true, dropShadow: false, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, _jsx(PopoverContent, { children: label })] }));
 };
 const SectionDivider = styled.div `
-  border-top: ${(p) => (p.$hideTopDivider ? 'none' : '1px solid var(--cds-border-subtle)')};
+  border-top: ${(p) => (p.$hideTopDivider ? 'none' : '1px solid var(--cds-border-subtle-01)')};
   margin-top: ${(p) => {
     if (p.$eatScrollPadding)
-        return '-0.5rem';
+        return 'calc(-1 * var(--cds-spacing-03))';
     if (p.$tight)
         return '0';
-    return p.$hideTopDivider ? '0' : '0.5rem';
+    return p.$hideTopDivider ? '0' : 'var(--cds-spacing-03)';
 }};
-  padding-top: ${(p) => (p.$hideTopDivider ? '0' : '0.5rem')};
+  padding-top: ${(p) => (p.$hideTopDivider ? '0' : 'var(--cds-spacing-03)')};
 `;
 const SectionTitle = styled.div `
-  padding: 0.5rem 1rem;
+  padding: var(--cds-spacing-03) var(--cds-spacing-05);
   font-size: 0.6875rem;
   font-weight: 600;
   color: var(--cds-text-secondary);
@@ -240,10 +246,12 @@ const CollapseButton = styled.button `
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 0.75rem;
+  gap: var(--cds-spacing-04);
   width: 100%;
   min-height: 2.5rem;
-  padding: ${(p) => (p.$isExpanded ? '0.75rem 1rem' : '0.75rem')};
+  padding: ${(p) => p.$isExpanded
+    ? 'var(--cds-spacing-04) var(--cds-spacing-05)'
+    : 'var(--cds-spacing-04)'};
   justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
   background: transparent;
   border: none;
@@ -272,6 +280,34 @@ const resolveLinkAs = (linkProps, linkComponent) => {
         return 'a';
     return linkComponent;
 };
+const pruneNode = (node) => {
+    if (node.type === 'item') {
+        if (!node.onClick && !node.linkProps)
+            return null;
+        return node;
+    }
+    if (node.type === 'group') {
+        const children = pruneChildren(node.children);
+        if (children.length === 0)
+            return null;
+        return { ...node, children };
+    }
+    if (node.type === 'group-item') {
+        const children = pruneChildren(node.children);
+        const isClickable = !!(node.onClick || node.linkProps);
+        if (children.length === 0 && !isClickable)
+            return null;
+        return { ...node, children };
+    }
+    const children = pruneChildren(node.children);
+    if (children.length === 0)
+        return null;
+    return { ...node, children };
+};
+const pruneChildren = (nodes) => nodes.flatMap((n) => {
+    const pruned = pruneNode(n);
+    return pruned ? [pruned] : [];
+});
 const ItemNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
     const Icon = node.icon;
     const content = (_jsxs(NavButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": !!node.isActive, "$isExpanded": sidebarExpanded, "$depth": depth, onClick: node.onClick, "aria-current": node.isActive ? 'page' : undefined, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), sidebarExpanded && _jsx(NavLabel, { children: node.label }), sidebarExpanded && node.trailingElement] }));
@@ -287,7 +323,7 @@ const GroupItemNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
         const collapsed = (_jsx(NavButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isExpanded": false, "$depth": 0, onClick: node.onClick ?? node.onToggleExpand, "aria-current": isActive ? 'page' : undefined, children: _jsx(Icon, { size: 20, style: { flexShrink: 0 } }) }));
         return (_jsx(CollapsedItemTooltip, { label: node.label, children: collapsed }));
     }
-    return (_jsxs("div", { children: [_jsxs(GroupHeader, { "$isActive": isActive, "$depth": depth, children: [_jsxs(GroupLabelButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isClickable": true, "$depth": depth, onClick: node.onClick, "aria-current": isActive ? 'page' : undefined, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(ExpandButton, { "data-expand": true, onClick: (e) => {
+    return (_jsxs("div", { children: [_jsxs(GroupHeader, { "$isActive": isActive, "$depth": depth, children: [_jsxs(GroupLabelButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isClickable": true, "$depth": depth, onClick: node.onClick, "aria-current": isActive ? 'page' : undefined, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && node.children.length > 0 && (_jsx(ExpandButton, { "data-expand": true, onClick: (e) => {
                             e.stopPropagation();
                             node.onToggleExpand?.();
                         }, "aria-label": node.isExpanded
@@ -330,11 +366,12 @@ const SidebarNodeComponent = ({ node, sidebarExpanded, depth, linkComponent, hid
  */
 export const C3Sidebar = ({ ariaLabel, children: nodes, isExpanded = true, onToggleExpanded, expandedWidth = '16rem', collapsedWidth = '3rem', linkComponent, }) => {
     const width = isExpanded ? expandedWidth : collapsedWidth;
+    const prunedNodes = pruneChildren(nodes);
     return (_jsxs(SidebarNav, { "$width": width, "aria-label": ariaLabel, children: [_jsx(ScrollArea, { "$sidebarExpanded": isExpanded, children: (() => {
                     let sectionSeen = false;
                     let prevSectionCompact = false;
                     let hasNonSectionNodes = false;
-                    return nodes.map((node) => {
+                    return prunedNodes.map((node) => {
                         let hideTopDivider = false;
                         let eatScrollPadding = false;
                         let tight = false;

package/lib/esm/src/components/c3-navigation-v2/c3-tools-area.js

@@ -20,6 +20,10 @@ const ToolsPanel = styled.div `
   z-index: 8000;
   display: flex;
   flex-direction: column;
+
+  & > * {
+    flex-shrink: 0;
+  }
 `;
 /**
  * Renders tool buttons inline (for HeaderGlobalBar) and manages a single shared
@@ -85,9 +89,11 @@ export const C3ToolsArea = ({ tools, activeToolKey: controlledKey, onActiveToolC
     }, [activeKey, setActive]);
     const handlePanelBlur = useCallback((event) => {
         const next = event.relatedTarget;
-        if (next && panelRef.current?.contains(next))
+        if (!next)
             return;
-        if (next?.closest?.('.cds--header'))
+        if (panelRef.current?.contains(next))
+            return;
+        if (next.closest?.('.cds--header'))
             return;
         setActive(null);
     }, [setActive]);

package/lib/esm/src/components/c3-navigation-v2/index.d.ts

@@ -14,5 +14,7 @@ export type { BreadcrumbDescriptor, BreadcrumbDropdownItemDescriptor, GroupDescr
 export { useC3NavigationV2 } from './use-c3-navigation-v2';
 export type { HelpToolOptions, InfoToolOptions, NotificationsToolOptions, UseCamundaToolsOptions, UserToolOptions, } from './use-camunda-tools';
 export { useCamundaTools } from './use-camunda-tools';
+export type { UseClusterSidebarEntriesOptions } from './use-cluster-sidebar-entries';
+export { useClusterSidebarEntries } from './use-cluster-sidebar-entries';
 export type { UseClusterWebappBreadcrumbsOptions } from './use-cluster-webapp-breadcrumbs';
 export { useClusterWebappBreadcrumbs } from './use-cluster-webapp-breadcrumbs';

package/lib/esm/src/components/c3-navigation-v2/index.js

@@ -12,4 +12,5 @@ export { C3NotificationsPanel } from './tools/c3-notifications-panel.js';
 export { C3UserPanel } from './tools/c3-user-panel.js';
 export { useC3NavigationV2 } from './use-c3-navigation-v2.js';
 export { useCamundaTools } from './use-camunda-tools.js';
+export { useClusterSidebarEntries } from './use-cluster-sidebar-entries.js';
 export { useClusterWebappBreadcrumbs } from './use-cluster-webapp-breadcrumbs.js';

package/lib/esm/src/components/c3-navigation-v2/stories/story-templates.d.ts

@@ -8,4 +8,7 @@ export declare const ToolPanelsTemplate: FC;
 export declare const BreadcrumbActionsTemplate: FC;
 export declare const ClusterWebappTemplate: FC;
 export declare const HeaderTrailingContentTemplate: FC;
+export declare const PruningTemplate: FC;
+export declare const BuildClusterSidebarEntriesTemplate: FC;
 export declare const CompactSectionTemplate: FC;
+export declare const GlobalActionWithCustomElementTemplate: FC;