@camunda/camunda-composite-components 0.23.2 → 0.23.4

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.23.2",
+    "version": "0.23.4",
     "description": "Camunda Composite Components",
     "bugs": {
         "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -52,41 +52,41 @@
         "jwt-decode": "4.0.0",
         "react-error-boundary": "6.1.1",
         "react-markdown": "10.1.0",
-        "semver": "7.7.4"
+        "semver": "7.8.0"
     },
     "devDependencies": {
-        "@auth0/auth0-spa-js": "2.19.0",
+        "@auth0/auth0-spa-js": "2.19.3",
         "@camunda/ccma-shared-types": "workspace:*",
-        "@carbon/react": "1.103.0",
-        "@chromatic-com/storybook": "5.1.1",
+        "@carbon/react": "1.107.1",
+        "@chromatic-com/storybook": "5.2.1",
         "@mdx-js/react": "3.1.1",
-        "@playwright/test": "1.59.1",
-        "@storybook/addon-a11y": "10.3.5",
-        "@storybook/addon-docs": "10.3.5",
-        "@storybook/addon-links": "10.3.5",
-        "@storybook/addon-vitest": "10.3.5",
-        "@storybook/react": "10.3.5",
-        "@storybook/react-vite": "10.3.5",
-        "@vitest/browser": "4.1.4",
-        "@vitest/browser-playwright": "4.1.4",
-        "vitest": "4.1.4",
+        "@playwright/test": "1.60.0",
+        "@storybook/addon-a11y": "10.4.0",
+        "@storybook/addon-docs": "10.4.0",
+        "@storybook/addon-links": "10.4.0",
+        "@storybook/addon-vitest": "10.4.0",
+        "@storybook/react": "10.4.0",
+        "@storybook/react-vite": "10.4.0",
+        "@vitest/browser": "4.1.7",
+        "@vitest/browser-playwright": "4.1.7",
+        "vitest": "4.1.7",
         "conventional-changelog-conventionalcommits": "9.3.1",
         "eslint-import-resolver-typescript": "4.4.4",
         "eslint-plugin-react": "7.37.5",
-        "eslint-plugin-react-hooks": "7.0.1",
-        "eslint-plugin-storybook": "10.3.5",
+        "eslint-plugin-react-hooks": "7.1.1",
+        "eslint-plugin-storybook": "10.4.0",
         "event-source-polyfill": "1.0.31",
-        "mixpanel-browser": "2.78.0",
-        "playwright": "1.59.1",
-        "react": "19.2.5",
-        "react-dom": "19.2.5",
-        "react-is": "19.2.5",
+        "mixpanel-browser": "2.79.0",
+        "playwright": "1.60.0",
+        "react": "19.2.6",
+        "react-dom": "19.2.6",
+        "react-is": "19.2.6",
         "rimraf": "6.1.3",
         "serve": "14.2.6",
-        "storybook": "10.3.5",
-        "styled-components": "6.4.0",
-        "typescript-eslint": "8.58.1",
-        "wait-on": "9.0.5"
+        "storybook": "10.4.0",
+        "styled-components": "6.4.2",
+        "typescript-eslint": "8.59.4",
+        "wait-on": "9.0.10"
     },
     "peerDependencies": {
         "@carbon/react": "1.x",

package/lib/esm/src/api/endpoints.const.js

@@ -23,8 +23,8 @@ export const CONSOLE = {
 };
 export const STATUS = {
     id: 'status',
-    dev: 'https://camundaultrawombat.statuspage.io/',
-    int: 'https://camundaultrawombat.statuspage.io/',
+    dev: 'https://camundaultrawombat.statuspage.io',
+    int: 'https://camundaultrawombat.statuspage.io',
     prod: 'https://status.camunda.io',
 };
 export function getEndpoint(stage, endpoint) {

package/lib/esm/src/components/c3-data-table/c3-data-table.js

@@ -371,7 +371,7 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                         }
                     }
                 }
