@camunda/camunda-composite-components 0.23.4 → 0.24.0

package/lib/esm/package.json

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

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-v2/c3-navigation-v2.js

@@ -63,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

@@ -147,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[];
@@ -155,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;

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

@@ -6,8 +6,12 @@ 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 { createContext, useContext, useEffect, useRef, useState, } from 'react';
 import styled, { css } from 'styled-components';
+const SidebarLabelsContext = createContext({
+    groupToggleAria: ({ label, isExpanded }) => isExpanded ? `Collapse ${label}` : `Expand ${label}`,
+});
+const useSidebarLabels = () => useContext(SidebarLabelsContext);
 const SidebarNav = styled.nav `
   position: fixed;
   top: 3rem;
@@ -36,13 +40,12 @@ const NavButton = styled.button `
   flex-wrap: nowrap;
   gap: var(--cds-spacing-04);
   width: 100%;
-  min-height: 2.5rem;
+  height: var(--cds-spacing-09);
+  box-sizing: border-box;
   padding: ${(p) => {
     if (p.$depth > 0)
-        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)';
+        return `0 var(--cds-spacing-05) 0 ${0.75 + p.$depth * 1.75}rem`;
+    return p.$isExpanded ? '0 var(--cds-spacing-05)' : '0';
 }};
   justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
   background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'transparent')};
@@ -86,7 +89,8 @@ const GroupHeader = styled.div `
   align-items: center;
   flex-wrap: nowrap;
   width: 100%;
-  min-height: 2.5rem;
+  height: var(--cds-spacing-09);
+  box-sizing: border-box;
   padding-right: var(--cds-spacing-04);
   gap: var(--cds-spacing-03);
   overflow: hidden;
@@ -98,21 +102,20 @@ const GroupHeader = styled.div `
       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)'};
+        background: ${p.$isActive ? 'var(--cds-layer-selected)' : 'var(--cds-layer-hover)'};
       }
     `}
 `;
 const GroupLabelButton = styled.button `
   display: flex;
   align-items: center;
+  align-self: stretch;
   flex: 1;
   min-width: 0;
   padding: ${(p) => {
     if (p.$depth > 0)
-        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)';
+        return `0 0 0 ${0.75 + p.$depth * 1.75}rem`;
+    return '0 0 0 var(--cds-spacing-05)';
 }};
   background: transparent;
   border: none;
@@ -139,7 +142,11 @@ const ExpandButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--cds-spacing-02);
+  flex-shrink: 0;
+  align-self: center;
+  width: var(--cds-spacing-07);
+  height: var(--cds-spacing-07);
+  padding: 0;
   background: transparent;
   border: none;
   border-radius: 4px;
@@ -159,12 +166,13 @@ const ExpandButton = styled.button `
 const PlainGroupLabel = styled.span `
   display: flex;
   align-items: center;
+  align-self: stretch;
   flex: 1;
   min-width: 0;
   padding: ${(p) => {
     if (p.$depth > 0)
-        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)';
+        return `0 0 0 ${0.75 + p.$depth * 1.75}rem`;
+    return '0 0 0 var(--cds-spacing-05)';
 }};
   gap: var(--cds-spacing-04);
   color: var(--cds-text-secondary);
@@ -231,10 +239,9 @@ const CollapseButton = styled.button `
   flex-wrap: nowrap;
   gap: var(--cds-spacing-04);
   width: 100%;
-  min-height: 2.5rem;
-  padding: ${(p) => p.$isExpanded
-    ? 'var(--cds-spacing-04) var(--cds-spacing-05)'
-    : 'var(--cds-spacing-04)'};
+  height: var(--cds-spacing-09);
+  box-sizing: border-box;
+  padding: ${(p) => (p.$isExpanded ? '0 var(--cds-spacing-05)' : '0')};
   justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
   background: transparent;
   border: none;
@@ -316,13 +323,15 @@ const GroupItemNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
 };
 const GroupNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
     const Icon = node.icon;
+    const { groupToggleAria } = useSidebarLabels();
     if (!sidebarExpanded) {
         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(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 &&
+    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": groupToggleAria({
+                            label: node.label,
+                            isExpanded: !!node.isExpanded,
+                        }), "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)))] }));
 };
 const SectionNode = ({ node, sidebarExpanded, linkComponent, hideTopDivider, eatScrollPadding, tight, }) => (_jsxs(SectionDivider, { "$hideTopDivider": hideTopDivider, "$eatScrollPadding": eatScrollPadding, "$tight": tight, children: [sidebarExpanded && node.title && _jsx(SectionTitle, { children: node.title }), node.children.map((child) => (_jsx(SidebarNodeComponent, { node: child, sidebarExpanded: sidebarExpanded, depth: 0, linkComponent: linkComponent }, child.key)))] }));
