@camunda/camunda-composite-components 0.23.3 → 0.24.0

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 styled from 'styled-components';
+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')};
@@ -76,30 +79,43 @@ const NavLabel = styled.span `
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+/**
+ * Container row for `group` (pure section) and `group-item` (clickable +
+ * expandable) variants. `$clickable` adds the navigable affordance:
+ * hover background + transition. `$isActive` flips the selected styling.
+ */
 const GroupHeader = styled.div `
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   width: 100%;
-  min-height: 2.5rem;
+  height: var(--cds-spacing-09);
+  box-sizing: border-box;
+  padding-right: var(--cds-spacing-04);
+  gap: var(--cds-spacing-03);
   overflow: hidden;
   background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'transparent')};
   border-left: ${(p) => (p.$isActive ? '3px solid var(--cds-border-interactive)' : '3px solid transparent')};
-  transition: background 0.15s, color 0.15s;
 
-  &:hover:not(:has(button[data-expand]:hover)) {
-    background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'var(--cds-layer-hover)')};
-  }
+  ${(p) => p.$clickable &&
+    css `
+      transition: background 0.15s, color 0.15s;
+
+      &:hover:not(:has(button[data-expand]:hover)) {
+        background: ${p.$isActive ? 'var(--cds-layer-selected)' : 'var(--cds-layer-hover)'};
+      }
+    `}
 `;
 const GroupLabelButton = styled.button `
   display: flex;
   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;
@@ -126,8 +142,11 @@ const ExpandButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--cds-spacing-02);
-  margin-right: var(--cds-spacing-04);
+  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;
@@ -144,52 +163,22 @@ const ExpandButton = styled.button `
     outline-offset: -2px;
   }
 `;
-const PlainGroupHeader = styled.div `
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  width: 100%;
-  min-height: 2.5rem;
-  overflow: hidden;
-  border-left: 3px solid transparent;
-`;
 const PlainGroupLabel = styled.span `
   display: flex;
   align-items: center;
+  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);
   font-size: 0.875rem;
   font-weight: 400;
 `;
-const PlainGroupExpandButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cds-spacing-02);
-  margin-right: var(--cds-spacing-04);
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--cds-icon-secondary);
-  transition: background 0.15s;
-
-  &:hover {
-    background: var(--cds-layer-hover);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--cds-focus);
-    outline-offset: -2px;
-  }
-`;
 const StyledPopover = styled(Popover) `
   display: block;
 
@@ -200,7 +189,9 @@ const StyledPopover = styled(Popover) `
     white-space: nowrap;
   }
 `;
-const CollapsedItemTooltip = ({ label, children, }) => {
+// `enabled={false}` keeps the wrapper but skips the popover. Lets a parent
+// button keep its focus across state toggles (see the collapse button below).
+const CollapsedItemTooltip = ({ label, enabled = true, children, }) => {
     const [open, setOpen] = useState(false);
     const timerRef = useRef(null);
     const handleMouseEnter = () => {
@@ -217,7 +208,7 @@ const CollapsedItemTooltip = ({ label, children, }) => {
         if (timerRef.current)
             clearTimeout(timerRef.current);
     }, []);
-    return (_jsxs(StyledPopover, { open: open, align: 'right', highContrast: true, dropShadow: false, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, _jsx(PopoverContent, { children: label })] }));
+    return (_jsxs(StyledPopover, { open: enabled && open, align: 'right', highContrast: true, dropShadow: false, onMouseEnter: enabled ? handleMouseEnter : undefined, onMouseLeave: enabled ? handleMouseLeave : undefined, children: [children, _jsx(PopoverContent, { children: label })] }));
 };
 const SectionDivider = styled.div `
   border-top: ${(p) => (p.$hideTopDivider ? 'none' : '1px solid var(--cds-border-subtle-01)')};
@@ -248,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;
@@ -323,7 +313,7 @@ const GroupItemNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
         const collapsed = (_jsx(NavButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isExpanded": false, "$depth": 0, onClick: node.onClick ?? node.onToggleExpand, "aria-current": isActive ? 'page' : undefined, children: _jsx(Icon, { size: 20, style: { flexShrink: 0 } }) }));
         return (_jsx(CollapsedItemTooltip, { label: node.label, children: collapsed }));
     }
-    return (_jsxs("div", { children: [_jsxs(GroupHeader, { "$isActive": isActive, "$depth": depth, children: [_jsxs(GroupLabelButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isClickable": true, "$depth": depth, onClick: node.onClick, "aria-current": isActive ? 'page' : undefined, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && node.children.length > 0 && (_jsx(ExpandButton, { "data-expand": true, onClick: (e) => {
+    return (_jsxs("div", { children: [_jsxs(GroupHeader, { "$isActive": isActive, "$clickable": true, children: [_jsxs(GroupLabelButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isClickable": true, "$depth": depth, onClick: node.onClick, "aria-current": isActive ? 'page' : undefined, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && node.children.length > 0 && (_jsx(ExpandButton, { "data-expand": true, onClick: (e) => {
                             e.stopPropagation();
                             node.onToggleExpand?.();
                         }, "aria-label": node.isExpanded
@@ -333,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(PlainGroupHeader, { "$depth": depth, children: [_jsxs(PlainGroupLabel, { "$depth": depth, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(PlainGroupExpandButton, { onClick: node.onToggleExpand, "aria-label": node.isExpanded
-                            ? `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)))] }));
@@ -364,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: isExpanded ? (_jsxs(CollapseButton, { "$isExpanded": true, onClick: onToggleExpanded, "aria-label": 'Collapse sidebar', "aria-expanded": true, children: [_jsx(ChevronLeft, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: "Collapse" })] })) : (_jsx(CollapsedItemTooltip, { label: 'Expand', children: _jsx(CollapseButton, { "$isExpanded": false, onClick: onToggleExpanded, "aria-label": 'Expand sidebar', "aria-expanded": false, children: _jsx(ChevronRight, { size: 20, style: { flexShrink: 0 } }) }) })) }))] }));
+    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/c3-tools-area.js

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

package/lib/esm/src/components/c3-navigation-v2/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/stories/story-templates.d.ts

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

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

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

package/lib/esm/src/components/c3-navigation-v2/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>;