-                if (toolbarComponents.length > 0 || !!searchComponent) {
+                if (toolbarComponents.length > 0 || searchComponent) {
                     toolbarComponent = (_jsx(TableToolbar, { "aria-label": 'data table toolbar', children: _jsxs(ToolbarWrapper, { style: {
                                 justifyContent: toolbarComponents.length > 5 ? 'normal' : 'end',
                                 flexWrap: toolbarComponents.length > 5 ? 'wrap' : undefined,

package/lib/esm/src/components/c3-help-center/c3-help-center-provider.d.ts

@@ -1,4 +1,4 @@
-import React, { type FC, type PropsWithChildren } from 'react';
+import React, { type FC, type PropsWithChildren, type RefObject } from 'react';
 export declare enum HelpCenterHintType {
     HelpCenter = "help-center",
     Onboarding = "onboarding"
@@ -13,6 +13,7 @@ export type C3HelpCenterContextValue = {
     setShowHintOnClose: (showHintOnClose: boolean) => void;
     hintType: HelpCenterHintType;
     setHintType: (hintType: HelpCenterHintType) => void;
+    launcherButtonRef: RefObject<HTMLButtonElement | null>;
 };
 export declare const C3HelpCenterContext: React.Context<C3HelpCenterContextValue>;
 export declare const C3HelpCenterProvider: FC<PropsWithChildren>;

package/lib/esm/src/components/c3-help-center/c3-help-center-provider.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } 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 React, { useEffect, useState, } from 'react';
+import React, { useEffect, useRef, useState, } from 'react';
 export var HelpCenterHintType;
 (function (HelpCenterHintType) {
     HelpCenterHintType["HelpCenter"] = "help-center";
@@ -19,6 +19,7 @@ export const C3HelpCenterContext = React.createContext({
     setShowHintOnClose: () => undefined,
     hintType: HelpCenterHintType.Onboarding,
     setHintType: () => undefined,
+    launcherButtonRef: { current: null },
 });
 export const C3HelpCenterProvider = ({ children }) => {
     const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
@@ -26,6 +27,7 @@ export const C3HelpCenterProvider = ({ children }) => {
     const [showHint, setShowHint] = useState(false);
     const [showHintOnClose, setShowHintOnClose] = useState(false);
     const [hintType, setHintType] = useState(HelpCenterHintType.Onboarding);
+    const launcherButtonRef = useRef(null);
     const openHelpCenter = (showTabId) => {
         if (!isHelpCenterOpen) {
             setIsHelpCenterOpen(true);
@@ -53,6 +55,7 @@ export const C3HelpCenterProvider = ({ children }) => {
             setShowHintOnClose,
             hintType,
             setHintType,
+            launcherButtonRef,
         }, children: children }));
 };
 export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

package/lib/esm/src/components/c3-help-center/c3-help-center.d.ts

@@ -1,5 +1,5 @@
 import type { Dict } from 'mixpanel-browser';
-import { type FC } from 'react';
+import React, { type FC } from 'react';
 import { type Theme } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider';
 import type { Persona } from './c3-help-center.types';
 export interface C3HelpCenterProps {
@@ -12,5 +12,6 @@ export interface C3HelpCenterProps {
     onRequestClose?: () => void;
     onRequestOpen?: () => void;
     mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+    launcherButtonRef?: React.RefObject<HTMLButtonElement | null>;
 }
 export declare const C3HelpCenter: FC<C3HelpCenterProps>;

package/lib/esm/src/components/c3-help-center/c3-help-center.js

@@ -21,8 +21,9 @@ const StyledComposedModal = styled(ComposedModal) `
     mask-image: none;
   }
 `;
-export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
-    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, } = useC3HelpCenter();
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, launcherButtonRef, }) => {
+    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, launcherButtonRef: contextLauncherButtonRef, } = useC3HelpCenter();
+    const effectiveLauncherButtonRef = launcherButtonRef ?? contextLauncherButtonRef;
     const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, currentApp, } = useC3UserConfiguration();
     const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
@@ -212,7 +213,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
             setShowSurvey(false);
         }, 400);
     };
-    return (_jsx(Layer, { children: _jsx(StyledComposedModal, { open: isOpen, size: 'lg', onClose: closeFn, className: 'help-center', "aria-label": 'HelpCenter', preventCloseOnClickOutside: true, style: showSurvey || !persona?.wasShown
+    return (_jsx(Layer, { children: _jsx(StyledComposedModal, { open: isOpen, size: 'lg', onClose: closeFn, launcherButtonRef: effectiveLauncherButtonRef, className: 'help-center', "aria-label": 'HelpCenter', preventCloseOnClickOutside: true, style: showSurvey || !persona?.wasShown
                 ? { backgroundColor: 'rgba(22,22,22, 0.8)' }
                 : {}, children: _jsx(ErrorBoundary, { fallbackRender: () => (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { title: 'Help Center', closeModal: closeFn }), _jsx(ModalBody, { children: _jsx(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: 'error', title: 'Something went wrong.', subtitle: 'Try reloading the page.', actionButtonLabel: 'Reload', onActionButtonClick: () => window.location.reload() }) })] })), children: showSurvey || !persona?.wasShown ? (_jsx(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (_jsx(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || '', flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab })) }) }) }));
 };

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

@@ -138,18 +138,18 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
                             const clusterDto = data.payload;
                             const status = clusterDto.status;
                             const endpoints = {
-                                tasklist: status?.tasklistUrl,
-                                operate: status?.operateUrl,
-                                optimize: status?.optimizeUrl,
+                                tasklist: status?.tasklistUrl ?? '',
+                                operate: status?.operateUrl ?? '',
+                                optimize: status?.optimizeUrl ?? '',
                                 console: '',
                                 modeler: '',
                                 identity: status?.identityUrl ?? '',
                                 admin: status?.identityUrl ?? '',
                             };
                             const expectedStatus = {
-                                tasklist: status?.tasklistStatus,
-                                operate: status?.operateStatus,
-                                optimize: status?.optimizeStatus,
+                                tasklist: status?.tasklistStatus ?? '',
+                                operate: status?.operateStatus ?? '',
+                                optimize: status?.optimizeStatus ?? '',
                                 console: '',
                                 modeler: '',
                                 identity: '',

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

@@ -39,6 +39,9 @@ const C3NavigationSidebarElement = (props) => {
         setIsOverflown(element ? element.offsetWidth < element.scrollWidth : false);
     };
     useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
         window.addEventListener('resize', handleSetIsOverflown);
         handleSetIsOverflown();
         return () => window.removeEventListener('resize', handleSetIsOverflown);

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

@@ -60,16 +60,25 @@ const C3NavigationSideBar = (props) => {
         setScrollBarWidth(scrollbarWidth);
     };
     useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
         window.addEventListener('resize', handleResize);
         handleResize();
         return () => window.removeEventListener('resize', handleResize);
     }, []);
     useEffect(() => {
+        let timeoutId;
         if (isOpen) {
-            setTimeout(() => {
+            timeoutId = setTimeout(() => {
                 handleResize();
             }, 120);
         }
+        return () => {
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+        };
     }, [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);

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

@@ -40,6 +40,18 @@ export function useOnClickOutside(handler) {
     return { panelRef, setPanelRef, iconRef, setIconRef };
 }
 export function executeMediaQuery(mediaQuery) {
+    if (typeof window === 'undefined') {
+        return {
+            matches: false,
+            media: mediaQuery,
+            onchange: null,
+            addEventListener: () => { },
+            removeEventListener: () => { },
+            addListener: () => { },
+            removeListener: () => { },
+            dispatchEvent: () => false,
+        };
+    }
     return window.matchMedia(mediaQuery);
 }
 export function useMediaQuery(mediaQuery) {

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

@@ -9,16 +9,16 @@ import { Checkmark, ChevronDown, OverflowMenuVertical, } from '@carbon/react/ico
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
+// `display: contents` so nested flex doesn't trap min-content; label
+// shrinkage propagates to the breadcrumb row directly.
 const SegmentWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  position: relative;
+  display: contents;
 `;
 const SegmentButton = styled.button `
   display: flex;
   align-items: center;
   gap: var(--cds-spacing-03);
-  padding: var(--cds-spacing-02) var(--cds-spacing-03);
+  padding: var(--cds-spacing-02) var(--cds-spacing-04);
   background: transparent;
   border: none;
   border-radius: 4px;
@@ -29,6 +29,8 @@ const SegmentButton = styled.button `
   text-decoration: none;
   white-space: nowrap;
   transition: background 0.15s, color 0.15s;
+  min-width: 0;
+  flex-shrink: ${(p) => (p.$isLast ? 0 : 1)};
 
   &:hover {
     background: ${(p) => (p.$isInteractive ? 'var(--cds-layer-hover)' : 'transparent')};
@@ -41,7 +43,13 @@ const SegmentButton = styled.button `
     outline-offset: -2px;
   }
 `;
-const ChevronButton = styled.button `
+const SegmentLabel = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+`;
+const ControlButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -52,6 +60,7 @@ const ChevronButton = styled.button `
   cursor: pointer;
   color: var(--cds-icon-secondary);
   transition: background 0.15s;
+  flex-shrink: 0;
 
   &:hover {
     background: var(--cds-layer-hover);
@@ -62,32 +71,20 @@ const ChevronButton = styled.button `
     outline-offset: -2px;
   }
 
+  ${SegmentButton} + & {
+    margin-left: -0.125rem;
+  }
+  & + & {
+    margin-left: 0.375rem;
+  }
+`;
+const ChevronButton = styled(ControlButton) `
   svg {
     transform: ${(p) => (p.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
     transition: transform 0.15s;
   }
 `;
-const ActionMenuButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cds-spacing-02);
-  background: ${(p) => (p.$isOpen ? 'var(--cds-layer-01)' : 'transparent')};
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--cds-icon-secondary);
-  transition: background 0.15s;
-
-  &:hover {
-    background: var(--cds-layer-hover);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--cds-focus);
-    outline-offset: -2px;
-  }
-`;
+const ActionMenuButton = styled(ControlButton) ``;
 const ActionMenuItem = styled.button `
   width: 100%;
   display: flex;
@@ -167,6 +164,7 @@ const Separator = styled.span `
   color: var(--cds-text-secondary);
   font-size: 0.875rem;
   user-select: none;
+  flex-shrink: 0;
 
   &::after {
     content: '/';
@@ -312,6 +310,7 @@ const BreadcrumbSegmentComponent = ({ segment, isLast, linkComponent, }) => {
     const dropdownId = useRef(`dropdown-${Math.random().toString(36).slice(2, 8)}`).current;
     const { isOpen, close, toggle } = useBreadcrumbDropdown(dropdownId);
     const wrapperRef = useRef(null);
+    const segmentButtonRef = useRef(null);
     const chevronRef = useRef(null);
     const dropdownPanelRef = useRef(null);
     const hasDropdown = segment.dropdownItems && segment.dropdownItems.length > 0;
@@ -319,8 +318,9 @@ const BreadcrumbSegmentComponent = ({ segment, isLast, linkComponent, }) => {
     const dropdownAriaLabel = segment.dropdownAriaLabel ?? `Switch ${segment.label}`;
     const [dropdownPos, setDropdownPos] = useState(undefined);
     const updateDropdownPosition = useCallback(() => {
-        if (wrapperRef.current) {
-            const rect = wrapperRef.current.getBoundingClientRect();
+        // SegmentWrapper has no box (display: contents); anchor on the button.
+        if (segmentButtonRef.current) {
+            const rect = segmentButtonRef.current.getBoundingClientRect();
             setDropdownPos({ top: rect.bottom + 4, left: rect.left });
         }
     }, []);
@@ -344,11 +344,11 @@ const BreadcrumbSegmentComponent = ({ segment, isLast, linkComponent, }) => {
         close();
     }, [close]);
     const handleDropdownKeyDown = usePanelKeyboard(dropdownPanelRef, close, chevronRef, isOpen, '[role="option"]');
-    return (_jsxs(_Fragment, { children: [_jsxs(SegmentWrapper, { ref: wrapperRef, children: [_jsxs(SegmentButton, { as: segment.linkProps?.href !== undefined
+    return (_jsxs(_Fragment, { children: [_jsxs(SegmentWrapper, { ref: wrapperRef, children: [_jsxs(SegmentButton, { ref: segmentButtonRef, as: segment.linkProps?.href !== undefined
                             ? (linkComponent ?? 'a')
                             : segment.linkProps
                                 ? linkComponent
-                                : undefined, ...(segment.linkProps ?? {}), "$isInteractive": !!(segment.onClick || segment.linkProps), "$isLast": isLast, onClick: segment.onClick, "aria-label": segment.label, children: [Icon && _jsx(Icon, { size: 16, style: { flexShrink: 0 } }), _jsx("span", { children: segment.label }), segment.trailingElement] }), segment.menuElement, segment.actions && segment.actions.length > 0 && (_jsx(ActionsMenu, { actions: segment.actions, ariaLabel: `${segment.label} actions` })), hasDropdown && (_jsx(ChevronButton, { ref: chevronRef, "$isOpen": isOpen, onClick: toggle, onKeyDown: (e) => {
+                                : undefined, ...(segment.linkProps ?? {}), "$isInteractive": !!(segment.onClick || segment.linkProps), "$isLast": isLast, onClick: segment.onClick, "aria-label": segment.label, title: segment.label, children: [Icon && _jsx(Icon, { size: 16, style: { flexShrink: 0 } }), _jsx(SegmentLabel, { children: segment.label }), segment.trailingElement] }), segment.menuElement, segment.actions && segment.actions.length > 0 && (_jsx(ActionsMenu, { actions: segment.actions, ariaLabel: `${segment.label} actions` })), hasDropdown && (_jsx(ChevronButton, { ref: chevronRef, "$isOpen": isOpen, onClick: toggle, onKeyDown: (e) => {
                             if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
                                 if (!isOpen) {
                                     e.preventDefault();
@@ -365,7 +365,9 @@ const BreadcrumbBarWrapper = styled.div `
   align-items: center;
   flex: 1;
   min-width: 0;
+  height: 100%;
   overflow-x: auto;
-  padding-left: var(--cds-spacing-03);
+  margin-left: var(--cds-spacing-03);
+  margin-right: 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

@@ -16,6 +16,12 @@ const StyledHeader = styled(Header) `
   border-bottom: 1px solid var(--cds-border-subtle) !important;
   box-shadow: none !important;
   z-index: 8001 !important;
+
+  // Carbon defaults the tools area to flex: 1, which splits the row
+  // 50/50 with breadcrumbs. Make it intrinsic instead.
+  .cds--header__global {
+    flex: 0 0 auto;
+  }
 `;
 const LogoSection = styled.a `
   display: flex;

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

@@ -2,6 +2,10 @@ import type { ReactNode } from 'react';
 /**
  * Describes a tool button in the header. If `panel` is provided, clicking the
  * button toggles a slide-over panel. Without `panel`, the button is standalone.
+ *
+ * `renderButton` is rendered via JSX (`<tool.renderButton ... />`), so it
+ * may call hooks internally — e.g. reading `C3NotificationContext` to drive
+ * an unread-state badge.
  */
 export interface ToolDescriptor {
     key: string;

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

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover, PopoverContent } from '@carbon/react';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from '@carbon/react/icons/index.esm.js';
 import { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 const SidebarNav = styled.nav `
   position: fixed;
   top: 3rem;
@@ -76,20 +76,33 @@ const NavLabel = styled.span `
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+/**
+ * Container row for `group` (pure section) and `group-item` (clickable +
+ * expandable) variants. `$clickable` adds the navigable affordance:
+ * hover background + transition. `$isActive` flips the selected styling.
+ */
 const GroupHeader = styled.div `
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   width: 100%;
   min-height: 2.5rem;
+  padding-right: var(--cds-spacing-04);
+  gap: var(--cds-spacing-03);
   overflow: hidden;
   background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'transparent')};
   border-left: ${(p) => (p.$isActive ? '3px solid var(--cds-border-interactive)' : '3px solid transparent')};
-  transition: background 0.15s, color 0.15s;
 
-  &:hover:not(:has(button[data-expand]:hover)) {
-    background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'var(--cds-layer-hover)')};
-  }
+  ${(p) => p.$clickable &&
+    css `
+      transition: background 0.15s, color 0.15s;
+
+      &:hover:not(:has(button[data-expand]:hover)) {
+        background: ${p.$isActive
+        ? 'var(--cds-layer-selected)'
+        : 'var(--cds-layer-hover)'};
+      }
+    `}
 `;
 const GroupLabelButton = styled.button `
   display: flex;