@@ -347,31 +356,37 @@ const SidebarNodeComponent = ({ node, sidebarExpanded, depth, linkComponent, hid
  * Loose items (not wrapped in a section) are valid and behave as an implicit
  * untitled group at the top.
  */
-export const C3Sidebar = ({ ariaLabel, children: nodes, isExpanded = true, onToggleExpanded, expandedWidth = '16rem', collapsedWidth = '3rem', linkComponent, }) => {
+export const C3Sidebar = ({ ariaLabel, children: nodes, isExpanded = true, onToggleExpanded, expandedWidth = '16rem', collapsedWidth = '3rem', linkComponent, labels, }) => {
     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 prunedNodes.map((node) => {
-                        let hideTopDivider = false;
-                        let eatScrollPadding = false;
-                        let tight = false;
-                        if (node.type === 'section') {
-                            const isFirst = !sectionSeen;
-                            hideTopDivider =
-                                (isFirst && !hasNonSectionNodes) || !!node.compact;
-                            eatScrollPadding =
-                                isFirst && !hasNonSectionNodes && !!node.compact;
-                            tight = prevSectionCompact;
-                            sectionSeen = true;
-                            prevSectionCompact = !!node.compact;
-                        }
-                        else {
-                            hasNonSectionNodes = true;
-                        }
-                        return (_jsx(SidebarNodeComponent, { node: node, sidebarExpanded: isExpanded, depth: 0, linkComponent: linkComponent, hideTopDivider: hideTopDivider, eatScrollPadding: eatScrollPadding, tight: tight }, node.key));
-                    });
-                })() }), 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" })] }) }) }))] }));
+    const collapseLabel = labels?.collapse ?? 'Collapse';
+    const expandLabel = labels?.expand ?? 'Expand';
+    const toggleAria = labels?.toggleAriaLabel ??
+        ((expanded) => (expanded ? 'Collapse sidebar' : 'Expand sidebar'));
+    const groupToggleAria = labels?.groupToggleAriaLabel ??
+        (({ label, isExpanded: e }) => e ? `Collapse ${label}` : `Expand ${label}`);
+    return (_jsx(SidebarLabelsContext.Provider, { value: { groupToggleAria }, children: _jsxs(SidebarNav, { "$width": width, "aria-label": ariaLabel, children: [_jsx(ScrollArea, { "$sidebarExpanded": isExpanded, children: (() => {
+                        let sectionSeen = false;
+                        let prevSectionCompact = false;
+                        let hasNonSectionNodes = false;
+                        return prunedNodes.map((node) => {
+                            let hideTopDivider = false;
+                            let eatScrollPadding = false;
+                            let tight = false;
+                            if (node.type === 'section') {
+                                const isFirst = !sectionSeen;
+                                hideTopDivider =
+                                    (isFirst && !hasNonSectionNodes) || !!node.compact;
+                                eatScrollPadding =
+                                    isFirst && !hasNonSectionNodes && !!node.compact;
+                                tight = prevSectionCompact;
+                                sectionSeen = true;
+                                prevSectionCompact = !!node.compact;
+                            }
+                            else {
+                                hasNonSectionNodes = true;
+                            }
+                            return (_jsx(SidebarNodeComponent, { node: node, sidebarExpanded: isExpanded, depth: 0, linkComponent: linkComponent, hideTopDivider: hideTopDivider, eatScrollPadding: eatScrollPadding, tight: tight }, node.key));
+                        });
+                    })() }), onToggleExpanded && (_jsx(CollapseToggleArea, { children: _jsx(CollapsedItemTooltip, { label: expandLabel, enabled: !isExpanded, children: _jsxs(CollapseButton, { "$isExpanded": isExpanded, onClick: onToggleExpanded, "aria-label": toggleAria(isExpanded), "aria-expanded": isExpanded, children: [isExpanded ? (_jsx(ChevronLeft, { size: 20, style: { flexShrink: 0 } })) : (_jsx(ChevronRight, { size: 20, style: { flexShrink: 0 } })), isExpanded && _jsx(NavLabel, { children: collapseLabel })] }) }) }))] }) }));
 };

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

@@ -1,14 +1,16 @@
 export type { CamundaApp } from '../../utils/camunda.types';
 export { C3BreadcrumbBar } from './c3-breadcrumb-bar';
 export { C3NavigationV2 } from './c3-navigation-v2';
-export type { AppProps, BreadcrumbAction, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarNode, SidebarProps, SidebarSection, ToolDescriptor, } from './c3-navigation-v2.types';
+export type { AppProps, BreadcrumbAction, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarLabels, SidebarNode, SidebarProps, SidebarSection, ToolDescriptor, } from './c3-navigation-v2.types';
 export { C3Sidebar } from './c3-sidebar';
 export { C3ToolsArea } from './c3-tools-area';
 export type { C3InfoPanelProps, InfoPanelElement } from './tools/c3-info-panel';
 export { C3InfoPanel } from './tools/c3-info-panel';
-export type { C3NotificationsPanelProps } from './tools/c3-notifications-panel';
+export type { C3NotificationsPanelLabels, C3NotificationsPanelProps, } from './tools/c3-notifications-panel';
 export { C3NotificationsPanel } from './tools/c3-notifications-panel';
-export type { C3UserPanelProps, UserPanelElement, } from './tools/c3-user-panel';
+export type { C3ThemeSelectorLabels, C3ThemeSelectorProps, } from './tools/c3-theme-selector';
+export { C3ThemeSelector } from './tools/c3-theme-selector';
+export type { C3UserPanelLabels, C3UserPanelProps, UserPanelElement, } from './tools/c3-user-panel';
 export { C3UserPanel } from './tools/c3-user-panel';
 export type { BreadcrumbDescriptor, BreadcrumbDropdownItemDescriptor, GroupDescriptor, GroupItemDescriptor, ItemDescriptor, SectionDescriptor, SidebarNodeDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, } from './use-c3-navigation-v2';
 export { useC3NavigationV2 } from './use-c3-navigation-v2';

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

@@ -9,6 +9,7 @@ export { C3Sidebar } from './c3-sidebar.js';
 export { C3ToolsArea } from './c3-tools-area.js';
 export { C3InfoPanel } from './tools/c3-info-panel.js';
 export { C3NotificationsPanel } from './tools/c3-notifications-panel.js';
+export { C3ThemeSelector } from './tools/c3-theme-selector.js';
 export { C3UserPanel } from './tools/c3-user-panel.js';
 export { useC3NavigationV2 } from './use-c3-navigation-v2.js';
 export { useCamundaTools } from './use-camunda-tools.js';

package/lib/esm/src/components/c3-navigation-v2/tools/c3-info-panel.d.ts

@@ -6,6 +6,7 @@ export interface InfoPanelElement {
 }
 export interface C3InfoPanelProps {
     elements: InfoPanelElement[];
-    title?: string;
+    /** Defaults to `'Info'`. */
+    title?: string | null;
 }
 export declare const C3InfoPanel: FC<C3InfoPanelProps>;

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

