@camunda/camunda-composite-components 0.23.3 → 0.24.0

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.23.3",
+    "version": "0.24.0",
     "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/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-license-tag/c3-license-tag.d.ts

@@ -8,10 +8,9 @@ export interface C3LicenseTagProps {
     expiresAt?: number | string;
 }
 /**
- * Renders a license status tag for the Camunda header. Handles all license
- * states: production, non-production (with tooltip), non-commercial,
- * non-commercial expiring (with countdown), and non-commercial expired.
- *
- * Drop into `headerTrailingContent` of C3NavigationV2.
+ * Renders license status tags for the Camunda header. Mirrors V1 c3-navigation:
+ * always renders a production-status tag, plus a non-commercial tag (or its
+ * expiring/expired variant) when isCommercial === false. Drop the element into
+ * `headerTrailingContent` of C3NavigationV2.
  */
 export declare const C3LicenseTag: (props: C3LicenseTagProps) => JSX.Element | null;

package/lib/esm/src/components/c3-license-tag/c3-license-tag.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, 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.
@@ -17,63 +17,70 @@ function resolveExpiresAt(value) {
         return Date.parse(value);
     return value;
 }
-function getTagVariant(props) {
+// Matches V1 c3-navigation: production-status tag is always shown, and a
+// non-commercial tag is shown additionally when isCommercial === false. They
+// stack rather than override each other.
+function getTagVariants(props) {
     const { isProductionLicense, isCommercial, expiresAt: rawExpiresAt } = props;
     const expiresAt = resolveExpiresAt(rawExpiresAt);
     const now = Date.now();
-    // Non-commercial expired
-    if (isCommercial === false && expiresAt !== undefined && expiresAt < now) {
-        return {
-            label: 'Non-commercial license - expired',
-            color: 'red',
-            icon: Warning,
-            tooltip: (_jsx("p", { children: "To continue using all features, please renew your license." })),
-        };
-    }
-    // Non-commercial about to expire (within 30 days)
-    if (isCommercial === false &&
-        expiresAt !== undefined &&
-        expiresAt - LICENSE_EXPIRY_THRESHOLD < now &&
-        expiresAt > now) {
-        const daysLeft = Math.floor((expiresAt - now) / DAY);
-        return {
-            label: `Non-commercial license - ${daysLeft} ${daysLeft > 1 ? 'days' : 'day'} left`,
-            color: 'blue',
-            icon: Time,
-            tooltip: (_jsx("p", { children: "Please renew and provide new license keys to continue production use of Camunda." })),
-        };
-    }
-    // Non-commercial (not expiring soon or no expiry)
-    if (isCommercial === false &&
-        (expiresAt === undefined || expiresAt - LICENSE_EXPIRY_THRESHOLD >= now)) {
-        return {
-            label: 'Non-commercial license',
-            color: 'gray',
-        };
-    }
-    // Production or non-production license
-    return {
+    const variants = [];
+    variants.push({
+        key: 'license-tag',
         label: isProductionLicense
             ? 'Production license'
             : 'Non-production license',
         color: 'gray',
         tooltip: isProductionLicense ? undefined : (_jsxs("p", { children: ["Non-production license. For production usage details, visit our", ' ', _jsx(Link, { href: NON_PRODUCTION_TERMS_LINK, target: '_blank', rel: 'noopener noreferrer', style: { display: 'inline' }, children: "terms & conditions page" }), ' ', "or", ' ', _jsx(Link, { href: SALES_CONTACT_LINK, target: '_blank', rel: 'noopener noreferrer', style: { display: 'inline' }, children: "contact our sales team" }), "."] })),
-    };
+    });
+    if (isCommercial === false) {
+        if (expiresAt !== undefined && expiresAt < now) {
+            variants.push({
+                key: 'non-commercial-license-tag-is-expired',
+                label: 'Non-commercial license - expired',
+                color: 'red',
+                icon: Warning,
+                tooltip: (_jsx("p", { children: "To continue using all features, please renew your license." })),
+            });
+        }
+        else if (expiresAt !== undefined &&
+            expiresAt - LICENSE_EXPIRY_THRESHOLD < now &&
+            expiresAt > now) {
+            const daysLeft = Math.floor((expiresAt - now) / DAY);
+            variants.push({
+                key: 'non-commercial-license-tag-about-to-expire',
+                label: `Non-commercial license - ${daysLeft} ${daysLeft > 1 ? 'days' : 'day'} left`,
+                color: 'blue',
+                icon: Time,
+                tooltip: (_jsx("p", { children: "Please renew and provide new license keys to continue production use of Camunda." })),
+            });
+        }
+        else {
+            variants.push({
+                key: 'non-commercial-license-tag',
+                label: 'Non-commercial license',
+                color: 'gray',
+            });
+        }
+    }
+    return variants;
+}
+function renderVariant(variant) {
+    const { key, label, color, icon, tooltip } = variant;
+    if (tooltip) {
+        return (_jsxs(Toggletip, { align: 'bottom', children: [_jsx(ToggletipButton, { as: 'span', label: label, children: _jsx(Tag, { type: color, renderIcon: icon, style: { margin: 0, cursor: 'pointer' }, children: label }) }), _jsx(ToggletipContent, { children: tooltip })] }, key));
+    }
+    return (_jsx(Tag, { type: color, renderIcon: icon, style: { margin: 0 }, children: label }, key));
 }
 /**
- * Renders a license status tag for the Camunda header. Handles all license
- * states: production, non-production (with tooltip), non-commercial,
- * non-commercial expiring (with countdown), and non-commercial expired.
- *
- * Drop into `headerTrailingContent` of C3NavigationV2.
+ * Renders license status tags for the Camunda header. Mirrors V1 c3-navigation:
+ * always renders a production-status tag, plus a non-commercial tag (or its
+ * expiring/expired variant) when isCommercial === false. Drop the element into
+ * `headerTrailingContent` of C3NavigationV2.
  */
 export const C3LicenseTag = (props) => {
-    const variant = getTagVariant(props);
-    if (!variant)
+    const variants = getTagVariants(props);
+    if (variants.length === 0)
         return null;
-    const { label, color, icon, tooltip } = variant;
-    if (tooltip) {
-        return (_jsxs(Toggletip, { align: 'bottom', children: [_jsx(ToggletipButton, { as: 'span', label: label, children: _jsx(Tag, { type: color, renderIcon: icon, style: { margin: 0, cursor: 'pointer' }, children: label }) }), _jsx(ToggletipContent, { children: tooltip })] }));
-    }
-    return (_jsx(Tag, { type: color, renderIcon: icon, style: { margin: 0 }, children: label }));
+    return _jsx(_Fragment, { children: variants.map(renderVariant) });
 };

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;
@@ -57,7 +63,7 @@ export const C3NavigationV2 = ({ app, skipToContentTargetId, skipToContentLabel
             root.style.removeProperty('--c3-sidebar-width');
         };
     }, [sidebarWidth]);