@@ -127,7 +140,6 @@ const ExpandButton = styled.button `
   align-items: center;
   justify-content: center;
   padding: var(--cds-spacing-02);
-  margin-right: var(--cds-spacing-04);
   background: transparent;
   border: none;
   border-radius: 4px;
@@ -144,15 +156,6 @@ const ExpandButton = styled.button `
     outline-offset: -2px;
   }
 `;
-const PlainGroupHeader = styled.div `
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  width: 100%;
-  min-height: 2.5rem;
-  overflow: hidden;
-  border-left: 3px solid transparent;
-`;
 const PlainGroupLabel = styled.span `
   display: flex;
   align-items: center;
@@ -168,28 +171,6 @@ const PlainGroupLabel = styled.span `
   font-size: 0.875rem;
   font-weight: 400;
 `;
-const PlainGroupExpandButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cds-spacing-02);
-  margin-right: var(--cds-spacing-04);
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--cds-icon-secondary);
-  transition: background 0.15s;
-
-  &:hover {
-    background: var(--cds-layer-hover);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--cds-focus);
-    outline-offset: -2px;
-  }
-`;
 const StyledPopover = styled(Popover) `
   display: block;
 
@@ -200,7 +181,9 @@ const StyledPopover = styled(Popover) `
     white-space: nowrap;
   }
 `;