@@ -30,4 +30,4 @@ const LinkButton = styled.button `
     outline-offset: -2px;
   }
 `;
-export const C3InfoPanel = ({ elements, title = 'Help & Resources', }) => (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: title }) }), _jsx(LinkList, { children: elements.map((el) => (_jsx(LinkItem, { children: _jsx(LinkButton, { onClick: el.onClick, children: el.label }) }, el.key))) })] }));
+export const C3InfoPanel = ({ elements, title = 'Info', }) => (_jsxs(_Fragment, { children: [title && (_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: title }) })), _jsx(LinkList, { children: elements.map((el) => (_jsx(LinkItem, { children: _jsx(LinkButton, { onClick: el.onClick, children: el.label }) }, el.key))) })] }));

package/lib/esm/src/components/c3-navigation-v2/tools/c3-notifications-panel.d.ts

@@ -1,6 +1,17 @@
 import { type FC } from 'react';
 import type { Notification } from '../../../api/notifications';
+export interface C3NotificationsPanelLabels {
+    /** Defaults to `'Dismiss all'`. */
+    dismissAll?: string;
+    /** Defaults to `'No notifications'`. */
+    emptyTitle?: string;
+    /** Defaults to `'New updates regarding your processes, clusters and more will appear here.'`. */
+    emptyDescription?: string;
+}
 export interface C3NotificationsPanelProps {
     onLinkClick?: (meta: Notification['meta']) => void;
+    /** Defaults to `'Notifications'`. */
+    title?: string | null;
+    labels?: C3NotificationsPanelLabels;
 }
 export declare const C3NotificationsPanel: FC<C3NotificationsPanelProps>;

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

@@ -28,7 +28,7 @@ const EmptyStateDescription = styled(NotificationDescription) `
   margin-top: var(--cds-spacing-03);
 `;
 const sortDescending = (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
-export const C3NotificationsPanel = ({ onLinkClick, }) => {
+export const C3NotificationsPanel = ({ onLinkClick, title = 'Notifications', labels, }) => {
     const { enabled, notifications, markAllAsRead, dismiss, dismissAll, analytics, } = useContext(C3NotificationContext);
     // Snapshot uuids that were unread when the panel opened so "new" dots
     // persist until the panel closes, even after mark-as-read runs.
@@ -41,17 +41,21 @@ export const C3NotificationsPanel = ({ onLinkClick, }) => {
         if (enabled)
             analytics('notification-panel-opened');
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsxs(PanelHeader, { style: {
+    return (_jsxs(_Fragment, { children: [(title || notifications.length > 0) && (_jsxs(PanelHeader, { style: {
                     width: '100%',
                     height: 60,
                     display: 'flex',
                     flexDirection: 'row',
-                    justifyContent: 'space-between',
+                    // Without a title, the dismiss-all button is the sole row item;
+                    // flex-end keeps it pinned right instead of drifting left under
+                    // `space-between`.
+                    justifyContent: title ? 'space-between' : 'flex-end',
                     alignItems: 'center',
-                }, children: [_jsx(PanelTitle, { children: "Notifications" }), notifications.length > 0 && (_jsx(DismissAllButton, { kind: 'ghost', size: 'sm', onClick: () => dismissAll(notifications), children: "Dismiss all" }))] }), notifications.length > 0 ? ([...notifications].sort(sortDescending).map((notification) => (_jsx(C3NotificationContainer, { onRead: () => undefined, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
+                }, children: [title && _jsx(PanelTitle, { children: title }), notifications.length > 0 && (_jsx(DismissAllButton, { kind: 'ghost', size: 'sm', onClick: () => dismissAll(notifications), children: labels?.dismissAll ?? 'Dismiss all' }))] })), notifications.length > 0 ? ([...notifications].sort(sortDescending).map((notification) => (_jsx(C3NotificationContainer, { onRead: () => undefined, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
                     if (enabled) {
                         analytics('notification-clicked-cta', notification.meta?.identifier);
                     }
                     onLinkClick?.(notification.meta);
-                }, unread: unreadAtOpen.has(notification.uuid), ...notification }, notification.uuid)))) : (_jsxs(EmptyState, { children: [_jsx(C3BellIcon, { size: 56 }), _jsx(EmptyStateTitle, { children: "No notifications" }), _jsx(EmptyStateDescription, { children: "New updates regarding your processes, clusters and more will appear here." })] }))] }));
+                }, unread: unreadAtOpen.has(notification.uuid), ...notification }, notification.uuid)))) : (_jsxs(EmptyState, { children: [_jsx(C3BellIcon, { size: 56 }), _jsx(EmptyStateTitle, { children: labels?.emptyTitle ?? 'No notifications' }), _jsx(EmptyStateDescription, { children: labels?.emptyDescription ??
+                            'New updates regarding your processes, clusters and more will appear here.' })] }))] }));
 };

package/lib/esm/src/components/c3-navigation-v2/tools/c3-theme-selector.d.ts