-    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: {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledHeader, { "aria-label": ariaLabel, children: [_jsx(SkipToContent, { href: `#${skipToContentTargetId}`, children: skipToContentLabel }), _jsx(LogoSection, { as: app.linkProps ? LinkEl : 'div', "aria-label": app.name ? `Camunda ${app.name}` : 'Camunda', ...(app.linkProps ?? {}), children: _jsx(CamundaLogo, {}) }), breadcrumbs && breadcrumbs.length > 0 && (_jsx(C3BreadcrumbBar, { segments: breadcrumbs, linkComponent: LinkEl })), _jsxs(HeaderGlobalBar, { children: [headerTrailingContent && (_jsx("span", { style: {
                                     display: 'flex',
                                     alignItems: 'center',
                                     padding: '0 var(--cds-spacing-03)',

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;
@@ -143,6 +147,19 @@ export interface SidebarSection {
     compact?: boolean;
 }
 export type SidebarNode = SidebarItem | SidebarGroupItem | SidebarGroup | SidebarSection;
+export interface SidebarLabels {
+    /** Toggle button text when expanded. Defaults to `'Collapse'`. */
+    collapse?: string;
+    /** Tooltip on the collapsed toggle button. Defaults to `'Expand'`. */
+    expand?: string;
+    /** Aria-label on the toggle button. Receives `isExpanded`. Defaults to `'Collapse sidebar'` / `'Expand sidebar'`. */
+    toggleAriaLabel?: (isExpanded: boolean) => string;
+    /** Aria-label on a group's chevron. Receives `{label, isExpanded}`. Defaults to `'Collapse {label}'` / `'Expand {label}'`. */
+    groupToggleAriaLabel?: (args: {
+        label: string;
+        isExpanded: boolean;
+    }) => string;
+}
 export interface SidebarProps {
     ariaLabel: string;
     children: SidebarNode[];
@@ -151,6 +168,7 @@ export interface SidebarProps {
     expandedWidth?: string;
     collapsedWidth?: string;
     linkComponent?: LinkComponent;
+    labels?: SidebarLabels;
 }
 export interface AppProps {
     name?: string;

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

@@ -5,4 +5,4 @@ import type { SidebarProps } from './c3-navigation-v2.types';
  * Loose items (not wrapped in a section) are valid and behave as an implicit
  * untitled group at the top.
  */
-export declare const C3Sidebar: ({ ariaLabel, children: nodes, isExpanded, onToggleExpanded, expandedWidth, collapsedWidth, linkComponent, }: SidebarProps) => JSX.Element;
+export declare const C3Sidebar: ({ ariaLabel, children: nodes, isExpanded, onToggleExpanded, expandedWidth, collapsedWidth, linkComponent, labels, }: SidebarProps) => JSX.Element;