-const CollapsedItemTooltip = ({ label, children, }) => {
+// `enabled={false}` keeps the wrapper but skips the popover. Lets a parent
+// button keep its focus across state toggles (see the collapse button below).
+const CollapsedItemTooltip = ({ label, enabled = true, children, }) => {
     const [open, setOpen] = useState(false);
     const timerRef = useRef(null);
     const handleMouseEnter = () => {
@@ -217,7 +200,7 @@ const CollapsedItemTooltip = ({ label, children, }) => {
         if (timerRef.current)
             clearTimeout(timerRef.current);
     }, []);
-    return (_jsxs(StyledPopover, { open: open, align: 'right', highContrast: true, dropShadow: false, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, _jsx(PopoverContent, { children: label })] }));
+    return (_jsxs(StyledPopover, { open: enabled && open, align: 'right', highContrast: true, dropShadow: false, onMouseEnter: enabled ? handleMouseEnter : undefined, onMouseLeave: enabled ? handleMouseLeave : undefined, children: [children, _jsx(PopoverContent, { children: label })] }));
 };
 const SectionDivider = styled.div `
   border-top: ${(p) => (p.$hideTopDivider ? 'none' : '1px solid var(--cds-border-subtle-01)')};
@@ -323,7 +306,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 && node.children.length > 0 && (_jsx(ExpandButton, { "data-expand": true, onClick: (e) => {
+    return (_jsxs("div", { children: [_jsxs(GroupHeader, { "$isActive": isActive, "$clickable": true, 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
@@ -337,7 +320,7 @@ const GroupNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
         const collapsed = (_jsx(NavButton, { "$isActive": false, "$isExpanded": false, "$depth": 0, onClick: node.onToggleExpand, children: _jsx(Icon, { size: 20, style: { flexShrink: 0 } }) }));
         return (_jsx(CollapsedItemTooltip, { label: node.label, children: collapsed }));
     }
-    return (_jsxs("div", { children: [_jsxs(PlainGroupHeader, { "$depth": depth, children: [_jsxs(PlainGroupLabel, { "$depth": depth, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(PlainGroupExpandButton, { onClick: node.onToggleExpand, "aria-label": node.isExpanded
+    return (_jsxs("div", { children: [_jsxs(GroupHeader, { children: [_jsxs(PlainGroupLabel, { "$depth": depth, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(ExpandButton, { "data-expand": true, onClick: node.onToggleExpand, "aria-label": node.isExpanded
                             ? `Collapse ${node.label}`
                             : `Expand ${node.label}`, "aria-expanded": !!node.isExpanded, children: node.isExpanded ? (_jsx(ChevronUp, { size: 16 })) : (_jsx(ChevronDown, { size: 16 })) }))] }), node.isExpanded &&
                 node.children.map((child) => (_jsx(SidebarNodeComponent, { node: child, sidebarExpanded: sidebarExpanded, depth: depth + 1, linkComponent: linkComponent }, child.key)))] }));
@@ -390,5 +373,5 @@ export const C3Sidebar = ({ ariaLabel, children: nodes, isExpanded = true, onTog
                         }
                         return (_jsx(SidebarNodeComponent, { node: node, sidebarExpanded: isExpanded, depth: 0, linkComponent: linkComponent, hideTopDivider: hideTopDivider, eatScrollPadding: eatScrollPadding, tight: tight }, node.key));
                     });
-                })() }), onToggleExpanded && (_jsx(CollapseToggleArea, { children: isExpanded ? (_jsxs(CollapseButton, { "$isExpanded": true, onClick: onToggleExpanded, "aria-label": 'Collapse sidebar', "aria-expanded": true, children: [_jsx(ChevronLeft, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: "Collapse" })] })) : (_jsx(CollapsedItemTooltip, { label: 'Expand', children: _jsx(CollapseButton, { "$isExpanded": false, onClick: onToggleExpanded, "aria-label": 'Expand sidebar', "aria-expanded": false, children: _jsx(ChevronRight, { size: 20, style: { flexShrink: 0 } }) }) })) }))] }));
+                })() }), onToggleExpanded && (_jsx(CollapseToggleArea, { children: _jsx(CollapsedItemTooltip, { label: 'Expand', enabled: !isExpanded, children: _jsxs(CollapseButton, { "$isExpanded": isExpanded, onClick: onToggleExpanded, "aria-label": isExpanded ? 'Collapse sidebar' : 'Expand sidebar', "aria-expanded": isExpanded, children: [isExpanded ? (_jsx(ChevronLeft, { size: 20, style: { flexShrink: 0 } })) : (_jsx(ChevronRight, { size: 20, style: { flexShrink: 0 } })), isExpanded && _jsx(NavLabel, { children: "Collapse" })] }) }) }))] }));
 };

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

@@ -97,9 +97,22 @@ export const C3ToolsArea = ({ tools, activeToolKey: controlledKey, onActiveToolC
             return;
         setActive(null);
     }, [setActive]);
-    return (_jsxs(_Fragment, { children: [tools.map((tool) => (_jsx(Fragment, { children: tool.renderButton({
-                    onClick: () => handleToolClick(tool.key, Boolean(tool.panel)),
-                    isActive: activeKey === tool.key,
-                }) }, tool.key))), activeTool?.panel &&
-                createPortal(_jsx(ToolsPanel, { ref: panelRef, role: 'complementary', "aria-label": activeTool.label, tabIndex: -1, onBlur: handlePanelBlur, children: activeTool.panel }), document.body)] }));
+    // Shift+Tab at the panel's first focusable: close the panel and return
+    // focus to the trigger button, instead of letting focus escape to whatever
+    // sits before the portaled panel in DOM order.
+    const handlePanelKeyDown = useCallback((event) => {
+        if (event.key !== 'Tab' || !event.shiftKey)
+            return;
+        const first = panelRef.current?.querySelector(FOCUSABLE_SELECTOR);
+        if (!first || event.target !== first)
+            return;
+        event.preventDefault();
+        setActive(null);
+        openerRef.current?.focus();
+    }, [setActive]);
+    return (_jsxs(_Fragment, { children: [tools.map((tool) => {
+                const RenderButton = tool.renderButton;
+                return (_jsx(Fragment, { children: _jsx(RenderButton, { onClick: () => handleToolClick(tool.key, Boolean(tool.panel)), isActive: activeKey === tool.key }) }, tool.key));
+            }), activeTool?.panel &&
+                createPortal(_jsx(ToolsPanel, { ref: panelRef, role: 'complementary', "aria-label": activeTool.label, tabIndex: -1, onBlur: handlePanelBlur, onKeyDown: handlePanelKeyDown, children: activeTool.panel }), document.body)] }));
 };

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

@@ -12,3 +12,4 @@ export declare const PruningTemplate: FC;
 export declare const BuildClusterSidebarEntriesTemplate: FC;
 export declare const CompactSectionTemplate: FC;
 export declare const GlobalActionWithCustomElementTemplate: FC;
+export declare const LongBreadcrumbsTemplate: FC;

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

@@ -1379,3 +1379,115 @@ export const GlobalActionWithCustomElementTemplate = () => {
     });
     return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Global Action with Custom Element" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["When a ", _jsx("code", { children: "globalActions" }), " entry supplies an", ' ', _jsx("code", { children: "element" }), ", the navigation renders it as a direct child of the header bar (no wrapper) so popups and inputs that rely on a stable positioning context (e.g. C4Search) work correctly. Click the search icon to expand the input and verify the popup positions against the search field, not against an unrelated parent."] })] })] }));
 };
+// ─── Long breadcrumbs (header space allocation) ─────────────────────────────
+export const LongBreadcrumbsTemplate = () => {
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda Modeler', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: 'readme',
+        breadcrumbs: [
+            {
+                key: 'org',
+                label: 'Globex Megacorp International Holdings GmbH & Co. KG',
+                icon: Building,
+                dropdownTitle: 'Switch organization',
+                dropdownItems: [
+                    {
+                        key: 'org-globex',
+                        label: 'Globex Megacorp International Holdings GmbH & Co. KG',
+                        icon: Building,
+                        isSelected: true,
+                    },
+                    { key: 'org-acme', label: 'Acme Corp', icon: Building },
+                    { key: 'org-beta', label: 'Beta Inc', icon: Building },
+                ],
+            },
+            {
+                key: 'cluster',
+                label: 'eu-west-3 production cluster (long-lived, customer-facing)',
+                icon: CloudApp,
+                dropdownTitle: 'Switch cluster',
+                dropdownItems: [
+                    {
+                        key: 'cluster-prod-eu',
+                        label: 'eu-west-3 production cluster (long-lived, customer-facing)',
+                        icon: CloudApp,
+                        isSelected: true,
+                    },
+                    {
+                        key: 'cluster-staging',
+                        label: 'staging cluster',
+                        icon: CloudApp,
+                    },
+                ],
+                actions: [
+                    {
+                        key: 'pause',
+                        label: 'Pause cluster',
+                        onClick: () => console.log('pause cluster'),
+                    },
+                    {
+                        key: 'rename-cluster',
+                        label: 'Rename cluster',
+                        onClick: () => console.log('rename cluster'),
+                    },
+                    {
+                        key: 'delete-cluster',
+                        label: 'Delete cluster',
+                        isDanger: true,
+                        hasDivider: true,
+                        onClick: () => console.log('delete cluster'),
+                    },
+                ],
+            },
+            {
+                key: 'project',
+                label: 'Customer Onboarding & KYC Verification Pipeline (rev. 2026)',
+                icon: Folder,
+                actions: [
+                    {
+                        key: 'rename',
+                        label: 'Rename project',
+                        onClick: () => console.log('rename project'),
+                    },
+                    {
+                        key: 'duplicate',
+                        label: 'Duplicate project',
+                        onClick: () => console.log('duplicate project'),
+                    },
+                    {
+                        key: 'delete',
+                        label: 'Delete project',
+                        isDanger: true,
+                        hasDivider: true,
+                        onClick: () => console.log('delete project'),
+                    },
+                ],
+            },
+            {
+                key: 'file',
+                label: 'customer-onboarding-kyc-verification-pipeline.bpmn',
+                icon: Diagram,
+                actions: [
+                    {
+                        key: 'rename-file',
+                        label: 'Rename file',
+                        onClick: () => console.log('rename file'),
+                    },
+                    {
+                        key: 'download',
+                        label: 'Download BPMN',
+                        onClick: () => console.log('download'),
+                    },
+                ],
+            },
+        ],
+        sidebarChildren: [],
+        globalActions: [
+            { key: 'notifications', label: 'Notifications', icon: Notification },
+            { key: 'help', label: 'Help', icon: Help },
+            { key: 'user', label: 'Account', icon: UserAvatar },
+        ],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, hasSidebar: false, children: [_jsx("h1", { children: "Long Breadcrumbs" }), _jsx("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: "Demonstrates header space allocation with long org / cluster / project / file names. The tools area on the right renders its intrinsic content; the breadcrumb row claims the remaining width. Resize the viewport to see how the row reacts. Segment-level truncation (ellipsis + overflow collapse chip) is a separate follow-up; today the row scrolls horizontally when content exceeds the budget." })] })] }));
+};

package/lib/esm/src/components/c3-navigation-v2/use-camunda-tools.d.ts

@@ -1,3 +1,4 @@
+import { type FC, type ReactNode } from 'react';
 import type { Notification } from '../../api/notifications';
 import type { ToolDescriptor } from './c3-navigation-v2.types';
 import { type InfoPanelElement } from './tools/c3-info-panel';
@@ -39,11 +40,27 @@ export interface UseCamundaToolsOptions {
      */
     help?: HelpToolOptions;
 }
+export interface UseCamundaToolsReturn {
+    tools: ToolDescriptor[];
+    /**
+     * Wraps the consumer's nav subtree with the providers the requested tools
+     * depend on. Currently only notifications needs a provider; when omitted,
+     * `ToolsProvider` passes children through unchanged. Wrap the
+     * `<C3NavigationV2>` render with this so the tool components can read their
+     * context inside the JSX they're rendered into.
+     */
+    ToolsProvider: FC<{
+        children: ReactNode;
+    }>;
+}
 /**
  * Single helper entry point for the standard Camunda tool set.
- * Returns a ToolDescriptor[] ready to pass into C3NavigationV2's `tools` prop.
- * Custom tools can be appended to the returned array.
+ * Returns a `ToolDescriptor[]` for `C3NavigationV2`'s `tools` prop plus a
+ * `ToolsProvider` that conditionally mounts the providers each requested tool
+ * depends on. Custom tools can be appended to the returned array; if they
+ * have their own provider needs, layer a separate wrapper outside
+ * `ToolsProvider`.
  *
- * Must be called within a C3UserConfigurationProvider tree (SaaS).
+ * Must be called within a `C3UserConfigurationProvider` tree (SaaS).
  */
-export declare const useCamundaTools: (options: UseCamundaToolsOptions) => ToolDescriptor[];
+export declare const useCamundaTools: (options: UseCamundaToolsOptions) => UseCamundaToolsReturn;

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

@@ -1,75 +1,94 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
  * 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 { HeaderGlobalAction } from '@carbon/react';
+import { HeaderGlobalAction as HeaderGlobalActionBase } from '@carbon/react';
 import { Help as HelpIcon, Information, Notification as NotificationIcon, UserAvatar, } from '@carbon/react/icons/index.esm.js';
 import { useContext, useMemo } from 'react';
 import { C3NotificationsUnreadIcon } from '../../assets/c3-icons.js';
-import { C3NotificationContext } from '../c3-navigation/c3-notification-provider/c3-notification-provider.js';
+import { useC3HelpCenter } from '../c3-help-center/c3-help-center-provider.js';
+import C3NotificationProvider, { C3NotificationContext, } from '../c3-navigation/c3-notification-provider/c3-notification-provider.js';
 import { C3InfoPanel } from './tools/c3-info-panel.js';
 import { C3NotificationsPanel } from './tools/c3-notifications-panel.js';
 import { C3UserPanel } from './tools/c3-user-panel.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 — same pattern as
+ * `c3-navigation-appbar` / `-sidebar`.
+ */
+const HeaderGlobalAction = HeaderGlobalActionBase;
 /**
  * Single helper entry point for the standard Camunda tool set.
- * Returns a ToolDescriptor[] ready to pass into C3NavigationV2's `tools` prop.
- * Custom tools can be appended to the returned array.
+ * Returns a `ToolDescriptor[]` for `C3NavigationV2`'s `tools` prop plus a
+ * `ToolsProvider` that conditionally mounts the providers each requested tool
+ * depends on. Custom tools can be appended to the returned array; if they
+ * have their own provider needs, layer a separate wrapper outside
+ * `ToolsProvider`.
  *
- * Must be called within a C3UserConfigurationProvider tree (SaaS).
+ * Must be called within a `C3UserConfigurationProvider` tree (SaaS).
  */
 export const useCamundaTools = (options) => {
-    const { notifications, isFetching } = useContext(C3NotificationContext);
-    const hasUnread = !isFetching && notifications.some((n) => n.state === 'new');
-    return useMemo(() => {
-        const tools = [];
+    const { launcherButtonRef: helpButtonRef } = useC3HelpCenter();
+    const tools = useMemo(() => {
+        const result = [];
         if (options.notifications !== undefined) {
             const notifOptions = options.notifications;
             const label = notifOptions.ariaLabel ?? 'Notifications';
-            tools.push({
+            result.push({
                 key: 'notifications',
                 label,
-                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', ...{ leaveDelayMs: 100 }, children: hasUnread ? (_jsx(C3NotificationsUnreadIcon, { size: 20 })) : (_jsx(NotificationIcon, { size: 20 })) })),
+                renderButton: ({ onClick, isActive }) => {
+                    const { notifications, isFetching } = useContext(C3NotificationContext);
+                    const hasUnread = !isFetching && notifications.some((n) => n.state === 'new');
+                    return (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', leaveDelayMs: 100, children: hasUnread ? (_jsx(C3NotificationsUnreadIcon, { size: 20 })) : (_jsx(NotificationIcon, { size: 20 })) }));
+                },
                 panel: (_jsx(C3NotificationsPanel, { onLinkClick: notifOptions.onLinkClick })),
             });
         }
         if (options.info !== undefined) {
             const { elements, title, ariaLabel } = options.info;
             const label = ariaLabel ?? 'Info';
-            tools.push({
+            result.push({
                 key: 'info',
                 label,
-                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', ...{ leaveDelayMs: 100 }, children: _jsx(Information, { size: 20 }) })),
+                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', leaveDelayMs: 100, children: _jsx(Information, { size: 20 }) })),
                 panel: (_jsx(C3InfoPanel, { elements: elements, title: title })),
             });
         }
         if (options.help !== undefined) {
             const { onClick, ariaLabel } = options.help;
             const label = ariaLabel ?? 'Help';
-            tools.push({
+            result.push({
                 key: 'help',
                 label,
-                renderButton: ({ isActive: _isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, tooltipAlignment: 'center', ...{ leaveDelayMs: 100 }, children: _jsx(HelpIcon, { size: 20 }) })),
+                renderButton: ({ isActive: _isActive }) => (_jsx(HeaderGlobalAction, { ref: helpButtonRef, "aria-label": label, onClick: onClick, tooltipAlignment: 'center', leaveDelayMs: 100, children: _jsx(HelpIcon, { size: 20 }) })),
                 // no panel, help is a plain button
             });
         }
         if (options.user !== undefined) {
             const { ariaLabel, ...panelProps } = options.user;
             const label = ariaLabel ?? 'Account';
-            tools.push({
+            result.push({
                 key: 'user',
                 label,
-                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'end', ...{ leaveDelayMs: 100 }, children: _jsx(UserAvatar, { size: 20 }) })),
+                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'end', leaveDelayMs: 100, children: _jsx(UserAvatar, { size: 20 }) })),
                 panel: (_jsx(C3UserPanel, { ...panelProps })),
             });
         }
-        return tools;
+        return result;
     }, [
-        hasUnread,
         options.notifications,
         options.info,
         options.help,
         options.user,
+        helpButtonRef,
     ]);
+    const ToolsProvider = useMemo(() => {
+        const needsNotifications = options.notifications !== undefined;
+        return ({ children }) => needsNotifications ? (_jsx(C3NotificationProvider, { children: children })) : (_jsx(_Fragment, { children: children }));
+    }, [options.notifications !== undefined]);
+    return { tools, ToolsProvider };
 };

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

@@ -24,15 +24,17 @@ function buildClusterSidebarEntries(clusters, { isAppVisible, resolveClusterLink
             if (!endpoint)
                 return [];
             const teaser = appTeaserRoutes?.[resolvedApp] ?? appTeaserRoutes?.[app];
-            // Admin has no dedicated status on the cluster DTO and doesn't depend
-            // on zeebe being up (it manages the cluster itself). Always link to
-            // the endpoint when present; consumers can still override via
-            // `appTeaserRoutes.admin` / `.identity` if they want a teaser page.
-            const linkProps = isAdminApp(app)
+            // Admin/identity has no dedicated status on the cluster DTO; it rides
+            // the same ingress as zeebe, so we gate its link on zeebe's health —
+            // matching V1's "zeebe as admin health proxy" contract. Consumers can
+            // still surface a teaser via `appTeaserRoutes.admin` / `.identity`
+            // when the link is unavailable.
+            const healthKey = isAdminApp(app)
+                ? 'zeebe'
+                : resolvedApp;
+            const linkProps = cluster.status?.[healthKey] === 'Healthy'
                 ? (teaser ?? { href: endpoint })
-                : cluster.status?.[resolvedApp] === 'Healthy'
-                    ? { href: endpoint }
-                    : teaser;
+                : teaser;
             if (!linkProps)
                 return [];
             return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.23.2",
+  "version": "0.23.4",
   "description": "Camunda Composite Components",
   "bugs": {
     "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -26,41 +26,41 @@
     "jwt-decode": "4.0.0",
     "react-error-boundary": "6.1.1",
     "react-markdown": "10.1.0",
-    "semver": "7.7.4"
+    "semver": "7.8.0"
   },
   "devDependencies": {
-    "@auth0/auth0-spa-js": "2.19.0",
-    "@carbon/react": "1.103.0",
-    "@chromatic-com/storybook": "5.1.1",
+    "@auth0/auth0-spa-js": "2.19.3",
+    "@carbon/react": "1.107.1",
+    "@chromatic-com/storybook": "5.2.1",
     "@mdx-js/react": "3.1.1",
-    "@playwright/test": "1.59.1",
-    "@storybook/addon-a11y": "10.3.5",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-links": "10.3.5",
-    "@storybook/addon-vitest": "10.3.5",
-    "@storybook/react": "10.3.5",
-    "@storybook/react-vite": "10.3.5",
-    "@vitest/browser": "4.1.4",
-    "@vitest/browser-playwright": "4.1.4",
-    "vitest": "4.1.4",
+    "@playwright/test": "1.60.0",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-links": "10.4.0",
+    "@storybook/addon-vitest": "10.4.0",
+    "@storybook/react": "10.4.0",
+    "@storybook/react-vite": "10.4.0",
+    "@vitest/browser": "4.1.7",
+    "@vitest/browser-playwright": "4.1.7",
+    "vitest": "4.1.7",
     "conventional-changelog-conventionalcommits": "9.3.1",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-storybook": "10.3.5",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-storybook": "10.4.0",
     "event-source-polyfill": "1.0.31",
-    "mixpanel-browser": "2.78.0",
-    "playwright": "1.59.1",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
-    "react-is": "19.2.5",
+    "mixpanel-browser": "2.79.0",
+    "playwright": "1.60.0",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-is": "19.2.6",
     "rimraf": "6.1.3",
     "serve": "14.2.6",
-    "storybook": "10.3.5",
-    "styled-components": "6.4.0",
-    "typescript-eslint": "8.58.1",
-    "wait-on": "9.0.5",
-    "@camunda/ccma-shared-types": "0.0.5"
+    "storybook": "10.4.0",
+    "styled-components": "6.4.2",
+    "typescript-eslint": "8.59.4",
+    "wait-on": "9.0.10",
+    "@camunda/ccma-shared-types": "0.1.0"
   },
   "peerDependencies": {
     "@carbon/react": "1.x",