@@ -0,0 +1,25 @@
+import type { FC } from 'react';
+import type { Theme } from '../../c3-user-configuration/c3-profile-provider/c3-profile-provider';
+export interface C3ThemeSelectorLabels {
+    /** Defaults to `'Theme'`. */
+    legend?: string;
+    /** Defaults to `'Light'`. */
+    light?: string;
+    /** Defaults to `'System'`. */
+    system?: string;
+    /** Defaults to `'Dark'`. */
+    dark?: string;
+}
+export interface C3ThemeSelectorProps {
+    currentTheme: Theme;
+    onChange: (theme: Theme) => void;
+    labels?: C3ThemeSelectorLabels;
+}
+/**
+ * Light / System / Dark radio group, matching the V1 user sidebar's
+ * built-in theme switcher. Consumers wire it into V2's
+ * `useCamundaTools.user.customSection` (or anywhere else) and pass
+ * their own state. SaaS consumers can read `theme` and
+ * `onThemeChange` from `useC3Profile()`; SM consumers pass local state.
+ */
+export declare const C3ThemeSelector: FC<C3ThemeSelectorProps>;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { Layer, RadioButton, RadioButtonGroup } from '@carbon/react';
+/**
+ * Light / System / Dark radio group, matching the V1 user sidebar's
+ * built-in theme switcher. Consumers wire it into V2's
+ * `useCamundaTools.user.customSection` (or anywhere else) and pass
+ * their own state. SaaS consumers can read `theme` and
+ * `onThemeChange` from `useC3Profile()`; SM consumers pass local state.
+ */
+export const C3ThemeSelector = ({ currentTheme, onChange, labels, }) => (_jsx(Layer, { children: _jsx("div", { style: { padding: '0.5rem 1rem' }, children: _jsxs(RadioButtonGroup, { name: 'theme-radio-group', legendText: labels?.legend ?? 'Theme', orientation: 'vertical', valueSelected: currentTheme, onChange: (value) => onChange(value), children: [_jsx(RadioButton, { id: 'theme-light', labelText: labels?.light ?? 'Light', value: 'light' }), _jsx(RadioButton, { id: 'theme-system', labelText: labels?.system ?? 'System', value: 'system' }), _jsx(RadioButton, { id: 'theme-dark', labelText: labels?.dark ?? 'Dark', value: 'dark' })] }) }) }));

package/lib/esm/src/components/c3-navigation-v2/tools/c3-user-panel.d.ts

@@ -26,5 +26,20 @@ export interface C3UserPanelProps {
      * a built-in link (`terms`, `privacy`, `imprint`) replace the default.
      */
     elements?: UserPanelElement[];
+    /** Defaults to `'Account'`. */
+    title?: string | null;
+    labels?: C3UserPanelLabels;
+}
+export interface C3UserPanelLabels {
+    /** Defaults to `'Terms of use'`. */
+    termsOfUse?: string;
+    /** Defaults to `'Privacy policy'`. */
+    privacyPolicy?: string;
+    /** Defaults to `'Imprint'`. */
+    imprint?: string;
+    /** Defaults to `'Log out'`. */
+    logOut?: string;
+    /** Footer copyright. Defaults to `'© Camunda Services GmbH {year}'`. Receives the current year. */
+    copyright?: (year: number) => string;
 }
 export declare const C3UserPanel: FC<C3UserPanelProps>;

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

@@ -4,11 +4,9 @@ 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 { Button, FormLabel, RadioButton, RadioButtonGroup, Stack, Toggle, } from '@carbon/react';
+import { Button, Toggle } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons/index.esm.js';
 import styled from 'styled-components';
-import { useC3Profile, } from '../../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
-import { useC3UserConfiguration } from '../../c3-user-configuration/c3-user-configuration-provider.js';
 import { PanelHeader, PanelTitle } from './panel-primitives.js';
 const ProfileSection = styled.div `
   padding: var(--cds-spacing-05);
@@ -26,10 +24,6 @@ const ProfileEmail = styled.span `
   font-size: var(--cds-label-01-font-size);
   color: var(--cds-text-secondary);
 `;
-const ThemeSection = styled.div `
-  padding: var(--cds-spacing-05);
-  border-bottom: 1px solid var(--cds-border-subtle-01);
-`;
 const CustomSection = styled.div `
   border-bottom: 1px solid var(--cds-border-subtle-01);
 `;
@@ -95,31 +89,30 @@ const Copyright = styled.p `
   line-height: var(--cds-label-01-line-height);
   letter-spacing: var(--cds-label-01-letter-spacing);
 `;
-const LEGAL_LINKS = [
+const buildLegalLinks = (labels) => [
     {
         key: 'terms',
-        label: 'Terms of use',
+        label: labels?.termsOfUse ?? 'Terms of use',
         onClick: () => window.open('https://camunda.com/legal/terms/camunda-platform/camunda-platform-8-saas-trial/', '_blank'),
     },
     {
         key: 'privacy',
-        label: 'Privacy policy',
+        label: labels?.privacyPolicy ?? 'Privacy policy',
         onClick: () => window.open('https://camunda.com/legal/privacy/', '_blank'),
     },
     {
         key: 'imprint',
-        label: 'Imprint',
+        label: labels?.imprint ?? 'Imprint',
         onClick: () => window.open('https://camunda.com/legal/imprint/', '_blank'),
     },
 ];
-export const C3UserPanel = ({ name, email, version, onLogout, stageToggle, customSection, elements, }) => {
-    const { handleTheme } = useC3UserConfiguration();
-    const { theme, onThemeChange } = useC3Profile();
+export const C3UserPanel = ({ name, email, version, onLogout, stageToggle, customSection, elements, title = 'Account', labels, }) => {
     const consumerKeys = new Set((elements ?? []).map((e) => e.key));
-    const defaults = LEGAL_LINKS.filter((l) => !consumerKeys.has(l.key));
+    const defaults = buildLegalLinks(labels).filter((l) => !consumerKeys.has(l.key));
     const allElements = [...(elements ?? []), ...defaults];
-    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: "Account" }) }), (name || email) && (_jsxs(ProfileSection, { children: [name && _jsx(ProfileName, { children: name }), email && _jsx(ProfileEmail, { children: email })] })), customSection && _jsx(CustomSection, { children: customSection }), handleTheme && (_jsx(ThemeSection, { children: _jsxs(Stack, { gap: 3, children: [_jsx(FormLabel, { children: "Theme" }), _jsxs(RadioButtonGroup, { name: 'theme', valueSelected: theme, onChange: (value) => onThemeChange(value), orientation: 'vertical', children: [_jsx(RadioButton, { value: 'light', labelText: 'Light', id: 'theme-light' }), _jsx(RadioButton, { value: 'dark', labelText: 'Dark', id: 'theme-dark' }), _jsx(RadioButton, { value: 'system', labelText: 'System', id: 'theme-system' })] })] }) })), stageToggle && (_jsx("div", { style: {
+    return (_jsxs(_Fragment, { children: [title && (_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: title }) })), (name || email) && (_jsxs(ProfileSection, { children: [name && _jsx(ProfileName, { children: name }), email && _jsx(ProfileEmail, { children: email })] })), customSection && _jsx(CustomSection, { children: customSection }), stageToggle && (_jsx("div", { style: {
                     padding: 'var(--cds-spacing-05)',
                     borderBottom: '1px solid var(--cds-border-subtle-01)',
-                }, children: _jsx(Toggle, { id: 'stage-toggle', labelText: 'Production features', toggled: stageToggle.prodFeaturesEnabled, onToggle: stageToggle.toggle, size: 'sm' }) })), allElements.length > 0 && (_jsx(ElementList, { children: allElements.map((element) => (_jsx(ElementItem, { children: _jsx(ElementButton, { type: 'button', onClick: element.onClick, children: element.label }) }, element.key))) })), _jsxs(BottomPinned, { children: [version && (_jsxs(VersionWrapper, { children: [_jsx(VersionText, { children: version }), _jsxs(Copyright, { children: ["\u00A9 Camunda Services GmbH ", new Date().getFullYear()] })] })), onLogout && (_jsx(BottomActions, { children: _jsx(Button, { kind: 'ghost', size: 'lg', onClick: onLogout, renderIcon: ArrowRight, children: "Log out" }) }))] })] }));
+                }, children: _jsx(Toggle, { id: 'stage-toggle', labelText: 'Production features', toggled: stageToggle.prodFeaturesEnabled, onToggle: stageToggle.toggle, size: 'sm' }) })), allElements.length > 0 && (_jsx(ElementList, { children: allElements.map((element) => (_jsx(ElementItem, { children: _jsx(ElementButton, { type: 'button', onClick: element.onClick, children: element.label }) }, element.key))) })), _jsxs(BottomPinned, { children: [version && (_jsxs(VersionWrapper, { children: [_jsx(VersionText, { children: version }), _jsx(Copyright, { children: labels?.copyright?.(new Date().getFullYear()) ??
+                                    `© Camunda Services GmbH ${new Date().getFullYear()}` })] })), onLogout && (_jsx(BottomActions, { children: _jsx(Button, { kind: 'ghost', size: 'lg', onClick: onLogout, renderIcon: ArrowRight, children: labels?.logOut ?? 'Log out' }) }))] })] }));
 };

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

@@ -1,4 +1,4 @@
-import type { BreadcrumbAction, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, ToolDescriptor } from './c3-navigation-v2.types';
+import type { BreadcrumbAction, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarLabels, ToolDescriptor } from './c3-navigation-v2.types';
 type ActiveMatcher = boolean | string | ((activeItemKey: string) => boolean);
 export interface ItemDescriptor {
     type: 'item';
@@ -82,6 +82,8 @@ export interface UseC3NavigationV2Options {
     skipToContentLabel?: string;
     headerAriaLabel?: string;
     sidebarAriaLabel?: string;
+    /** Forwarded to `C3Sidebar` `labels`. */
+    sidebarLabels?: SidebarLabels;
     /** Used to resolve `isActive` on sidebar items and `isSelected` on breadcrumb dropdown items. */
     activeItemKey: string;
     sidebarChildren?: SidebarNodeDescriptor[];

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

@@ -30,7 +30,7 @@ function collectDefaultExpanded(nodes, out) {
  * descriptors (isActive, label functions) into concrete props.
  */
 export function useC3NavigationV2(options) {
-    const { app, skipToContentTargetId, skipToContentLabel, headerAriaLabel, sidebarAriaLabel = 'Main navigation', activeItemKey, sidebarChildren = [], breadcrumbs = [], tools, globalActions, sidebarExpandedWidth, sidebarCollapsedWidth, defaultSidebarExpanded = true, onSidebarToggle, linkComponent, headerTrailingContent, } = options;
+    const { app, skipToContentTargetId, skipToContentLabel, headerAriaLabel, sidebarAriaLabel = 'Main navigation', sidebarLabels, activeItemKey, sidebarChildren = [], breadcrumbs = [], tools, globalActions, sidebarExpandedWidth, sidebarCollapsedWidth, defaultSidebarExpanded = true, onSidebarToggle, linkComponent, headerTrailingContent, } = options;
     const [isSidebarExpanded, setIsSidebarExpanded] = useState(defaultSidebarExpanded);
     const setSidebarExpanded = useCallback((expanded) => {
         setIsSidebarExpanded(expanded);
@@ -173,6 +173,7 @@ export function useC3NavigationV2(options) {
             expandedWidth: sidebarExpandedWidth,
             collapsedWidth: sidebarCollapsedWidth,
             linkComponent,
+            labels: sidebarLabels,
         }
         : undefined;
     const navProps = useMemo(() => ({

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

@@ -2,10 +2,15 @@ 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';
+import { type C3NotificationsPanelLabels } from './tools/c3-notifications-panel';
 import { type C3UserPanelProps } from './tools/c3-user-panel';
 export interface NotificationsToolOptions {
     onLinkClick?: (meta: Notification['meta']) => void;
     ariaLabel?: string;
+    /** Forwarded to `C3NotificationsPanel`. */
+    title?: string | null;
+    /** Forwarded to `C3NotificationsPanel`. */
+    labels?: C3NotificationsPanelLabels;
 }
 export type UserToolOptions = C3UserPanelProps & {
     ariaLabel?: string;
@@ -16,7 +21,8 @@ export interface HelpToolOptions {
 }
 export interface InfoToolOptions {
     elements: InfoPanelElement[];
-    title?: string;
+    /** Forwarded to `C3InfoPanel`. */
+    title?: string | null;
     ariaLabel?: string;
 }
 export interface UseCamundaToolsOptions {

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

@@ -5,13 +5,13 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * You may not use this file except in compliance with the commercial license.
  */
 import { HeaderGlobalAction as HeaderGlobalActionBase } from '@carbon/react';
-import { Help as HelpIcon, Information, Notification as NotificationIcon, UserAvatar, } from '@carbon/react/icons/index.esm.js';
+import { Help as HelpIcon, Notification as NotificationIcon, UserAvatar, } from '@carbon/react/icons/index.esm.js';
 import { useContext, useMemo } from 'react';
 import { C3NotificationsUnreadIcon } from '../../assets/c3-icons.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 { 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`
@@ -45,7 +45,7 @@ export const useCamundaTools = (options) => {
                     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 })),
+                panel: (_jsx(C3NotificationsPanel, { onLinkClick: notifOptions.onLinkClick, title: notifOptions.title, labels: notifOptions.labels })),
             });
         }
         if (options.info !== undefined) {
@@ -54,7 +54,7 @@ export const useCamundaTools = (options) => {
             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(HelpIcon, { size: 20 }) })),
                 panel: (_jsx(C3InfoPanel, { elements: elements, title: title })),
             });
         }

package/lib/esm/src/components/c3-navigation-v2/use-cluster-webapp-breadcrumbs.d.ts

@@ -3,30 +3,28 @@ import type { BreadcrumbDescriptor } from './use-c3-navigation-v2';
 export interface UseClusterWebappBreadcrumbsOptions {
     /** The app currently being viewed. */
     currentApp: CamundaApp;
-    /**
-     * Optional resolver to convert an endpoint URL into linkProps.
-     * Defaults to `(url) => ({ href: url })`. Override to support
-     * client-side routing (e.g. returning `{ to: path }` for internal links).
-     */
-    resolveLinkProps?: (url: string, app: string) => {
-        href?: string;
-        to?: string;
-        [key: string]: unknown;
-    };
 }
 /**
  * Builds the standard breadcrumb chain for a cluster-scoped Camunda webapp:
  *
- *   [Org] > [Cluster] > [App ▾]
+ *   [Org ▾] > [Cluster ▾] > [App ▾]
  *
- * - **Org crumb**: shown when org data is available (SaaS). Links back to
- *   web modeler at the org level.
- * - **Cluster crumb**: shown when cluster data is available. Links back to
- *   web modeler / console at the cluster level.
- * - **App crumb**: always shown. Includes a dropdown to switch between
- *   sibling apps on the same cluster (filtered to apps with endpoints).
+ * - **Org crumb**: shown when org data is available (SaaS). Label links back
+ *   to web modeler for the current org. Dropdown switches orgs and lands on
+ *   web modeler scoped to the selected org. Dropdown only renders when there
+ *   is at least one sibling org and the current cluster exposes a modeler
+ *   endpoint to derive sibling URLs from.
+ * - **Cluster crumb**: shown when cluster data is available. Label links back
+ *   to web modeler / console at the cluster level. Dropdown switches clusters
+ *   while staying on `currentApp`, filtered to clusters that expose an
+ *   endpoint for that app (alias-aware via `getEndpointForApp`).
+ * - **App crumb**: always shown. Dropdown switches between sibling apps on
+ *   the same cluster (filtered to apps with endpoints).
  *
- * Crumbs are omitted when the underlying data is unavailable, so the same
+ * Each dropdown follows the breadcrumb convention: clicking the label
+ * navigates, clicking the chevron opens the dropdown. Items are listed in
+ * source order with the current entry marked `isSelected`. Crumbs and
+ * dropdowns are omitted when the underlying data is unavailable, so the same
  * hook works for both SaaS (full chain) and Self-Managed (partial or single
  * crumb) without any environment flag.
  */

package/lib/esm/src/components/c3-navigation-v2/use-cluster-webapp-breadcrumbs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } 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.
@@ -5,7 +6,8 @@
  */
 import { Building, CloudApp } from '@carbon/react/icons/index.esm.js';
 import { useMemo } from 'react';
-import { APP_ICONS, getReadableAppName } from '../../utils/camunda.js';
+import { APP_ICONS, getEndpointForApp, getReadableAppName, isAdminApp, resolveAdminAppName, } from '../../utils/camunda.js';
+import { C3ClusterTag } from '../c3-cluster-tag/c3-cluster-tag.js';
 import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
 import { useC3UserConfiguration } from '../c3-user-configuration/c3-user-configuration-provider.js';
 /**
@@ -20,77 +22,185 @@ const SWITCHABLE_APPS = [
     'optimize',
     'admin',
 ];
+/**
+ * Replaces the path of `modelerEndpoint` with `/org/{orgId}`. Used to derive
+ * the modeler URL for sibling orgs from the current cluster's modeler
+ * endpoint. Assumes all modeler URLs share the same host across orgs (SaaS
+ * pattern).
+ */
+function buildModelerOrgUrl(modelerEndpoint, orgId) {
+    try {
+        const url = new URL(modelerEndpoint);
+        url.pathname = `/org/${orgId}`;
+        url.search = '';
+        return url.toString();
+    }
+    catch {
+        return undefined;
+    }
+}
 /**
  * Builds the standard breadcrumb chain for a cluster-scoped Camunda webapp:
  *
- *   [Org] > [Cluster] > [App ▾]
+ *   [Org ▾] > [Cluster ▾] > [App ▾]
  *
- * - **Org crumb**: shown when org data is available (SaaS). Links back to
- *   web modeler at the org level.
- * - **Cluster crumb**: shown when cluster data is available. Links back to
- *   web modeler / console at the cluster level.
- * - **App crumb**: always shown. Includes a dropdown to switch between
- *   sibling apps on the same cluster (filtered to apps with endpoints).
+ * - **Org crumb**: shown when org data is available (SaaS). Label links back
+ *   to web modeler for the current org. Dropdown switches orgs and lands on
+ *   web modeler scoped to the selected org. Dropdown only renders when there
+ *   is at least one sibling org and the current cluster exposes a modeler
+ *   endpoint to derive sibling URLs from.
+ * - **Cluster crumb**: shown when cluster data is available. Label links back
+ *   to web modeler / console at the cluster level. Dropdown switches clusters
+ *   while staying on `currentApp`, filtered to clusters that expose an
+ *   endpoint for that app (alias-aware via `getEndpointForApp`).
+ * - **App crumb**: always shown. Dropdown switches between sibling apps on
+ *   the same cluster (filtered to apps with endpoints).
  *
- * Crumbs are omitted when the underlying data is unavailable, so the same
+ * Each dropdown follows the breadcrumb convention: clicking the label
+ * navigates, clicking the chevron opens the dropdown. Items are listed in
+ * source order with the current entry marked `isSelected`. Crumbs and
+ * dropdowns are omitted when the underlying data is unavailable, so the same
  * hook works for both SaaS (full chain) and Self-Managed (partial or single
  * crumb) without any environment flag.
  */
 export function useClusterWebappBreadcrumbs(options) {
-    const { currentApp, resolveLinkProps = (url) => ({ href: url }) } = options;
-    const { clusters, activeOrg } = useC3Profile();
+    const { currentApp } = options;
+    const { clusters, activeOrg, orgs } = useC3Profile();
     const config = useC3UserConfiguration();
     const currentClusterUuid = config.currentClusterUuid;
     const currentCluster = useMemo(() => clusters?.find((c) => c.uuid === currentClusterUuid) ?? null, [clusters, currentClusterUuid]);
     return useMemo(() => {
         const crumbs = [];
+        const modelerUrl = currentCluster?.endpoints?.modeler;
         // ── Org crumb ──────────────────────────────────────────────────────────
         if (activeOrg) {
-            const modelerUrl = currentCluster?.endpoints?.modeler;
+            const allOrgs = orgs ?? [];
+            const hasSiblings = allOrgs.filter((o) => o.uuid !== activeOrg.uuid).length > 0;
+            const orgDropdownItems = hasSiblings && modelerUrl
+                ? allOrgs.flatMap((o) => {
+                    const isCurrent = o.uuid === activeOrg.uuid;
+                    if (isCurrent) {
+                        return [
+                            {
+                                key: o.uuid,
+                                label: o.name,
+                                icon: Building,
+                                isSelected: true,
+                            },
+                        ];
+                    }
+                    const href = buildModelerOrgUrl(modelerUrl, o.uuid);
+                    if (!href)
+                        return [];
+                    return [
+                        {
+                            key: o.uuid,
+                            label: o.name,
+                            icon: Building,
+                            isSelected: false,
+                            linkProps: { href },
+                        },
+                    ];
+                })
+                : undefined;
             crumbs.push({
                 key: 'org',
                 label: activeOrg.name,
                 icon: Building,
-                ...(modelerUrl
-                    ? { linkProps: resolveLinkProps(modelerUrl, 'org') }
+                ...(modelerUrl ? { linkProps: { href: modelerUrl } } : {}),
+                ...(orgDropdownItems
+                    ? {
+                        dropdownTitle: 'Switch organization',
+                        dropdownAriaLabel: 'Switch organization',
+                        dropdownItems: orgDropdownItems,
+                    }
                     : {}),
             });
         }
         // ── Cluster crumb ──────────────────────────────────────────────────────
         if (currentCluster) {
-            const modelerUrl = currentCluster.endpoints?.modeler;
             const clusterUrl = modelerUrl
                 ? `${modelerUrl}?fromCluster=${currentCluster.uuid}`
                 : undefined;
+            const reachableClusters = (clusters ?? []).filter((c) => c.uuid === currentCluster.uuid ||
+                getEndpointForApp(currentApp, c.endpoints));
+            const hasSiblings = reachableClusters.filter((c) => c.uuid !== currentCluster.uuid).length >
+                0;
+            const clusterDropdownItems = hasSiblings
+                ? reachableClusters.map((c) => {
+                    const isCurrent = c.uuid === currentCluster.uuid;
+                    const stage = c.labels?.camunda?.[0];
+                    return {
+                        key: c.uuid,
+                        label: c.name,
+                        icon: CloudApp,
+                        isSelected: isCurrent,
+                        ...(isCurrent
+                            ? {}
+                            : {
+                                linkProps: {
+                                    href: getEndpointForApp(currentApp, c.endpoints) ?? '',
+                                },
+                            }),
+                        ...(stage
+                            ? { trailingElement: _jsx(C3ClusterTag, { stage: stage, subtle: true }) }
+                            : {}),
+                    };
+                })
+                : undefined;
             crumbs.push({
                 key: 'cluster',
                 label: currentCluster.name,
                 icon: CloudApp,
-                ...(clusterUrl
-                    ? { linkProps: resolveLinkProps(clusterUrl, 'cluster') }
+                ...(clusterUrl ? { linkProps: { href: clusterUrl } } : {}),
+                ...(clusterDropdownItems
+                    ? {
+                        dropdownTitle: 'Switch cluster',
+                        dropdownAriaLabel: 'Switch cluster',
+                        dropdownItems: clusterDropdownItems,
+                    }
                     : {}),
             });
         }
         // ── App crumb ──────────────────────────────────────────────────────────
-        const appLabel = getReadableAppName(currentApp);
-        const appIcon = APP_ICONS[currentApp];
-        const siblingApps = SWITCHABLE_APPS.filter((app) => app !== currentApp && currentCluster?.endpoints?.[app]);
-        const dropdownItems = siblingApps.length > 0
-            ? [
-                {
-                    key: currentApp,
-                    label: appLabel,
-                    icon: appIcon,
-                    isSelected: true,
-                },
-                ...siblingApps.map((app) => ({
+        // Resolve label/icon via the same admin↔identity aliasing the sidebar
+        // entries use (`useClusterSidebarEntries`), so older clusters that expose
+        // only `identity` render as "Identity" instead of disappearing.
+        // `SWITCHABLE_APPS` carries only the canonical `admin` key; consumers
+        // that pass `currentApp: 'identity'` (legacy code path) still match the
+        // switcher row via this normalisation, otherwise the current entry
+        // would be missing from the dropdown and nothing would be selected.
+        const switcherKey = isAdminApp(currentApp) ? 'admin' : currentApp;
+        const resolvedCurrentApp = isAdminApp(currentApp) && currentCluster
+            ? resolveAdminAppName(currentCluster)
+            : currentApp;
+        const appLabel = getReadableAppName(resolvedCurrentApp);
+        const appIcon = APP_ICONS[resolvedCurrentApp];
+        const reachableApps = currentCluster
+            ? SWITCHABLE_APPS.filter((app) => app === switcherKey ||
+                getEndpointForApp(app, currentCluster.endpoints))
+            : [switcherKey];
+        const hasSiblingApps = reachableApps.filter((app) => app !== switcherKey).length > 0;
+        const dropdownItems = hasSiblingApps && currentCluster
+            ? reachableApps.map((app) => {
+                const isCurrent = app === switcherKey;
+                const resolvedApp = isAdminApp(app)
+                    ? resolveAdminAppName(currentCluster)
+                    : app;
+                return {
                     key: app,
-                    label: getReadableAppName(app),
-                    icon: APP_ICONS[app],
-                    isSelected: false,
-                    linkProps: resolveLinkProps(currentCluster?.endpoints[app] ?? '', app),
-                })),
-            ]
+                    label: getReadableAppName(resolvedApp),
+                    icon: APP_ICONS[resolvedApp],
+                    isSelected: isCurrent,
+                    ...(isCurrent
+                        ? {}
+                        : {
+                            linkProps: {
+                                href: getEndpointForApp(app, currentCluster.endpoints) ?? '',
+                            },
+                        }),
+                };
+            })
             : undefined;
         crumbs.push({
             key: 'app',
@@ -105,5 +215,5 @@ export function useClusterWebappBreadcrumbs(options) {
                 : {}),
         });
         return crumbs;
-    }, [activeOrg, currentCluster, currentApp, resolveLinkProps]);
+    }, [activeOrg, orgs, clusters, currentCluster, currentApp]);
 }

package/lib/esm/src/index.d.ts

@@ -15,8 +15,8 @@ export { C3LicenseTag, type C3LicenseTagProps, } from './components/c3-license-t
 export { default as C3Navigation } from './components/c3-navigation';
 export { C3NavigationAppProps, C3NavigationElementProps, C3NavigationNavBarElement, C3NavigationNavBarProps, C3NavigationNavBarSubElement, C3NavigationProps, } from './components/c3-navigation/c3-navigation.types';
 export { C3NavigationSideBarBaseProps } from './components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types';
-export type { AppProps as C3NavV2AppProps, BreadcrumbDescriptor, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, C3NotificationsPanelProps, C3UserPanelProps, GlobalActionButton, GroupDescriptor, GroupItemDescriptor, HelpToolOptions, ItemDescriptor, LinkComponent, LinkProps, NotificationsToolOptions, SectionDescriptor, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarNode, SidebarNodeDescriptor, SidebarProps, SidebarSection, ToolDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, UseCamundaToolsOptions, UseClusterSidebarEntriesOptions, UserToolOptions, } from './components/c3-navigation-v2';
-export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2';
+export type { AppProps as C3NavV2AppProps, BreadcrumbDescriptor, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, C3NotificationsPanelLabels, C3NotificationsPanelProps, C3ThemeSelectorLabels, C3ThemeSelectorProps, C3UserPanelLabels, C3UserPanelProps, GlobalActionButton, GroupDescriptor, GroupItemDescriptor, HelpToolOptions, ItemDescriptor, LinkComponent, LinkProps, NotificationsToolOptions, SectionDescriptor, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarLabels, SidebarNode, SidebarNodeDescriptor, SidebarProps, SidebarSection, ToolDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, UseCamundaToolsOptions, UseClusterSidebarEntriesOptions, UserToolOptions, } from './components/c3-navigation-v2';
+export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ThemeSelector, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2';
 export { C3BreadcrumbProps } from './components/c3-page/c3-breadcrumb/c3-breadcrumb.types';
 export { C3Page } from './components/c3-page/c3-page';
 export { C3PageProps } from './components/c3-page/c3-page.types';

package/lib/esm/src/index.js

@@ -13,7 +13,7 @@ export { C3HelpCenter } from './components/c3-help-center/c3-help-center.js';
 export { useC3HelpCenter } from './components/c3-help-center/c3-help-center-provider.js';
 export { C3LicenseTag, } from './components/c3-license-tag/index.js';
 export { default as C3Navigation } from './components/c3-navigation/index.js';
-export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2/index.js';
+export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ThemeSelector, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2/index.js';
 export { C3Page } from './components/c3-page/c3-page.js';
 export { C3ResponsiveStack } from './components/c3-responsive-stack/c3-responsive-stack.js';
 export { useC3Profile } from './components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.23.4",
+  "version": "0.24.0",
   "description": "Camunda Composite Components",
   "bugs": {
     "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -60,7 +60,7 @@
     "styled-components": "6.4.2",
     "typescript-eslint": "8.59.4",
     "wait-on": "9.0.10",
-    "@camunda/ccma-shared-types": "0.1.0"
+    "@camunda/ccma-shared-types": "0.1.1"
   },
   "peerDependencies": {
     "@carbon/react": "1.x",